Android 自定义组合控件

Paste_Image.png

• 自定义组合控件

• 第一步定义你要复用的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="52dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/list_item_selector"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:contentDescription="@string/app_name" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@id/iv"
        android:gravity="center_vertical"
        android:textColor="@color/text"
        tools:text="粉丝"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/iv_new"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:contentDescription="@string/app_name"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/iv_next"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/ui_magin_right"
        android:contentDescription="@string/app_name"
        android:src="@drawable/list_arrow" />

    <TextView
        android:id="@+id/tv_value"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/iv_next"
        android:layout_toRightOf="@id/tv_title"
        android:ellipsize="end"
        android:gravity="right|center_vertical"
        android:singleLine="true"
        tools:text="0"
        android:textColor="@color/text_gray1"
        android:textSize="16sp" />

    <View
        android:id="@+id/divider_line"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="@dimen/ui_magin_left"
        android:background="@color/divider" />

</RelativeLayout>

• 第二步定义自定义属性

比如标题文字、标题栏左边按钮图标等。

<declare-styleable name="CommonValueItemView">
        <attr name="item_title" format="string" />
        <attr name="left_image_visible" format="boolean" />
        <attr name="divider_line_visibility" format="boolean" />
        <attr name="value_visibility" format="boolean" />
        <attr name="next_visibility" format="boolean" />
        <attr name="item_img" format="reference|integer" />
 </declare-styleable>

• 第三步自定义一个View根据需求继承不同的ViewGroup子类，比如：RelativeLayout、LinearLayout等，我们这里继承RelativeLayout

public class CommonValueItemView extends RelativeLayout {

初始化控件

private void initView(Context context) {
        View.inflate(context, R.layout.view_common_value_item, this);
        iv = (ImageView) this.findViewById(R.id.iv);
        tv_title = (TextView) this.findViewById(R.id.tv_title);
        tv_value = (TextView) this.findViewById(R.id.tv_value);
        divider_line=findViewById(R.id.divider_line);
        iv_next=(ImageView) findViewById(R.id.iv_next);
        iv_new=(ImageView) findViewById(R.id.iv_new);
    }

重写构造方法 ,在构造方法中初始化控件,并引用自定义属性

public CommonValueItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CommonValueItemView);
        String title = attributes.getString(R.styleable.CommonValueItemView_item_title);
        setTitle(title);
        //设置item之间分隔线是否显示
        boolean visibility = attributes.getBoolean(R.styleable.CommonValueItemView_divider_line_visibility, true);
        if (visibility) {
            setDividerLineVisibility(View.VISIBLE);
        } else {
            setDividerLineVisibility(View.GONE);
        }
        //获取是否要显示左边图片
        int leftImgResource = attributes.getResourceId(R.styleable.CommonValueItemView_item_img, -1);
        if (leftImgResource != -1) {
            setIvResource(leftImgResource);
        } else {
            iv.setVisibility(View.GONE);
        }
        //获取是否要显示右边按钮
        boolean nextVisibiliy = attributes.getBoolean(R.styleable.CommonValueItemView_next_visibility, true);
        if (nextVisibiliy) {
            iv_next.setVisibility(View.INVISIBLE);
        } else {
            iv_next.setVisibility(View.GONE);
        }
        //设置值是否显示
        boolean valueVisibility = attributes.getBoolean(R.styleable.CommonValueItemView_value_visibility, true);
        if (valueVisibility) {
            setValueVisibility(View.VISIBLE);
        } else {
            setValueVisibility(View.GONE);
        }
    }

• 完整代码

public class CommonValueItemView extends RelativeLayout {
    
    private ImageView iv;
    private TextView tv_title;
    private TextView tv_value;
    private View divider_line;
    private ImageView iv_next;
    private ImageView iv_new;

    private void initView(Context context) {
        View.inflate(context, R.layout.view_common_value_item, this);
        iv = (ImageView) this.findViewById(R.id.iv);
        tv_title = (TextView) this.findViewById(R.id.tv_title);
        tv_value = (TextView) this.findViewById(R.id.tv_value);
        divider_line=findViewById(R.id.divider_line);
        iv_next=(ImageView) findViewById(R.id.iv_next);
        iv_new=(ImageView) findViewById(R.id.iv_new);
    }
    
    public CommonValueItemView(Context context) {
        super(context);
        initView(context);
    }

    public CommonValueItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CommonValueItemView);
        String title = attributes.getString(R.styleable.CommonValueItemView_item_title);
        setTitle(title);
        //设置item之间分隔线是否显示
        boolean visibility = attributes.getBoolean(R.styleable.CommonValueItemView_divider_line_visibility, true);
        if (visibility) {
            setDividerLineVisibility(View.VISIBLE);
        } else {
            setDividerLineVisibility(View.GONE);
        }
        //获取是否要显示左边图片
        int leftImgResource = attributes.getResourceId(R.styleable.CommonValueItemView_item_img, -1);
        if (leftImgResource != -1) {
            setIvResource(leftImgResource);
        } else {
            iv.setVisibility(View.GONE);
        }
        //获取是否要显示右边按钮
        boolean nextVisibiliy = attributes.getBoolean(R.styleable.CommonValueItemView_next_visibility, true);
        if (nextVisibiliy) {
            iv_next.setVisibility(View.INVISIBLE);
        } else {
            iv_next.setVisibility(View.GONE);
        }
        //设置值是否显示
        boolean valueVisibility = attributes.getBoolean(R.styleable.CommonValueItemView_value_visibility, true);
        if (valueVisibility) {
            setValueVisibility(View.VISIBLE);
        } else {
            setValueVisibility(View.GONE);
        }
    }

    public CommonValueItemView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }
    
    public void setIvResource(int resId){
        iv.setImageResource(resId);
    }
    
    public void setTitle(int resid){
        tv_title.setText(resid);
    }
    public void setTitle(String resid){
        tv_title.setText(resid);
    }
    
    public void setValue(int resid){
        tv_value.setText(resid);
    }
    public void setValue(String resid){
        tv_value.setText(resid);
    }
    
    public String getValue(){
        return tv_value.getText().toString();
    }
    
    public void setValueVisibility(int visibility){
        tv_value.setVisibility(visibility);
    }
    public void setDividerLineVisibility(int visibility){
        divider_line.setVisibility(visibility);
    }

    public void setNextVisibility(int visibility){
        if(View.VISIBLE==visibility){
            iv_new.setVisibility(View.GONE);
        }
        iv_next.setVisibility(visibility);
    }
    
    public void setNewVisibility(int visibility){
        if(View.VISIBLE==visibility){
            iv_next.setVisibility(View.GONE);
        }
        iv_new.setVisibility(visibility);
    }
}

• 最后一步在需要的xml中进行引用并在根结点添加xmlns:app="http://schemas.android.com/apk/res-auto"

            <com.android.widget.CommonValueItemView
                android:id="@+id/cviv_setting"
                style="@style/common_cviv"
                app:item_img="@drawable/icon_setting"
                app:item_title="设置"
                app:value_visibility="false" />

自定义组合控件能够提高开发效率，降低维护成本