针对drawableStart（Top、End、Bottom）边距的设置-Android布局技巧

作为Android程序猿，在开发布局的过程中，我们的宗旨是能用一个View完成的效果，绝不会用两个View或者嵌套View来完成。至于它的好处，就不言而喻了吧。不懂的自行到网上看，或者大牛请直接跳过。今天就让我们针对下图中的布局点来讲述drawableStart的边距使用。

当我们看到图中第一个感觉可能是要通过三个View来实现这个效果，代码如下：

   <LinearLayout
            android:id="@+id/ll_check_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/personal_center_check_in_bg"
            android:gravity="center_vertical"
            android:minHeight="@dimen/dimen_30dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="@+id/iv_personal_avatar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/iv_personal_avatar">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dimen_10dp"
                android:src="@drawable/gold_icon"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dimen_2dp"
                android:layout_marginEnd="@dimen/dimen_14dp"
                android:gravity="center_vertical"
                android:text="@string/check_in"
                android:textColor="@android:color/white"
                android:textSize="@dimen/dimen_13sp" />
   </LinearLayout>

但是大家有没有发现实现这个效果通过了两个层级，三个View实现的。这对于简单的布局层级可能影响不大，但是对于超复杂的页面，页面的布局有上百个View时，比如Launcher或者淘宝系的应用，就会带来多么可怕的灾难。

那我们可不可用通过android:drawableStart属性来实现上面的效果那，这样就可以通过一个View实现了。答案是可以的，不过会有一个坑，而解决这个坑就是我们今天要讲的主题。

对于这个坑，可能大家已经想到了，就是通过android:drawableStart设置的图片不能设置左边距。什么意思那，就是说Android提供了在TextView中文字和图片的边距，通过android:drawablePadding去设置。但是如果android:drawableStart设置图片后，想让图片和左边有一定的边距，从而实现上面的效果，这个在常规情况下是实现不了。
常规操作是如下效果：

代码如下：

    <TextView
            android:id="@+id/tv_check_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/gold_icon"
            android:drawablePadding="@dimen/dimen_2dp"
            android:paddingEnd="@dimen/dimen_14dp"
            android:background="@drawable/personal_center_check_in_bg"
            android:gravity="center_vertical"
            android:minHeight="@dimen/dimen_30dp"
            android:text="@string/check_in"
            android:textColor="@android:color/white"
            android:textSize="@dimen/dimen_13sp"
            app:layout_constraintBottom_toBottomOf="@+id/iv_personal_avatar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/iv_personal_avatar" />

对于解决这个问题，方案有二

第一个方案：

可以通过layer-list来解决，新建一个类型为layer-list的drawable，然后设置一个android:left的大小（是指左边距的大小），并将这个drawable设置到android:drawableStart即可达到上图的效果。

drawable的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/gold_icon"
        android:left="@dimen/dimen_10dp">
    </item>
</layer-list>

对于这种方案，其实我是不太建议使用的，因为它虽然能实现上图的效果，但是它多一层绘制层级，所以比较推荐下面的一种方案。

第二个方案：

对于这种方案，需要通过代码中textView.setCompoundDrawablesRelative进行动态设置，

• 先获取需要展示Drawable

Drawable drawable = getResources().getDrawable(R.drawable.gold_icon);

• 设置drawable的左边距，其实本质上就是设置左边距的绘制区域

int padding = (int) getResources().getDimension(R.dimen.dimen_10dp);
//设置Drawble的绘制区域，这一步是重点
drawable.setBounds(padding, 0, drawable.getIntrinsicWidth() + padding, drawable.getIntrinsicHeight());

*进行左边图片的展示

 textView.setCompoundDrawablesRelative(drawable,null,null,null);

• 设置android:drawablePadding和android:minWidth，这一步也是重点

   //这个值设置的很重要，它必须包含边距和图片宽度的值，不然会导致显式异常
   android:minWidth="75dp"
   //这个值，必须包含边距的值，这个边距是指：图片距离左边的边距+图片距离文字的边距
   android:drawablePadding="@dimen/dimen_2dp"

至此上面的坑解决了，至于大家采用那种方案，可根据个人的需求选择。不过个人建议还是第二种方案比较节省绘制层级。