iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Mobile Development

Android app 效能優化系列 第 10

檢測版面配置 - 使用 Layout Inspector

  • 分享至 

  • xImage
  •  

Layout Inspector 是用來檢視執行中的 App 畫面上的 UI 階層狀況,可以幫助我們更容易檢視來找到效能問題。來看範例,我們有一個畫面如下的記帳 App。我們想來看一下他的 Layout 階層狀況怎麼樣。

https://ithelp.ithome.com.tw/upload/images/20220925/201118960jhMC3y4Fb.png

當然我們可以直接在 Android Studio 開啟 activity.xml 就可以從 Component Tree來看出 UI 的階層。

https://ithelp.ithome.com.tw/upload/images/20220925/20111896hDo5EstCtM.png

但從這裡看階層狀況是不夠的,因為這不等於在裝置上真實執行的狀況。你可能使用了 Include、Merge、ViewStub,或者有些畫面是執行某此功能才會出現的。所以我們先把 App 執行起來再執行 Layout Inspector 檢視。在工具列點選 View → Tool Windows → Layout Inspector,開啟之後選擇你的裝置及 ApplicationId。
https://ithelp.ithome.com.tw/upload/images/20220925/20111896kvdr20Fwti.png

開啟後就可以看到執行中的 App 的階層狀況,左邊一樣有個 Component Tree 可以看出階層,右邊的 Layout Display 則是用視覺化的方式來呈現。

https://ithelp.ithome.com.tw/upload/images/20220925/20111896AIMHgzJhyv.png

最右邊還有一個 Attributes,可以依照你選取的元件查詢屬性值。

https://ithelp.ithome.com.tw/upload/images/20220925/20111896Jcs1jT5giP.png

在選取的 View 上面,點選右鍵,可以隱藏某個 View。 隱藏功能可以讓你方便查看在這個 View 背後是怎麼樣的狀況。你也可以讓它只顯示子 View 或只顯示父 View。

3D 視覺化功能檢視

從平面可能很難看出階層,可以切到 3D 檢視功能,點選 3D Mode。
https://ithelp.ithome.com.tw/upload/images/20220925/201118965dPT2zJaoj.png

就可以用3D的角度看得更清楚了。

https://ithelp.ithome.com.tw/upload/images/20220925/20111896641CFLffTb.png

這一篇與上一篇分別介紹了如何優化與檢測版面配置,下一篇開始我們要接著來看實際的繪製效率如何,將以同一個 Frame 是否被繪製了多次的角度來看效能表現。

參考:
https://developer.android.com/studio/debug/layout-inspector


上一篇
優化版面配置
下一篇
減少畫面的重複繪製
系列文
Android app 效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言