Android 自定义组合控件

作者: weiyushuai | 来源:发表于2017-04-18 12:15 被阅读609次

Android自定义控件之自定义组合控件
【Android】自定义控件
Android中的自定义控件
自定义的控件简介
自定义控件的原因以及动画的分类
组合自定义控件的步骤详解
自定义控件概述
Android自定义控件(一,基本原理)
Android入门06 -- 自定义控件
Android开发之自定义View（一）

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" />

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

Android自定义控件之自定义组合控件
Android自定义控件之自定义组合控件前言：前两篇介绍了自定义控件的基础原理Android自定义控件之基本原...
【Android】自定义控件
Android自定义控件可以有三种实现方式组合原生控件自己绘制控件继承原生控件 1 组合原生控件 1.1 组合原...
Android中的自定义控件
Android中的自定义控件大致可以分成三类：自定义组合控件、继承原生控件的自定义控件、继承View自己实现绘制的...
自定义的控件简介
android 自定义控件简介安卓中的自定义控件可以分为三种：通过将系统提供的控件组合，成为新的控件自定义V...
自定义控件的原因以及动画的分类
什么是自定义控件? 在 Android 系统中使用系统自带控件重新组合或者自定义类继承 View / ViewGr...
组合自定义控件的步骤详解
Android 步骤： 1 自定义组合控件的布局settint_view.xml 2 创建一个自定义子和控件的类S...
自定义控件概述
阅读原文 1.自定义控件的一些概念 1.什么是自定义控件在Android系统中，用系统的自带控件重新组合或者自定...
Android自定义控件(一,基本原理)
自定义控件相关目录： Android自定义控件(一,基本原理) Android自定义控件(二,自定义属性) And...
Android入门06 -- 自定义控件
自定义组合控件将几个子控件组合在一起，形成一个可复用的新的组合控件，自定义组合控件一般继承自RelativeLa...
Android开发之自定义View（一）
Android常见的自定义控件有三种方式：继承View 继承原有的控件，在原有控件的基础上进行修改重新拼装组合...