正确的实现自定义组件

在开发一款App中，我们一定要注意对组件的复用，小到一个Button，大到一个RecyclerView中的Section都是可以复用的。
总之一句话，能复用的尽量复用，这样才能在哪天设计师突然要改变整个App的设计风格的时候不至于措手不及。

下面介绍一种最最常见实现自定义组件的方式，也是我个人使用的最多的。

1 先看布局

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/button_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dp"
        android:clickable="false"
        android:duplicateParentState="true"
        android:gravity="center"
        android:lineSpacingExtra="4sp"
        android:textSize="@dimen/text_size_12" />

</merge>

一定要用Merge，为什么？减少Layout嵌套，如果有Code Review的公司建议把这一项检查加进去。
举个例子，假如Merge改成FrameLayout，那么布局效果就会变成这样

<FrameLayout>
   <FrameLayout>
      <TextView />
   </FrameLayout>
</FrameLayout>

如果使用Merge，那么布局效果就是这样

<FrameLayout>
   <TextView />
</FrameLayout>

2 不要用Include，为啥？Include不能传自定义参数。
所以应该怎么做？看代码

public class IWBaseButton extends LinearLayout {

    private ImageView buttonLeftImage;
    private TextView buttonText;
    private Context mContext;
    private int textResId;
    private int leftImageResId;
    private @ColorInt
    int textColor;
    private @ColorInt
    int buttonStrokeColor;
    private @ColorInt
    int buttonSolidColor;

    public IWBaseButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        initAttrs(attrs);
        initView();
    }

    private void initAttrs(AttributeSet attrs) {
        TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.BaseButton);
        this.textResId = a.getResourceId(R.styleable.BaseButton_button_text, 0);
        this.leftImageResId = a.getResourceId(R.styleable.BaseButton_button_left_image, 0);
        // default text color is white, stroke color is white, solid color is transparent
        this.textColor = a.getColor(R.styleable.BaseButton_button_text_color, getResources().getColor(R.color.white));
        this.buttonStrokeColor = a.getColor(R.styleable.BaseButton_button_stroke_color, getResources().getColor(R.color.white));
        this.buttonSolidColor = a.getColor(R.styleable.BaseButton_button_solid_color, getResources().getColor(R.color.transparent));
        a.recycle();
    }

    private void initView() {
        inflate(mContext, R.layout.layout_base_button, this);
        buttonLeftImage = findViewById(R.id.button_left_iv);
        buttonText = findViewById(R.id.button_tv);
        if (textResId != 0) {
            setText(mContext.getString(textResId));
        }
        if (leftImageResId != 0) {
            setLeftImage(leftImageResId);
        } else {
            buttonLeftImage.setVisibility(GONE);
        }
        setTextColor(textColor);
        setGravity(Gravity.CENTER);
    }
}

这段代码是我用来复用项目中Button的，效果如下

5634671C-8879-440C-8489-7B2462369B7A.png

因为继承了LinearLayout，所以最终的布局层级如下

<LinearLayout>
   <ImageView />
   <TextView />
</LinearLayout>

三 注意事项

 inflate(mContext, R.layout.layout_base_button, this);

解析布局，this表示把这个布局加到LinearLayout中去，不需要再显示的调用addView方法了。

自定义属性在attrs.xml文件中添加即可

    <declare-styleable name="BaseButton">
        <attr name="button_text" format="reference" />
        <attr name="button_text_color" format="color|integer" />
        <attr name="button_stroke_color" format="color|integer" />
        <attr name="button_solid_color" format="color|integer" />
        <attr name="button_left_image" format="reference" />
    </declare-styleable>

如果还需要添加style，可以参考
如何更好的通过Inflate layout的方式来实现自定义view

参考资料：
The beauty of Custom Views in Android and How to do it!
Protip. Inflating layout for your custom view
如何更好的通过Inflate layout的方式来实现自定义view