上一章节我们学习了如何给 TextView 加上边框，本节我们就来学习如何给 TextView 加上图片，就像微信底部的 tabbar 一样

带图片 (android:drawableXxx) 的 TextView

像微信底部的 Tabbar ，一般情况下可能都会这么实现： 一个 ImageView 用于显示图片 + 一个 TextView 用于显示文字，然后把他们丢到一个 LinearLayout 中，接着依次创建四个这样的小布局，再另外放到一个大的 LinearLayout 中

其实，还有更快的办法，就是使用 android:drawableXxx 属性，直接设置四个 TextView 就可以完成我们的需求

android:drawableXXX 属性

android:drawableXxx 可以为 TextView 设置四个方向的图片或边距

范例

1. 创建一个 空的 Android 项目 cn.twle.android.TextView

2. 修改 res/values/strings.xml 为添加几个字符串

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
       <string name="app_name">TextView</string>
       <string name="hello">简单教程</string>
   </resources>
   

3. 下载 /static/i/android/arrow.zip 并将里面的图片拖到 res/drawable 目录下

4. 修改 activity_main.xml 为以下内容，使用 android:drawableXXX 属性设置 TextView 四个方向上的图片

   <?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">
   
       <TextView
           android:id="@+id/hello" 
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_centerInParent="true"  
           android:drawableTop="@drawable/top"  
           android:drawableLeft="@drawable/left"  
           android:drawableRight="@drawable/right"  
           android:drawableBottom="@drawable/bottom"  
           android:drawablePadding="10dp"  
           android:text="@string/hello" />
   
   </RelativeLayout>
   

运行结果如下

图片有点模糊，如果我们想调整图片的大小，翻来翻去没找到设置图片大小的属性，也就是说在 XML 里没法设置图片的大小，看来，只能通过 Java 代码来实现了

package cn.twle.android.textview;

import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView hello = (TextView) findViewById(R.id.hello);

        //获取 TextView 上的四张图片资源
        Drawable[] drawable = hello.getCompoundDrawables();

        //数字下标 0-3 分别代表 左上右下，设置上面的图片大小
        drawable[1].setBounds(100,0,200,200);

        // 将四张图片设置回去，参数依次是 左上右下
        hello.setCompoundDrawables(drawable[0],drawable[1],drawable[2],drawable[3]);

    }
}

运行结果如下

哈，有点难看，不过目的达到了

Java 代码很简单，注释也说的很清楚，重点解释亮点

1. drawable[1].setBounds(100, 0, 200, 200);

   该方法用于设置某个资源左上右下坐标点,比如这里设置了代表的是:

   1. 长是:从离文字最左边开始 100dp 处到 200dp 处
   2. 宽是:从文字上方 0dp 处往上延伸 200dp

2. hello.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);

   为 TextView 设置 drawable 数组，没有图片可以用 null 代替

   另外，我们可以使用这个方法在 Java 代码直接为 TextView 设置图片

参考文档

1. TextView API