效果：
這種布局應該是非常常見了，且寫的比較多，
今天簡單探討一下效果圖中上下兩種布局的寫法，
比較
| 上下效果一致 | 行數 | 層級 |
|---|---|---|
| 上部分 | 121 | 3 |
| 下部分 | 55 | 2 |
| 下部分繼續精簡 | 28 | 2 |
可以看出，對比還是很明顯的，精簡到最后只有最開始的四分之一，
上部分
先看常規item寫法，橫向的LinearLayout嵌套三個子View，分別是
- 左邊的ImageView，
- 中間的TextView，
- 和右邊的ImageView，
然后每個橫向的LinearLayout之間添加一個高度1dp的View來作為橫線，
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/dp_15"
android:layout_marginTop="@dimen/dp_20"
android:layout_marginEnd="@dimen/dp_15"
android:layout_marginBottom="@dimen/dp_20"
android:background="@drawable/shape_bg_white"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="@dimen/dp_20">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_agreement" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/dp_20"
android:layout_weight="1"
android:includeFontPadding="false"
android:text="洗掉個人資訊"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_arrow_right" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="@dimen/dp_50"
android:background="@color/color_F6F6F6" />
<LinearLayout
android:id="@+id/ll2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="@dimen/dp_20">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_agreement" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/dp_20"
android:layout_weight="1"
android:includeFontPadding="false"
android:text="注銷賬戶"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_arrow_right" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="@dimen/dp_50"
android:background="@color/color_F6F6F6" />
<LinearLayout
android:id="@+id/ll3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="@dimen/dp_20">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_agreement" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/dp_20"
android:layout_weight="1"
android:includeFontPadding="false"
android:text="關于"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@mipmap/ic_arrow_right" />
</LinearLayout>
</LinearLayout>
可以看到嵌套雖然不深，但是已經拉的很長，不易閱讀修改，
且 哪怕是一層的嵌套優化，也是優化，積少成多，
下部分
利用TextView的drawableStart和drawableEnd屬性，來做簡化，可以直接去掉左右兩邊的ImageView，
至于分割線，利用LinearLayout的divider和showDividers屬性，寫個shape，來做簡化，去掉item之間做橫線的View，
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/dp_15"
android:layout_marginVertical="@dimen/dp_20"
android:background="@drawable/shape_bg_white"
android:divider="@drawable/shape_divider_my"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:id="@+id/tv_delete_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="@dimen/dp_16"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:includeFontPadding="false"
android:padding="@dimen/dp_20"
android:text="洗掉個人資訊"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14"
app:drawableEndCompat="@mipmap/ic_arrow_right"
app:drawableStartCompat="@mipmap/ic_agreement" />
<TextView
android:id="@+id/tv_logout_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="@dimen/dp_16"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:includeFontPadding="false"
android:padding="@dimen/dp_20"
android:text="注銷賬戶"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14"
app:drawableEndCompat="@mipmap/ic_arrow_right"
app:drawableStartCompat="@mipmap/ic_agreement" />
<TextView
android:id="@+id/tv_about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="@dimen/dp_16"
android:foreground="?android:attr/selectableItemBackground"
android:gravity="center_vertical"
android:includeFontPadding="false"
android:padding="@dimen/dp_20"
android:text="關于"
android:textColor="@color/color_505258"
android:textSize="@dimen/sp_14"
app:drawableEndCompat="@mipmap/ic_arrow_right"
app:drawableStartCompat="@mipmap/ic_agreement" />
</LinearLayout>
shape：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/dp_50" >
<shape android:shape="rectangle">
<solid android:color="@color/color_F6F6F6" />
<size android:height="1dp" />
</shape>
</item>
</layer-list>
可以看到，層級減少了，行數也減少了，看起來清爽多了，
style簡化
盡管如此，我們還是有可以簡化的空間，
TextView有一些共同屬性，可以抽取做一個style，
<style name="MyTextView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:drawablePadding">@dimen/dp_16</item>
<item name="android:foreground">?android:attr/selectableItemBackground</item>
<item name="android:gravity">center_vertical</item>
<item name="android:includeFontPadding">false</item>
<item name="android:padding">@dimen/dp_20</item>
<item name="android:textColor">@color/color_505258</item>
<item name="android:textSize">@dimen/sp_14</item>
<item name="drawableEndCompat">@mipmap/ic_arrow_right</item>
</style>
再看簡化后的代碼
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/dp_15"
android:layout_marginVertical="@dimen/dp_20"
android:background="@drawable/shape_bg_white"
android:divider="@drawable/shape_divider_my"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:id="@+id/tv_delete_user"
style="@style/MyTextView"
android:text="洗掉個人資訊"
app:drawableStartCompat="@mipmap/ic_agreement" />
<TextView
android:id="@+id/tv_logout_user"
style="@style/MyTextView"
android:text="注銷賬戶"
app:drawableStartCompat="@mipmap/ic_agreement" />
<TextView
android:id="@+id/tv_about"
style="@style/MyTextView"
android:text="關于"
app:drawableStartCompat="@mipmap/ic_agreement" />
</LinearLayout>
更加精簡了，只有簡化前的一半，共同屬性封裝，只需要關注業務引數，
核心屬性
LinearLayout
- divider，分割線
- showDividers，分割線的顯示方式
- layout_marginVertical，代替原來的layout_marginTop、layout_marginBottom
- layout_marginHorizontal，代替原來的layout_marginStart、layout_marginEnd
題外話，LinearLayout的android:animateLayoutChanges=“true”，可以在其子view添加移除的時候添加簡單的影片，
TextView
- drawableEndCompat，即原來的drawableEnd，設定右邊的drawable，其他方向同理
- drawablePadding，drawable與文字之前的內邊距
- includeFontPadding，TextView默認top是有6dp的padding的，false可去掉，小細節
- foreground，添加這個屬性會有水波紋的點擊效果，省了寫selector
ok，到此結束，無聊的知識又增加了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/238579.html
標籤：其他