Android学习之自定义控件之图片带文字的View

实际项目开发中肯定会遇到Android提供的原生的控件不能满足我们实际使用需求的情况，这时候就需要自定义控件啦，自定义控件有很多种方式，有的只需要重写某个控件，有的则需要完全自己写个控件，前者比较简单，后者比较复杂，当然我对Android的理解也不是很深入，这里就讲下自己对后者的使用。今天就讲下自定义一个图片带文字的控件的实现（怎么感觉跟TextView的android:drawableXXX有点类似，算了不管了，过程才是重点）

流程：

1.res/values之下新建attrs.xml，里面自定义属性，这里自定义了图片，文字，字号和字色，记住根节点是<declare-styleable>，这个是用来自定义属性的

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ImageWithTextView">
        <attr name="view_image" format="reference" />
        <attr name="view_text" format="string" />
        <attr name="view_text_size" format="dimension" />
        <attr name="view_text_color" format="color" />
    </declare-styleable>

</resources>

2.画这个控件的布局，这里控件上面是图片，下面是文字，很简单的一个控件布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearlayout_view_image_with_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview_view_image_with_text"
        android:layout_width="77dp"
        android:layout_height="84dp"
        android:scaleType="centerInside" />

    <TextView
        android:id="@+id/textview_view_image_with_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

3.重点来了，当然是在代码中自定义控件了，先继承LinearLayout，这里实现1个参数和2个参数的构造方法，其中第二个构造方法很重要，TypedArray是个属性的容器，obtainStyledAttributes()可以获取TypedArray，里面传入自定义属性的name，再通过TypedArray获取各个属性，记得字号其实就是这里的默认值设定的，不能在布局中设定，稍后会讲。最后一定要通过TypedArray.recycle()回收TypedArray，为什么要回收TypedArray呢？百度了之后发现自定义View时使用TypedArray，会随着 Activity的每次创建而创建，因此需要系统频繁的创建TypedArray，对内存和性能是一个不小的开销，如果不回收，每次都让GC来回收，很可能就会造成OutOfMemory即内存溢出。这里大家注意到还有个接口的回调，因为自定义View肯定是有某些需求要实现的，所以这里的接口目的就是这个，当然我的目的就是弹出Toast ...-  -|||

/**
 * 自定义图片带文字的View
 *
 * @author yuzhentao
 */
public class ImageWithTextView extends LinearLayout {

    private Context context;
    private Drawable viewImage;
    private String viewText;
    private int viewTextColor;
    private float viewTextSize;
    private OnImageWithTextViewClickListener onImageWithTextViewClickListener;

    public ImageWithTextView(Context context) {
        this(context, null);
    }

    public ImageWithTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageWithTextView);
        viewImage = typedArray.getDrawable(R.styleable.ImageWithTextView_view_image);
        viewText = typedArray.getString(R.styleable.ImageWithTextView_view_text);
        viewTextColor = typedArray.getColor(R.styleable.ImageWithTextView_view_text_color, 0);
        viewTextSize = typedArray.getDimension(R.styleable.ImageWithTextView_view_text_size, 16);
        initView();
        typedArray.recycle();
    }

    private void initView() {
        View view = LayoutInflater.from(context).inflate(R.layout.view_image_with_text, this, true);
        LinearLayout lv = (LinearLayout) view.findViewById(R.id.linearlayout_view_image_with_text);
        ImageView iv = (ImageView) view.findViewById(R.id.imageview_view_image_with_text);
        TextView tv = (TextView) view.findViewById(R.id.textview_view_image_with_text);
        iv.setImageDrawable(viewImage);
        tv.setText(viewText);
        tv.setTextColor(viewTextColor);
        tv.setTextSize(viewTextSize);
        lv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                onImageWithTextViewClickListener.onViewClick(ImageWithTextView.this);
            }
        });
    }

    /**
     * 设置OnImageWithTextViewClickListener回调
     *
     * @param onImageWithTextViewClickListener:OnImageWithTextViewClickListener
     */
    public void setOnImageWithTextViewClickListener(OnImageWithTextViewClickListener onImageWithTextViewClickListener) {
        this.onImageWithTextViewClickListener = onImageWithTextViewClickListener;
    }

}

4.看下接口，好吧，就一个方法

/**
 * 自定义图片带文字的View单击监听接口
 *
 * @author yuzhentao
 */
public interface OnImageWithTextViewClickListener {

    /**
     * 单击View
     */
    void onViewClick(View v);

}

5.然后是主布局中使用我们自定义的控件，记得加上自定义的命名空间，这里用app来作为前缀，大家随意

xmlns:app="http://schemas.android.com/apk/res-auto"

不然布局中肯定找不到自定义的属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <yuzhentao.imagewithtextviewdemo.ImageWithTextView
        android:id="@+id/imagewithtextview_activity_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_light"
        app:view_image="@mipmap/ic_launcher"
        app:view_text="@string/app_name"
        app:view_text_color="@android:color/white" />

</LinearLayout>

还有一点就是不要在这里设置view_text_size，不然显示出来的字号是不对的，会根据不同的分辨率而改变

详见：http://blog.csdn.net/yangzl2008/article/details/7879019?utm_source=tuicool&utm_medium=referral

6.最后当然是在主界面中使用，顺便实现一下接口，实现下方法

/**
 * 主界面
 *
 * @author yuzhentao
 */
public class MainActivity extends Activity {

    private Context context;

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

    private void initView() {
        context = this;
        ImageWithTextView imageWithTextView = (ImageWithTextView) findViewById(R.id.imagewithtextview_activity_main);
        imageWithTextView.setOnImageWithTextViewClickListener(new OnImageWithTextViewClickListener() {
            @Override
            public void onViewClick(View v) {
                Toast.makeText(context, "点击了自定义控件", Toast.LENGTH_SHORT).show();
            }
        });
    }

}

效果图，丑是丑了点，希望对大家有点帮助：

Demo地址：http://download.csdn.net/detail/qq_23940659/9467057