视图通常用于绘制用户可看到并与之交互的内容。Component Tree 会实时显示应用层次结构中的每个视图组件,这有助于您调试应用布局,因为您可以直观查看应用中的元素以及与其关联的值。
如要选择某个视图,请在 Component Tree 或 Layout Display 中点击该视图。所选视图的所有布局属性都会显示在 Attributes 面板中。
如果您的布局包含重叠的视图,您可以看到一个区域中的所有视图
当您在 Deep Inspect 模式下右键点击时
。选择
不在前面的视图,请在 Component Tree 中点击该视图,或者
旋转布局。
如要处理复杂的布局,您可以隔离各个视图,以便只有部分布局显示在 Component Tree 中并在 Layout Display 中呈现。如需隔离视图,请截取快照
,右键点击
Component Tree 中的视图,然后选择 Show Only Subtree 或
仅显示父项。要返回完整视图,请右键点击该视图,然后
选择全部显示。您必须先截取快照,然后才能隔离视图。
隐藏布局边框和视图标签
如需隐藏布局元素的边界框或视图标签,请点击 Layout Display 顶部的 View Options 图标 ,然后切换 Show Borders 或 Show View Label。
捕获布局层次结构快照
借助布局检查器,您可以保存正在运行的应用的布局层次结构的快照,
以便与他人分享或日后参考。
快照功能会捕获您在使用布局检查器时通常会看到的数据,包括布局的详细 3D 渲染、视图的组件树、Compose 或混合布局,以及界面中每个组件的详细属性。要保存快照,请点击快照导出/导入,之后
导出快照。
点击导入快照,加载之前保存的布局检查器快照。
3D Mode
Layout Display 可在运行时对应用的视图层次结构进行高级 3D 可视化展示。如需使用此功能,请截取快照 ,点击快照检查器窗口中的 3D Mode 按钮 ,然后拖动鼠标进行旋转。
[null,null,["最后更新时间 (UTC):2025-08-17。"],[],[],null,["# Debug your layout with Layout Inspector\n\nThe Layout Inspector in Android Studio lets you debug the layout of your app by\nshowing a view hierarchy where you can inspect the properties of each view. With\nthe Layout Inspector, you can compare your app layout with design mockups,\ndisplay a magnified or 3D view of your app, and examine details of its layout at\nruntime. This is especially useful when your layout is built at runtime rather\nthan entirely in XML and the layout is behaving unexpectedly.\n**Figure 1.**Embedded Layout Inspector for the Jetchat app.\n\nGet started\n-----------\n\nTo start the Layout Inspector, [run your app](/studio/run), go to the\n**Running Devices** window, and click **Toggle Layout Inspector** .\nIf you switch among multiple devices or projects, the Layout Inspector\nautomatically connects to the debuggable processes running in the foreground of\nthe connected device.\n\nHere's how to do some common tasks:\n\n- To view hierarchy and inspect the properties of each view, use the **Component Tree** and **Attributes** tool windows. Layout Inspector might require an activity restart to access the attributes. For more information, see [View Attribute Inspection](#view-attribute-inspection).\n- To select views by single clicking directly on the views or navigate to code by double clicking on the views, enable **Toggle Deep Inspect** .\n- To interact with the app, disable **Toggle Deep Inspect** .\n- To inspect physical devices, enable [device mirroring](/studio/run/device#device-mirroring).\n- To enable live updates as you update your app's UI, check that [Live Edit](/develop/ui/compose/tooling/iterative-development#live-edit) is enabled.\n- To use [3D mode](#rotate-layout), take a Layout Inspector snapshot and then click **3D Mode** .\n\nSelect or isolate a view\n------------------------\n\nA view usually draws something the user can see and interact with. The\n**Component Tree** shows your app's hierarchy in real time with each view\ncomponent, which helps you debug your app's layout because you can visualize the\nelements within your app and the values associated with them.\n\nTo select a view, click it in the **Component Tree** or the **Layout Display** .\nAll of the layout attributes for the selected view appear in the **Attributes**\npanel.\n\nIf your layout includes overlapping views, you can see all the views in a region\nwhen you right-click in **Deep Inspect** mode\n. To select\na view that isn't in front, click it in the **Component Tree** or\n[rotate the layout](#rotate-layout).\n\nTo work with complex layouts, you can isolate individual views so that only a\nsubset of the layout is shown in the **Component Tree** and rendered in the\n**Layout Display** . To isolate a view, take a snapshot\n, right-click\nthe view in the **Component Tree** and select **Show Only Subtree** or\n**Show Only Parents** . To return to the full view, right-click the view and\nselect **Show All**. You must take a snapshot before isolating a view.\n| **Note:** The ability to isolate a view [is temporarily\n| unavailable](/studio/known-issues#layout-inspector-isolate-view). We're working on fixing this issue.\n\nHide layout borders and view labels\n-----------------------------------\n\nTo hide the bounding box or view labels for a layout element, click **View\nOptions**\nat the top of the **Layout Display** and toggle **Show Borders** or **Show View\nLabel**.\n\nCapture layout hierarchy snapshots\n----------------------------------\n\nLayout Inspector lets you save snapshots of your running app's layout hierarchy,\nso that you can share them with others or refer to them later.\n\nSnapshots capture the data you would typically see when using the Layout\nInspector, including a detailed 3D rendering of your layout, the component tree\nof your View, Compose, or hybrid layout, and detailed attributes for each\ncomponent of your UI. To save a snapshot, click **Snapshot Export/Import**\nand then\n**Export Snapshot**.\n\nLoad a previously saved Layout Inspector snapshot by clicking\n**Import Snapshot**.\n\n3D mode\n-------\n\nThe **Layout Display** features an advanced 3D visualization of your\napp's view hierarchy at runtime. To use this feature, take a snapshot\n, click\nthe **3D Mode** button\nin the\nsnapshot Inspector window, and rotate it by dragging the mouse.\n**Figure 2.**Rotated 3D view of a Layout. **Figure 3.** To expand or contract the layers of the Layout, use the **Layer Spacing** slider.\n\n### Compare app layout to a reference image overlay\n\nTo compare your app layout with a reference image, such as a UI mockup, you can\nload a bitmap image overlay in the Layout Inspector.\n\n- To load an overlay, select the **Load Overlay** option from the **Layout Inspector** toolbar. The overlay is scaled to fit the layout.\n- To adjust the transparency of the overlay, use the **Overlay Alpha** slider.\n- To remove the overlay, click **Clear Overlay**\n\nInspect Compose\n---------------\n\nLayout Inspector lets you inspect a Compose layout inside a running app in\nan emulator or physical device. You can use the Layout Inspector to check how\noften a composable is recomposed or skipped, which can help identify issues with\nyour app. For example, some coding errors might force your UI to recompose\nexcessively, which can cause poor performance. Some coding errors can prevent\nyour UI from recomposing and, therefore, preventing your UI changes from showing\nup on the screen.\n\n[Learn more about Layout Inspector for Compose](/develop/ui/compose/tooling/debug)\n\nView Attribute Inspection\n-------------------------\n\nLayout Inspector requires the following global setting to function properly: \n\n adb shell settings put global debug_view_attributes 1\n\nThis option generates extra information for inspection on all of the\nprocesses on the device.\n\nLayout Inspector automatically enables the setting when started. This\ncauses the current foreground Activity to restart. You will not see another\nActivity restart unless the flag is manually disabled on the device.\n\nTo disable the flag, run the following adb command: \n\n adb shell settings delete global debug_view_attributes\n\nAlternatively, turn off [Enable view attribute inspection](/studio/debug/dev-options#debugging)\nfrom your device's [developer options](/studio/debug/dev-options#enable).\n\nStandalone Layout Inspector\n---------------------------\n\nFor optimal performance, we recommend using the Layout Inspector in its default\nembedded mode. If you want to un-embed the Layout Inspector, go to **File**\n(**Android Studio** on macOS)\\\u003e **Settings** \\\u003e **Tools** \\\u003e **Layout Inspector**\nand clear the **Enable embedded Layout Inspector** checkbox.\n\nIn standalone mode, enable live updates by clicking the **Live Updates**\noption from\nthe **Layout Inspector** toolbar."]]