写一个扩展性强的自定义控件
2017-06-12 本文已影响362人
正规程序员
在一些需求中，多个界面里相似的布局，这种场景下就可以运用自定义控件减少工作量。
采用<include/>、<merge/>标签也是一种复用的手段。但是，在降低冗余代码并避免过度绘制方面，还是自定义控件适用性更好。
举个例子，标题栏是最常见的布局，如：
其他也都差不多，或者右边是图标或者没有东西。
懒人守则 1：能复用的，一定写成扩展性强的组件。并且要达到“懒”的目的。
首先写布局xml界面，并以<merge/>标签作为根节点
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/common_header_id"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/colorLightGray"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/left_img"
android:layout_width="30dp"
android:layout_height="match_parent"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:scaleType="fitCenter"
android:src="@mipmap/icon_user_friend"/>
<TextView
android:id="@+id/left_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:singleLine="true"
android:text="@string/middle_title"
android:textColor="@color/colorTextColor"
android:textSize="@dimen/dp_13"/>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:id="@+id/right_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical|right"
android:singleLine="true"
android:text="@string/right_title"
android:textColor="@color/colorTextColor"
android:textSize="@dimen/dp_13"/>
<ImageView
android:id="@+id/right_img"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:scaleType="fitCenter"
android:src="@mipmap/icon_arrow_right"/>
</merge>
注意：这里为了被复用的根布局便于查看，在不影响扩展布局赋值的情况下，根布局要达到只需要替换成merge就可以的程度。
所以，将</merge>标签换成之前的LinearLayout之后的界面效果是：
这里还不能做到懒人守则1的标准，因为很多界面或者不需要左边的图标，或者不需要右边的文字等等。所以，我们要做下面的事情~
写一个自定义控件，采用继承viewgroup并组合控件的方式
/**
* Created by jinzifu on 2017/6/12.
*/
public class CommonView extends LinearLayout {
@BindView(R.id.left_img)
ImageView leftImg;
@BindView(R.id.left_title)
TextView leftTitle;
@BindView(R.id.right_title)
TextView rightTitle;
@BindView(R.id.right_img)
ImageView rightImg;
public CommonView(Context context) {
super(context);
}
public CommonView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.common_head_layout, this, true);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CommonHeaderBar);
if (typedArray != null) {
//获取自定义属性值并赋值
setBackgroundColor(typedArray.getColor(R.styleable
.CommonHeaderBar_layout_background, getResources().getColor(R.color
.colorWhite)));
leftImg.setImageResource(typedArray.getResourceId(R.styleable
.CommonHeaderBar_left_img_drawable, R.mipmap.icon_user_friend));
leftTitle.setText(typedArray.getResourceId(R.styleable
.CommonHeaderBar_left_title_text, R.string.middle_title));
leftTitle.setTextColor(typedArray.getColor(R.styleable
.CommonHeaderBar_left_title_color, getResources().getColor(R
.color.colorTextColor)));
typedArray.recycle();
}
}
}
这里继承LinearLayout布局，并在其构造方法中通过LayoutInflater.from(context).inflate的方式引入刚才的复用根布局，这是典型的组合布局实现方式。小不同的是，根布局的根标签是<merge/>，也就是说减少了不必要的层次嵌套，直接套用类LinearLayout的布局作为容器。
通过context.obtainStyledAttributes方法获取自定义的属性值并根据扩展需要进行赋值。
配置自定义属性，一切为了扩展和复用
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--标题栏通用属性-->
<!--right_img_visible 为integer类型时默认为0，0表示visible，1表示invisible，2表示gone-->
<!--right_img_visible 为boolean类型时默认为true，true表示visible，false表示invisible。-->
<attr name="layout_background" format="color|integer"/>
<attr name="right_text_visible" format="boolean|integer"/>
<attr name="right_img_visible" format="boolean|integer"/>
<attr name="left_text_visible" format="boolean|integer"/>
<attr name="left_img_visible" format="boolean|integer"/>
<attr name="left_title_text" format="string"/>
<attr name="right_title_text" format="string"/>
<attr name="middle_title_text" format="string"/>
<attr name="middle_title_color" format="color"/>
<attr name="left_title_color" format="color"/>
<attr name="right_title_color" format="color"/>
<attr name="left_img_drawable" format="reference|integer"/>
<attr name="right_img_drawable" format="reference|integer"/>
<declare-styleable name="CommonTitleBar">
<attr name="layout_background"/>
<attr name="middle_title_text"/>
<attr name="middle_title_color"/>
<attr name="right_text_visible"/>
<attr name="right_title_text"/>
<attr name="right_title_color"/>
<attr name="left_img_drawable"/>
</declare-styleable>
<declare-styleable name="CommonHeaderBar">
<attr name="layout_background"/>
<attr name="left_img_visible"/>
<attr name="left_text_visible"/>
<attr name="right_text_visible"/>
<attr name="right_img_visible"/>
<attr name="left_title_text"/>
<attr name="right_title_text"/>
<attr name="left_title_color"/>
<attr name="right_title_color"/>
<attr name="left_img_drawable"/>
<attr name="right_img_drawable"/>
</declare-styleable>
</resources>
目录是在values下的attrs.xml（没有的话自己可以新建一个）。
这里是对不同自定义控件的属性统一配置，相同的属性都放在公用区，根据需要自己引用部分属性。
刚才我们继承LinearLayout实现自定义控件，若配置一个基类LinearLayout被同类型的自定义控件继承，更方便做一些统一的事情。
实现自定义控件继承基类，做一些统一的、基础性的事情
/**
* Created by jinzifu on 2017/6/5.
*/
public abstract class BaseLinearLayout extends LinearLayout {
private Context context;
protected OnChildViewClickListener onChildViewClickListener;
public BaseLinearLayout(Context context) {
super(context);
init(context,null);
}
public BaseLinearLayout(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
protected void init(Context context, AttributeSet attrs) {
if (layoutId() != 0) {
this.context = context;
LayoutInflater.from(context).inflate(layoutId(), this, true);
ButterKnife.bind(this);
initView();
initListener();
initData();
}
}
public void setOnChildViewClickListener(OnChildViewClickListener onChildViewClickListener) {
this.onChildViewClickListener = onChildViewClickListener;
}
/**
* 实现此方法在业务类中处理点击事件
* @param childView
* @param action
* @param obj
*/
protected void onChildViewClick(View childView, String action, Object obj) {
if (onChildViewClickListener != null) {
onChildViewClickListener.onChildViewClick(childView, action, obj);
}
}
protected abstract int layoutId();
protected void initView() {
}
protected void initData() {
}
protected void initListener() {
}
protected void toast(String string) {
Toast.makeText(context, string,Toast.LENGTH_SHORT).show();
}
}
这里很多地方见名知义， 不必详谈。单说说onChildViewClickListener这个接口吧。
因为有些场景中，点击事情或者交互操作，需要相应的业务逻辑处理，在view层做业务逻辑处理，不合规矩，所以要引入事件的“冒泡机制”。
自定义控件里对事件的操作如下：
@OnClick({R.id.left_img, R.id.right_title})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.left_img:
onChildViewClick(view, "left_img", null);
break;
case R.id.right_title:
toast(getResources().getString(R.string.right_title));
break;
}
}
}
业务层对该事件的捕获如下：
titleLayout.setOnChildViewClickListener(new OnChildViewClickListener() {
@Override
public void onChildViewClick(View childView, String action, Object obj) {
switch (action) {
case "left_img":
getActivity().finish();
break;
default:
break;
}
}
});
补充下接口定义：
/**
* Created by jinzifu on 2017/6/10.
*/
public interface OnChildViewClickListener {
/**
* view 内子控件点击事件监听回调
*
* @param childView 子控件
* @param action 活动类型——一般写为view的ID
* @param obj 额外数据
*/
void onChildViewClick(View childView, String action, Object obj);
}
继承自定义控件基类，并根据需求配置自定义属性
/**
* Created by jinzifu on 2017/6/12.
*/
public class CommonHeaderBar extends BaseLinearLayout {
@BindView(R.id.left_img)
ImageView leftImg;
@BindView(R.id.left_title)
TextView leftTitle;
@BindView(R.id.right_title)
TextView rightTitle;
@BindView(R.id.right_img)
ImageView rightImg;
public CommonHeaderBar(Context context) {
super(context);
}
public CommonHeaderBar(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CommonHeaderBar);
if (null != typedArray) {
setBackgroundColor(typedArray.getColor(R.styleable
.CommonHeaderBar_layout_background, getResources().getColor(R.color
.colorWhite)));
int left_img_visible = typedArray.getInteger(R.styleable
.CommonHeaderBar_left_img_visible, 0);
int left_text_visible = typedArray.getInteger(R.styleable
.CommonHeaderBar_left_text_visible, 0);
int right_text_visible = typedArray.getInteger(R.styleable
.CommonHeaderBar_right_text_visible, 0);
int right_img_visible = typedArray.getInteger(R.styleable
.CommonHeaderBar_right_img_visible, 0);
setViewStatus(left_img_visible, leftImg);
setViewStatus(left_text_visible, leftTitle);
setViewStatus(right_text_visible, rightTitle);
setViewStatus(right_img_visible, rightImg);
leftImg.setImageResource(typedArray.getResourceId(R.styleable
.CommonHeaderBar_left_img_drawable, R.mipmap.icon_user_friend));
rightImg.setImageResource(typedArray.getResourceId(R.styleable
.CommonHeaderBar_right_img_drawable, R.mipmap.icon_arrow_right));
leftTitle.setTextColor(typedArray.getColor(R.styleable
.CommonHeaderBar_left_title_color, getResources().getColor(R
.color.colorTextColor)));
leftTitle.setText(typedArray.getResourceId(R.styleable
.CommonHeaderBar_left_title_text, R.string.middle_title));
rightTitle.setTextColor(typedArray.getColor(R.styleable
.CommonHeaderBar_right_title_color, getResources().getColor(R
.color.colorTextColor)));
rightTitle.setText(typedArray.getResourceId(R.styleable
.CommonHeaderBar_right_title_text, R.string.right_title));
typedArray.recycle();
}
}
private void setViewStatus(int flag, View view) {
switch (flag) {
case 0:
view.setVisibility(VISIBLE);
break;
case 1:
view.setVisibility(INVISIBLE);
break;
case 2:
view.setVisibility(GONE);
break;
default:
view.setVisibility(VISIBLE);
break;
}
}
@Override
protected int layoutId() {
return R.layout.common_head_layout;
}
}
CustomizeViewFragment里的代码如下：
public class CustomizeViewFragment extends BaseFragment {
Unbinder unbinder;
@BindView(R.id.title_layout)
CommonTitleBar titleLayout;
@BindView(R.id.header_layout)
CommonHeaderBar headerLayout;
@BindView(R.id.header_layout2)
CommonHeaderBar headerLayout2;
@BindView(R.id.header_layout3)
CommonHeaderBar headerLayout3;
@BindView(R.id.header_layout4)
CommonHeaderBar headerLayout4;
@Override
protected int getLayoutId() {
return R.layout.fragment_common_view;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) {
View rootView = super.onCreateView(inflater, container, savedInstanceState);
unbinder = ButterKnife.bind(this, rootView);
return rootView;
}
@Override
protected void init() {
titleLayout.setOnChildViewClickListener(new OnChildViewClickListener() {
@Override
public void onChildViewClick(View childView, String action, Object obj) {
switch (action) {
case "left_img":
getActivity().finish();
break;
default:
break;
}
}
});
headerLayout.findViewById(R.id.right_title).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toast("right_title");
}
});
headerLayout2.findViewById(R.id.left_title).setOnClickListener(new View
.OnClickListener() {
@Override
public void onClick(View v) {
toast("left_title");
}
});
headerLayout4.findViewById(R.id.left_img).setOnClickListener(new View
.OnClickListener() {
@Override
public void onClick(View v) {
toast("left_img");
}
});
}
@Override
public void onDestroyView() {
super.onDestroyView();
unbinder.unbind();
}
@OnClick({R.id.header_layout, R.id.header_layout2, R.id.header_layout3, R.id.header_layout4})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.header_layout:
toast("header_layout");
break;
case R.id.header_layout2:
toast("header_layout2");
break;
case R.id.header_layout3:
toast("header_layout3");
break;
case R.id.header_layout4:
toast("header_layout4");
break;
}
}
}
CustomizeViewFragment的布局如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:king="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.jzf.myactivity.view.CommonTitleBar
android:id="@+id/title_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/common_title_height"
king:layout_background="@color/colorPrimary"
king:middle_title_color="@color/colorWhite"
king:middle_title_text="@string/middle_title"
king:right_text_visible="true"
king:right_title_color="@color/colorWhite"
king:right_title_text="@string/right_title">
</com.jzf.myactivity.view.CommonTitleBar>
<com.jzf.myactivity.view.CommonHeaderBar
android:id="@+id/header_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/common_header_height"
android:layout_marginBottom="1dp"
king:layout_background="@color/colorLightGray">
</com.jzf.myactivity.view.CommonHeaderBar>
<com.jzf.myactivity.view.CommonHeaderBar
android:id="@+id/header_layout2"
android:layout_width="match_parent"
android:layout_height="@dimen/common_header_height"
android:layout_marginBottom="1dp"
android:paddingLeft="10dp"
king:layout_background="@color/colorLightGray"
king:left_img_visible="2"
king:right_text_visible="2">
</com.jzf.myactivity.view.CommonHeaderBar>
<com.jzf.myactivity.view.CommonHeaderBar
android:id="@+id/header_layout3"
android:layout_width="match_parent"
android:layout_height="@dimen/common_header_height"
android:layout_marginBottom="1dp"
king:layout_background="@color/colorLightGray"
king:left_text_visible="1">
</com.jzf.myactivity.view.CommonHeaderBar>
<com.jzf.myactivity.view.CommonHeaderBar
android:id="@+id/header_layout4"
android:layout_width="match_parent"
android:layout_height="@dimen/common_header_height"
king:layout_background="@color/colorLightGray"
king:left_text_visible="1"
king:right_text_visible="2">
</com.jzf.myactivity.view.CommonHeaderBar>
</LinearLayout>
最后贴图
