【建議收藏】17個XML佈局小技巧
我報名參加金石計劃1期挑戰——瓜分10萬獎池,這是我的第1篇文章,點選檢視活動詳情
前言
我們開發時接觸最多的就是xml
佈局了,還記得我們寫Android的第一個Hello World
嗎,就是通過activity_main.xml顯示出來的。
雖然xml寫的很多,而且也沒有什麼技術難度,但是,這也往往是我們最容易忽略的地方,寫xml不難,寫出好的xml還是得下點功夫了。
什麼算是好的xml佈局呢,我認為核心有兩點,一個是提升開發效率
,另一個是提升app效能
。圍繞著這兩點,我也精心整理出了17
個xml佈局小技巧,下面一起來看看都有哪些,你又掌握了幾個呢?
Space
官網是這麼介紹的:
Space 是一個輕量級的 View 子類,可用於在通用佈局中建立元件之間的間距。
為什麼說是輕量級呢,是因為Space的draw
方法是空的,也就是什麼都不繪製,只有onMeasure方法測量寬高。
來看下原始碼:
``` public final class Space extends View {
/**
* Draw nothing.
*
* @param canvas an unused parameter.
*/
@Override
public void draw(Canvas canvas) {
}
//...
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(
getDefaultSize2(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize2(getSuggestedMinimumHeight(), heightMeasureSpec));
}
} ```
所以Space作用於元件之間的間距時,繪製效率更高,特別是在需要動態修改間距時,這點尤為體現。
比如你要動態修改元件的margin,如果用Space來當間距,只需要修改Space的寬度或高度即可,因為減少了繪製流程,所以比重繪其他元件更高效。
使用起來也很簡單:
<Space
android:id="@+id/space"
android:layout_width="20dp"
android:layout_height="20dp"/>
如果你想,Space完全可以替代margin,但是不一定能替代padding,因為padding是內邊距,假如padding有背景色的話,就不能用Space代替了,因為Space的draw方法什麼都不繪製的原因,所以也不會有背景色,除非背景色是在父view裡設定的。
GuideLine
ConstraintLayout自2018年釋出第一個正式版本以來,已經4年多了,它通過扁平化的佈局方式,有效的解決了層級巢狀的問題,不僅比RelativeLayout更靈活,而且效能上更佳,再配合上視覺化工具拖拽編輯,效率上也有大大的提升,如果你還沒有用上,建議你一定要嘗試一下。
而在使用ConstraintLayout的過程中,我發現有些同學總是會忽略GuideLine
,儘管ConstraintLayout已經非常好用了,但是有些佈局仍然顯得有些「笨拙」。而如果你能妙用GuideLine,你會發現,佈局越來越簡單,適配也越來越方便。
GuideLine是ConstraintLayout佈局的輔助物件,僅用於佈局定位使用,它被標記了View.GONE
,並不會顯示在裝置上。
來看下原始碼:
``` public class Guideline extends View { public Guideline(Context context) { super(context); super.setVisibility(View.GONE); }
public Guideline(Context context, AttributeSet attrs) {
super(context, attrs);
super.setVisibility(View.GONE);
}
public Guideline(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
super.setVisibility(View.GONE);
}
public Guideline(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr);
super.setVisibility(View.GONE);
}
//...
@SuppressLint("MissingSuperCall")
@Override
public void draw(Canvas canvas) {
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(0, 0);
}
//...
} ```
標記為View.GONE是這句super.setVisibility(View.GONE)
設定的預設值,不顯示還是因為draw方法為空,跟上面的Space同出一轍。
GuideLine可以通過3種不同的方式來輔助定位:
- layout_constraintGuide_begin 指定距佈局左側或頂部的固定距離
- layout_constraintGuide_end 指定距佈局右側或底部的固定距離
- layout_constraintGuide_percent 指定佈局寬度或高度的百分比
同時也可以指定不同的方向:
- horizontal 垂直參考線
- vertical 水平參考線
下面簡單演示一下效果:
- 箭頭所指處即建立GuideLine的地方,當然也不止GuideLine,比如還有Barrier
- 第一個紅框裡是水平參考線,70%定位,用百分比能很好的解決適配問題,而我們常規的做法是使用LinearLayout巢狀然後設定子view的weight,雖然巢狀一層不多,但那也是巢狀,就像懷孕一樣,你不能說只懷了一點點...
- 第二個紅框裡是垂直參考線,距離左邊30dp,這種情況適合多個子view向一個目標距離對齊,同樣減少了層級巢狀問題,省得再巢狀一層設定padding,或者多個子view分別設定margin。而右邊如果想要指定一個位置換行,可以瞭解一下Barrier~
xml程式碼就不貼了,已上傳到Github,點選檢視
include
當我們在寫一個複雜的頁面時,xml程式碼可能有幾百行甚至幾千行,閱讀起來總是很麻煩,如果又有很多的RelativeLayout巢狀的話,各個元件之間依賴關係錯綜複雜,看起來更是頭大,這時候就可以考慮抽取一波,用總分總的模式分為header、content、footer,進一步把內容區抽成一個一個的獨立的子layout,然後使用include標籤把它們分別引進根佈局,這就跟我們專案架構設計一個意思,一個殼工程加n個子模組。子layout只需要負責處理好自己內部的佈局,統籌交給父layout,這樣總體就比較清晰,想了解細節再去看子layout即可。
比如:
<include layout="@layout/content_scrolling"/>
content_scrolling即是我們抽出去的子layout。
tools:showIn
這個屬性一般是配合include標籤使用的。當我們把子layout抽出去之後,它的佈局是相對獨立的效果,但是總歸要include到根佈局的,如果能在子layout佈局的時候看到它在父layout裡面的效果,那就事半功倍了。
上面的content_scrolling.xml:
實際上佈局只有一個TextView,但是在預覽檢視中還可以看到FloatingActionButton,這就是使用了tools:showIn屬性,當子layout嵌入在父layout中時,只需要使用tools:showIn
在子layout的根佈局指定父layout,就可以實時預覽在父layout中的效果了。
```
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text"/>
```
即:tools:showIn="@layout/activity_collapsing_toolbar"。
ViewStub
ViewStub是一個輕量級的條件檢視元件。在做類似頁面秒開
這類效能優化時,是比較常見的延遲載入
手段。
輕量級是因為ViewStub跟Space一樣draw方法為空。
條件檢視的場景比如,當我們需要根據條件判斷來顯示哪個view的時候,一般都會把每個場景的view都寫在頁面中,然後根據條件分別設定view的visibility,這樣做的缺點是,即使view是View.GONE,但是在頁面渲染載入的時候仍會例項化建立物件,並初始化它的屬性,很明顯這是浪費資源的,所以這個時候用ViewStub是一個很好的優化手段。
當我們明確知道需要顯示哪個view的時候,通過ViewStub把實際檢視inflate
進來,這樣就避免了資源浪費。
只有呼叫了ViewStub.inflate()的時候佈局才會載入,才會建立物件例項化。
示例:
<ViewStub
android:id="@+id/stub_import"
android:inflatedId="@+id/panel_import"
android:layout="@layout/progress_overlay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
inflate:
findViewById<View>(R.id.stub_import).visibility = View.VISIBLE
// or
val importPanel: View = findViewById<ViewStub>(R.id.stub_import).inflate()
tools:text
TextView是我們使用的最多的一個元件了,經常有這樣的需求,“標題顯示不下用...代替”,是不是很熟悉。
如果標題是一個動態資料,預設顯示app name,拿到資料後再更新。這種情況,一般都是在android:text裡面加字元來除錯,除錯完了再改成預設的app name,其實也不用這麼麻煩,直接預設app name,然後使用tools:text屬性就可以預覽字元超限的效果。
```
預設文案還是用android:text顯示,超限的效果用tools:text預覽即可,實際效果還是android:text,tools:text只是方便我們除錯預覽,提高效率,減少編譯等待時間。
tools:visibility
這個屬性是用來預覽不顯示的View。
比如在“個人中心”頁面需要在暱稱後面給個文案提示“開通會員”,預設不顯示,即android:visibility="gone",判斷不是會員後才顯示文案,但是在開發的過程中需要除錯會員和非會員的兩種顯示效果,即可以通過tools:visibility="visible"來預覽顯示的效果,省得再編譯執行造資料了,方便又提效。
程式碼示例:
<TextView
tools:visibility="visible"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/greenPrimary"
android:gravity="center"
android:padding="10dp"
android:text="開通會員"
android:textColor="@color/white" />
RecyclerView
RecyclerView也是我們使用非常高頻的一個元件了,一般會在xml中這麼定義RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
效果是這樣的:
這樣其實完全看不出RecyclerView在頁面中顯示的效果,只能每次編譯執行看效果,而每次編譯執行無疑會花費我們很多寶貴的時間,下面就介紹幾個可以幫助大家提效
的屬性。
tools:listitem
我們可以通過設定tools:listitem屬性來預覽item的顯示效果,tools:listitem屬性指定的是一個layout
tools:listitem="@layout/item_main"
效果:
tools:itemCount
預覽item在RecyclerView中顯示設定數量的效果,比如:
tools:itemCount="3"
即會顯示3個item的效果。
tools:listheader
tools:listheader="@layout/item_header"
效果同tools:listitem
tools:listfooter
效果同tools:listitem
tools:listfooter="@layout/item_footer"
app:layoutManager
上面RecyclerView的效果是預設垂直方向的,我們都知道RecyclerView必須要設定一個layoutManager才可以顯示出來,我們通常會用程式碼來設定,比如:
mBinding.recycleView.layoutManager = GridLayoutManager(this, 2)
實際上layoutManager也是可以在xml中通過app:layoutManager
屬性來設定的,比如:
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
預設的LinearLayoutManager是垂直方向的,如果我們想要改方向可以通過android:orientation
屬性,比如:
android:orientation="horizontal"
這樣就可以在編寫xml的時候順手就加上了,既可以檢視預覽效果,也避免了程式碼忘記設定的尷尬情況。
app:spanCount
上面的示例中RecyclerView的layoutManager指定了LinearLayoutManager,我們還可以指定為GridLayoutManager,但是GridLayoutManager預設的spanCount是1,如果我們需要設定spanCount為2,那該怎麼預覽呢,這時候就用到了app:spanCount
屬性,可以指定需要顯示的列數。
app:spanCount="2"
效果:
android:tint
著色器,這個屬性在之前的包體積優化中有提到,可以減少圖片數量,從而減小包大小
。
我們通常會用ImageView顯示一張圖片,比如原本是一個白色的返回icon,現在另一個地方要用黑色的了,就不需要使用黑白兩張圖了,而是使用tint來修改為黑色即可,當然,也有侷限,適合純色圖片。
效果:
示例:
```
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:src="@mipmap/ic_back" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/red"
android:src="@mipmap/ic_back"
app:tint="@color/black" />
</LinearLayout>
```
在appcompat的高版本中已經改用app:tint
代替。
程式碼方式修改tint:
mBinding.imageView.imageTintList = ContextCompat.getColorStateList(this, R.color.greenPrimary)
除了tint還有backgroundTint,效果同理。
使用場景除了上面的示例外,還可以在點贊、收藏這類場景的顯示上使用。
android:divider
LinearLayout也是我們使用非常高頻的一個Layout,下面介紹兩個個少為人知的屬性。
相信很多人都用View寫過分割線的效果,類似這樣:
```
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#EEEEEE" />
<TextView />
```
如上,當有多個TextView之間需要新增分割線的時候,就只能一個一個複製,複製其實也沒什麼,就是程式碼看起來不優雅。
其實有個比較優雅的辦法,LinearLayout可以通過android:divider
屬性新增分割線,結合android:showDividers
屬性即可達到效果。
xml:
```
<TextView
style="@style/MyTextView"
android:text="刪除個人資訊"
app:drawableStartCompat="@mipmap/ic_helper" />
<TextView
style="@style/MyTextView"
android:text="登出賬戶"
app:drawableStartCompat="@mipmap/ic_helper" />
<TextView
android:id="@+id/tv_about"
style="@style/MyTextView"
android:text="關於我們"
app:drawableStartCompat="@mipmap/ic_helper" />
</LinearLayout>
```
shape_divider_linear是分割線的樣式:
```
效果:
showDividers有4個選項:
- middle 每兩個元件間顯示分隔線
- beginning 開始處顯示分隔線
- end 結尾處顯示分隔線
- none 不顯示
其實舉一反三,除了分割線,View之間的間隔也可以這麼實現,省得每個子view都要寫margin。
android:animateLayoutChanges
animateLayoutChanges
屬性是ViewGroup裡面的,主要是在子view的新增和移除時,新增一個預設300ms的漸變動畫。
程式碼:
android:animateLayoutChanges="true"
效果:
預設新增移除操作是比較生硬的,加上動畫之後體驗上會好很多。
當然,如果你想修改預設動畫也是可以的。怎麼修改?沒有比學習原始碼更直接的了。
原始碼:
case R.styleable.ViewGroup_animateLayoutChanges:
boolean animateLayoutChanges = a.getBoolean(attr, false);
if (animateLayoutChanges) {
setLayoutTransition(new LayoutTransition());
}
break;
當animateLayoutChanges屬性值為true時,呼叫setLayoutTransition
方法,並傳入一個預設的LayoutTransition
物件。
LayoutTransition物件用於構造動畫,跟一般的動畫使用差不多,感興趣的可以看下官方文件或者跟下原始碼。
自定義LayoutTransition物件之後,呼叫ViewGroup.setLayoutTransition(LayoutTransition)
即可。
android:foreground
android:foreground="?android:attr/selectableItemBackground"
在Android5.0以後,給View加上這個屬性之後,點選時預設會有一個水波紋的效果,一般可點選的View預設都有這個效果,比如Button,一般通常會在自定義的item view上加上這個屬性用來提升使用者體驗。
最後
如上,本文一共介紹了17個在日常編寫xml的過程中對提升效率
和提升效能
的屬性,如果你也有心得,歡迎評論補充。
如果本文對你有一丟丟幫助,也感謝點贊支援~
Github
http://github.com/yechaoa/MaterialDesign
相關文件
- 【yechaoa】2022進階成長,揚帆再起航!
- 【Gradle-5】Gradle常用命令與引數
- 【Gradle-2】一文搞懂Gradle配置
- 【yechaoa】5年Android開發的2021年終總結,實現Flag的一年
- 程式碼規範-對抗軟體複雜度
- 【建議收藏】17個XML佈局小技巧
- 【造輪子】自定義一個隨意拖拽可吸邊的懸浮View
- 怎麼簡單實現選單拖拽排序的功能
- 【保姆級】包體積優化教程
- Android通知Notification使用全解析,看這篇就夠了
- 【首發】根據桌布修改App主題,它真的來了
- Android原生TabLayout使用全解析,看這篇就夠了
- 【漲姿勢】你沒用過的BadgeDrawable
- Android包體積優化(常規、進階、極致)
- Android Studio Arctic Fox | 2020.3.1、Gradle 7.0升級記錄
- Android 11適配指南之Toast解析
- Android 自定義View之隨機數驗證碼(仿寫鴻洋)
- Jetpack之Room的使用,結合Flow
- Android MediaPlayer音訊播放器詳解
- Android 修改系統音量及監聽