Effect:

This kind of layout should be very common and written a lot.

Today, a brief discussion of the renderings of the two types of layout writing.

To compare

And as you can see, the contrast is pretty clear, and we’re down to about a quarter of what we started with.

On the part of the

So let’s start with the normal item, so the horizontal LinearLayout is nested with three subviews, which are

• ImageView on the left,
• The TextView in the middle,
• And the ImageView on the right.

Then add a 1dp View between each horizontal LinearLayout as a horizontal line.

    <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="Delete personal information"
                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="Cancel account"
                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="About"
                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>
Copy the code

The background of the outermost LinearLayout:

<? xml version="1.0" encoding="utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="@color/white" />
</shape>
Copy the code

You can see that the nesting, while not deep, has been stretched long and is not easy to read.

And even a layer of nesting optimization is optimization, many a little makes a lot.

Under section

Using the drawableStart and drawableEnd properties of TextView, to simplify things, you can get rid of the left and right ImageView.

As for dividing lines, use the Divider and showDividers properties of the LinearLayout and write a shape to simplify this and remove the views with horizontal lines between the items.

    <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="Delete personal information"
            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="Cancel account"
            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="About"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />

    </LinearLayout>
Copy the code

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>
Copy the code

As you can see, there are fewer layers, fewer rows, and it looks a lot cleaner.

Style simplified

Still, there is room for simplification.

TextView has some properties in common that you can extract to make a 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>
Copy the code

Now look at the simplified code

    <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="Delete personal information"
            app:drawableStartCompat="@mipmap/ic_agreement" />

        <TextView
            android:id="@+id/tv_logout_user"
            style="@style/MyTextView"
            android:text="Cancel account"
            app:drawableStartCompat="@mipmap/ic_agreement" />

        <TextView
            android:id="@+id/tv_about"
            style="@style/MyTextView"
            android:text="About"
            app:drawableStartCompat="@mipmap/ic_agreement" />

    </LinearLayout>
Copy the code

Much more streamlined, only half as simplified, common attribute encapsulation, only need to focus on business parameters.

The core attributes

LinearLayout

• The divider, the divider
• ShowDividers, the way dividers are displayed
• Download vertical: layout_marginTop, layout_marginBottom
• Layout_marginEnd, instead of layout_marginStart, layout_marginEnd

Digression, LinearLayout android: animateLayoutChanges = “true”, you can add a removed in its view of adding a simple animation.

TextView

• DrawableEndCompat, the original drawableEnd, sets the drawable on the right, and the same goes for the other directions
• DrawablePadding, the margin before the drawable text
• IncludeFontPadding, TextView default top to have 6DP padding, false to remove small details
• Foreground, added this property to give the click effect of water ripple, avoiding writing selector

Ok, end of story, boring knowledge added.