不用ImageView实现图文图标

最近在学做一个新闻客户端，发现它的带图标按钮都是直接用ImageView+TextView的布局。
大概是这样

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="@drawable/ic_account_circle_white_24dp" />

            <TextView
                android:id="@+id/tv_login"
                android:layout_width="wrap_content"
                android:layout_height="36dp"
                android:layout_marginLeft="10dp"
                android:gravity="center_vertical"
                android:text="请登录"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
</LinearLayout>

如果只是一个这样的按钮的话，那也无所谓，问题是需求中有很多个这样的按钮，这样一长串的布局真的很难维护，而且一点都不优雅。那么问题来了，怎么简化代码。

两个方案：

• 自定义控件

将这段布局封装在自定义控件中，不过对于这种简单的布局，根本没必要，况且有了下面的解决方案

• 使用TextView自带的drawable属性

豁然开朗了，好像问题一下子就解决了，可是调试布局不是一句话就那么简单的

先简单粗暴的使用android:drawableLeft属性设置图标

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#bbb"
        android:drawableLeft="@mipmap/home"
        android:text="首页"
        android:textColor="@color/holo_blue_dark"
        android:textSize="22sp"/>
</RelativeLayout>

发现效果变成了这样

1.png

字体与图标不能再垂直方向上对齐
不怕，设置一下android:gravity="center_vertical",再看

2.png

注意：android:gravity属性不会影响图片，也就是说当设置了android:gravity="bottom"属性之后，
只有文本会处于底部

此时的效果已经不错了，但是我还想要让图片与文字稍稍有点间距
试试用padding

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#bbb"
        android:drawableLeft="@mipmap/home"
        android:text="首页"
        android:paddingLeft="28dp"
        android:gravity="center_vertical"
        android:textColor="@color/holo_blue_dark"
        android:textSize="22sp" />
</RelativeLayout>

3.png

发现图片也移动了，但是图片与文字的间距并没有改变，幸好，TextView 有一个 android:drawablePadding属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#bbb"
        android:drawableLeft="@mipmap/home"
        android:text="首页"
        android:drawablePadding="28dp"
        android:gravity="center_vertical"
        android:textColor="@color/holo_blue_dark"
        android:textSize="22sp" />
</RelativeLayout>

4.png

这时候的图文按钮已经能达到想要的效果了，代码也简洁了很多

注意：android:drawablePadding属性所设置的间距是图标与文本的间距，而不是图标的内边距