Android App優化之Layout怎么擺

anly_jun關注

0.1172016.09.03 00:34:00字數 1,668閱讀 15,750

系列文:

背景:Android App優化, 要怎么做?

Android App優化之性能分析工具

Android App優化之提升你的App啟動速度之理論基礎

Android App優化之提升你的App啟動速度之實例挑戰

Android App優化之Layout怎么擺

Android App優化之ANR詳解

Android App優化之消除卡頓

Android App優化之內存優化

Android App優化之持久電量

Android App優化之如何高效網絡請求

優化完App的啟動速度, 接下來我們要關注的就是UI布局怎么更高效了.

欲善其事, 先利其器. 分析布局, 就不得不用到Hierarchy Viewer了.

本文工具使用皆以GithubApp的詳情界面RepoDetailActivity為例說明.
為了不影響閱讀體驗, 對應的布局文件activity_repo_detail.xml的代碼放在文末

1, Hierarchy Viewer怎么用

Hierarchy發音 [美: 'ha??rɑrki] [英: 'ha??rɑ?k?] 層次結構的意思.
之前一直念不順這個單詞Hierarchy, 就簡稱為H Viewer了. 下文就這么簡稱吧.

如官網描述, H Viewer是用來分析調試和優化我們的UI的一個圖形化工具. 它會展示當前界面的View層級.

1.1 啟用H Viewer

比較早接觸Android開發的同學可能知道, H Viewer只能在root過的機器才能使用. 主要是在沒有root過的機器中view server這個服務是沒有開啟的. H Viewer就無法連接到機器獲取view層級信息.

正所謂高手在民間, 大家都嘗試在未root的機器中啟用view server來使用H Viewer. 最具代表性的就是romainguy的ViewServer, 只需集成少量代碼到你的Activity, 相當于在手機端開啟了view server服務, 建立socket通道與PC端的H Viewer通信.

此工程被Android官網吸收, 作為開啟H View的方案之一.

完整開啟H Viewer的套路如下:

手機開啟開發者模式, USB調試.

根據手機的Android系統版本:

• 4.0及以下, 沒有root. 使用上述的開源工程ViewServer提供的方式.
• 4.0及以下, 已經root. 無需其他額外設置.
• 4.1及以上. 需要在PC端設置ANDROID_HVPROTO環境變量.

設置系統環境變量: ANDROID_HVPROTO, 值為ddm
具體設置系統環境變量根據PC系統不同而異.

做完上述配置后, 你就可以打開H Viewer了, 打開DDMS, 如下操作進入H Viewer界面:

?

ddms_open_hviewer

1.2 H Viewer界面詳解

以GithubApp的詳情界面RepoDetailActivity為例說明:

Snip20160902_1.png

界面分為四個部分:

Window
顯示當前連接的設備和供分析的界面. 可手動選擇.

Tree View
樹狀圖的形式展示該Activity中的View層級結構. 可以放大縮小, 每個節點代表一個View, 點擊可以彈出其屬性, 當前值, 并且在LayoutView中會顯示其在界面中相應位置.
Tree View是我們主要要分析的視圖.

Tree Overview
Tree View的概覽圖. 有一個選擇框, 可以拖動選擇查看. 選中的部分會在Tree View中顯示.

Layout View
匹配手機屏幕的視圖, 按照View的實際顯示位置展示出來的框圖.

1.3 H Viewer參數解讀

通過Tree View可以很直觀的看到View的層級.

點擊Tree View的RepoItemView這個節點:

14728281715494.jpg

關于三個小圓點的性能指示, 在App優化之性能分析工具一文中有提到, 再強調一遍:

三個小圓點, 依次表示Measure, Layout, Draw, 可以理解為對應View的onMeasure, onLayout, onDraw三個方法.

• 綠色, 表示該View的此項性能比該View Tree中超過50%的View都要快.

• 黃色, 表示該View的此項性能比該View Tree中超過50%的View都要慢.
• 紅色, 表示該View的此項性能是View Tree中最慢的.

如果你的界面的Tree View中紅點較多, 那就需要注意了. 一般來說:

1, Measure紅點, 可能是布局中嵌套RelativeLayout, 或是嵌套LinearLayout都使用了weight屬性.
2, Layout紅點, 可能是布局層級太深.
3, Draw紅點, 可能是自定義View的繪制有問題, 復雜計算等.

由上圖, 可以看到我們的RepoItemView的三項指標都不合格, 證明其還有很多優化空間. 層級, 繪制都可以優化.

除了用H Viewer來做代碼后分析, Android還提供了Lint, 在我們編寫xml布局文件時就即時的給出一些相關提示.

2, Lint tool

打開RepoDetailActivity的布局文件activity_repo_detail.xml, 在Android Studio菜單欄中開啟Lint檢查:

14728313149102.jpg

選擇當前文件:

14728313382536.jpg

會在下方彈出分析結果:

14728314908964.jpg

分析結果包括用法檢測(例如版本特有屬性), 國際化(字符串是否提取到strings.xml, Rlt支持等), 以及我們今天的主題---性能分析結果.

點開"Android -> Lint -> Performance"項, 可以看到關于布局性能的建議項. 此例中是說ScrollView的父級LinearLayout是不必要的.

3, 怎么優化你的布局

通過以上工具的使用和分析, 也基本能找到布局的一些常見的好與不好的了.

正所謂授之以魚不如授之以漁. 在此也就不太詳細去講怎么優化了, 幾點建議, 大家自行實踐吧:)

盡量減少布局層級和復雜度

盡量不要嵌套使用RelativeLayout.

盡量不要在嵌套的LinearLayout中都使用weight屬性.

Layout的選擇, 以盡量減少View樹的層級為主.

去除不必要的父布局.

善用TextView的Drawable減少布局層級

如果H Viewer查看層級超過5層, 你就需要考慮優化下布局了~

善用Tag

<include>
使用include來重用布局.

<merge>
使用<merge>來解決include或自定義組合ViewGroup導致的冗余層級問題. 例如本例中的RepoItemView的布局文件實際可以用一個<merge>標簽來減少一級.

<ViewStub>

ListView優化

contentView復用

引入holder來避免重復的findViewById.

分頁加載

4, 附示例代碼

因github上的源碼會持續更新, 特留對應代碼在此.

activity_repo_detail.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayoutandroid:id="@+id/root_layout"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/md_white_1000"android:orientation="vertical"android:padding="@dimen/dimen_10"><ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"android:scrollbars="none"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><com.anly.githubapp.ui.widget.RepoItemViewandroid:id="@+id/repo_item_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/md_grey_300"android:elevation="@dimen/dimen_2"/><LinearLayoutandroid:id="@+id/contributor_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dimen_10"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:orientation="horizontal"android:background="@drawable/button_bg"android:paddingLeft="@dimen/dimen_10"><TextViewandroid:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center_vertical"android:text="{oct-organization} Contributors"/><TextViewandroid:id="@+id/contributors_count"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"/></LinearLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/contributor_list"android:layout_width="match_parent"android:layout_height="@dimen/dimen_60"android:layout_marginTop="@dimen/dimen_2"/></LinearLayout><LinearLayoutandroid:id="@+id/fork_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dimen_10"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:orientation="horizontal"android:background="@drawable/button_bg"android:paddingLeft="@dimen/dimen_10"><TextViewandroid:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center_vertical"android:text="{oct-gist_fork} Forks"/><TextViewandroid:id="@+id/forks_count"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"/></LinearLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/fork_list"android:layout_width="match_parent"android:layout_height="@dimen/dimen_60"android:layout_marginTop="@dimen/dimen_2"/></LinearLayout><LinearLayoutandroid:id="@+id/code_layout"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:orientation="horizontal"android:layout_marginTop="@dimen/dimen_10"android:background="@drawable/button_bg"android:paddingLeft="@dimen/dimen_10"><TextViewandroid:id="@+id/code_label"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:text="{oct-file_code} Code"/></LinearLayout><LinearLayoutandroid:id="@+id/readme_layout"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:orientation="horizontal"android:layout_marginTop="@dimen/dimen_10"android:background="@drawable/button_bg"android:paddingLeft="@dimen/dimen_10"><TextViewandroid:id="@+id/readme_label"android:layout_width="match_parent"android:layout_height="@dimen/dimen_40"android:gravity="center_vertical"android:text="{oct-info} README"/></LinearLayout></LinearLayout></ScrollView> </LinearLayout>

com.anly.githubapp.ui.widget.RepoItemView對應的布局:

<?xml version="1.0" encoding="utf-8"?> <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="@dimen/dimen_10"><TextViewandroid:id="@+id/name"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="left|center_vertical"android:maxLines="1"android:text="@string/app_name"android:textColor="@android:color/black"android:textSize="@dimen/text_size_18"/><TextViewandroid:id="@+id/desc"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="left|center_vertical"android:maxLines="2"android:text="@string/app_name"android:textColor="@android:color/darker_gray"android:textSize="@dimen/text_size_12"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dimen_5"android:gravity="center_vertical"android:orientation="horizontal"><ImageViewandroid:id="@+id/image"android:layout_width="@dimen/dimen_32"android:layout_height="@dimen/dimen_32"android:scaleType="centerInside"android:src="@mipmap/ic_launcher"android:visibility="visible"/><TextViewandroid:id="@+id/owner"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginLeft="@dimen/dimen_10"android:gravity="left|center_vertical"android:text="@string/app_name"android:textColor="@android:color/black"android:textSize="@dimen/text_size_14"/></LinearLayout><Viewandroid:layout_marginTop="@dimen/dimen_5"android:layout_width="match_parent"android:layout_height="1px"android:background="@color/grey"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dimen_32"android:gravity="center_vertical"android:orientation="horizontal"android:paddingTop="@dimen/dimen_10"><TextViewandroid:id="@+id/update_time"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="left|center_vertical"android:text="@string/app_name"android:textColor="@android:color/black"android:textSize="@dimen/text_size_12"/><Viewandroid:layout_width="1px"android:layout_height="match_parent"android:background="@color/grey"/><LinearLayoutandroid:id="@+id/star_view"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><ImageViewandroid:id="@+id/star_icon"android:layout_width="@dimen/dimen_16"android:layout_height="@dimen/dimen_16"android:scaleType="centerInside"android:src="@drawable/ic_star"/><TextViewandroid:id="@+id/star"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_marginLeft="@dimen/dimen_5"android:gravity="center"android:text="@string/app_name"android:textColor="@android:color/black"android:textSize="@dimen/text_size_12"/></LinearLayout></LinearLayout></LinearLayout><com.flyco.labelview.LabelViewandroid:id="@+id/label_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"app:lv_background_color="@color/md_yellow_500"app:lv_gravity="TOP_RIGHT"app:lv_text="TEST"app:lv_text_size="@dimen/text_size_12"/> </FrameLayout>

優化不同于做功能, 可能分析的多, 出的成果少~ 比較枯燥, 然而優化也是App發展的必經之路, 歡迎大家分享經驗.

轉載請注明出處, 歡迎大家分享到朋友圈, 微博~

總結

以上是生活随笔為你收集整理的Android App优化之Layout怎么摆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。