前言

相信大家在写项目的时候，都会碰到很多地方都会用到相同布局的情况吧，比如这样。

左边一个图片，中间文字，右边一个图标

有些童鞋可能就说，这有什么的，我有CV大法，敲代码就是一把梭，你说的不存在的。。。，好好好，你会CV你牛逼，但是这样代码的复用性和扩展性是不是就很差，比如说今天你们产品跑过来跟你说，我觉得这个文字黑色不好看，你把它改成红色的吧，那么用CV的童鞋是不是就要把每一个地方的颜色都修改一下。

这个时候又有童鞋说了，我可以把这个xml单独抽取出来啊，需要用到的地方我可以include一下，修改的时候也只需要修改哪个单独的xml就好了。确实，抽取出来可以解决修改文字颜色的需求，但是图标怎么改，要去代码改，文字怎么变，要去代码变，而且相同的逻辑还要重复写，比方说点击条目，弹出一个吐司（需求有点奇怪，不过这不是重点），那么你是不是要在每一个用到这个控件的地方都去加一个Toast，就很麻烦，万一这时候你们亲爱的产品又来了，说这个吐司不要了，你是不是又要去每一个用到了该xml的地方删代码，这就很皮。

上面叨叨叨叨说了那么多，给大家带来一种比较好的解决办法，那就是自定义组合控件。

控件组合

我们可以使用几个基本控件组合在一起，形成一个新的控件，比如说上面哪个需求，其实就是一个ImageView+TextView+ImageView(TextView)就可以组合起来，通过这种方式创建的控件我们还可以给他指定一些可配置的属性，增强它的可操控性，下面以上面的图片为例给大家写一下组合控件。

1. 第一步，新建一个类继承ViewGroup的子类，例如LinearLayout，RelativeLayout

//我这里就继承RelativeLayout了
public class CommonItem extends RelativeLayout {
    public CommonItem(Context context) {
        //然后重写3个构造方法,并且1个参数调用2个参数，2个参数调用3个参数
        this(context, null);
    }

    public CommonItem(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CommonItem(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //这里自定义一个初始化方法
        init(context);
    }

    private void init(Context context) {

    }
}

2. 第二步，自定义属性，去values文件夹下面新建一个attrs.xml，然后在里面写上你自己需要的属性

    <!--这里为了演示方便就只写了三个 -->
    <declare-styleable name="CommonItem">
        <attr name="srcLeft" format="reference"/>
        <attr name="myText" format="string"/>
        <attr name="myTextSize" format="dimension"/>
    </declare-styleable>

3. 第三步，在代码中找到自定义属性并给控件赋值

 private void init(Context context, AttributeSet attrs) {
        //拿到我们的布局
        View.inflate(context, R.layout.common_item, this);
       //找到各个控件
        mIvLeft = (ImageView) findViewById(R.id.iv_left);
        mTv = (TextView) findViewById(R.id.textview);

        //拿到自定义属性，这里为了演示方便就只提供了3个
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CommonItem);
            Drawable drawable = typedArray.getDrawable(R.styleable.CommonItem_srcLeft);
            String text = typedArray.getString(R.styleable.CommonItem_myText);
            float textSize = typedArray.getDimension(R.styleable.CommonItem_myTextSize, 14f);
            //给我们的控件设置属性
            setImageDrawable(drawable);
            setText(text);
            setTextSize(textSize);
            //这里记得要回收
            typedArray.recycle();
        }
    }

4. 第四步，在xml中使用该控件

在最外层的布局标签里面加上

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

然后就可以用我们自己的属性了，任意给图片，任意给文字，是不是很方便

  <com.lxt.demo.widget.CommonItem
        android:id="@+id/common_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:myText="haha"
        app:myTextSize="10sp"
        app:srcLeft="@drawable/contact">
    </com.lxt.demo.widget.CommonItem>

上个效果图来说明一下，大家可以很明显的看到效果，而且用起来很方便

图片文字都改变了

5. 第五步，处理通用的逻辑

之前也说了，比如这个控件点击都要谈吐司，那么为了复用性，我们就在这个控件里面利用接口回调来实现，不多哔哔，上代码。

 //接口回调对外提供点击事件
    public interface OnCommonItemClickListener {
        void onCommonItemClick();
    }

    private OnCommonItemClickListener mOnCommonItemClickListener;

    //对外暴漏一个方法实现点击事件
    public void setOnCommonItemClickListener(OnCommonItemClickListener onCommonItemClickListener) {
        mOnCommonItemClickListener = onCommonItemClickListener;
        if (mOnCommonItemClickListener != null) {
            //这里用log代替toast了
            Log.d("CommonItem", "点击了哦");
            onCommonItemClickListener.onCommonItemClick();
        }
    }

效果
08-11 09:35:00.721 8472-8472/com.lxt.demo D/CommonItem: 点击了哦

在代码中设置该点击事件

 ((CommonItem)findViewById(R.id.common_item)).setOnCommonItemClickListener(new CommonItem.OnCommonItemClickListener() {
            @Override
            public void onCommonItemClick() {
                //do something 
            }
        });

到此为止我们的自定义组合控件就算是写完了