在開發一款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
