自定义控件之复合控件详解

最新推荐文章于 2021-07-14 21:13:00 发布

wushengjun1991

最新推荐文章于 2021-07-14 21:13:00 发布

阅读量331

点赞数 1

分类专栏：自定义View 应用文章标签：控件应用界面自定义View 复合控件

本文链接：https://blog.csdn.net/wushengjun1991/article/details/52997106

版权

应用同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

自定义View

4 篇文章 0 订阅

订阅专栏

好久没写了，大半个月吧。下面就说说一下自定义View的一点知识，自己本人呢也正在学习，请多多指教哈。
通常情况下，一个app里都会重用一些布局控件，而且为了应用程序风格的统一，都会运用一些共通的UI界面，就比如一个标题栏(下面我叫它为TopBarView)，中间是题目，左右边上是按钮或TextView之类的。一般这样我们就可以把这些界面抽象出来，形成一个通用的UI组件，这样我们就可以在所以需要添加该TopBarView的时候引用这个组合控件，而不是每一个界面布局都写这么多的控件。同时还可以给TopBarView增加相应接口，让调用者能够更灵活的应用和控制这个TopBarView，提高界面的复用性。
一、为了这个TopBarView具有通用性和可定制化性，我们应该给它定制模板，先给它自定义一些属性，如文字、颜色、大小等。具体实现只需在res目录下values目录创建一个attrs.xml的文件，代码中添加如下属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBarView">
        <attr name="titleText" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>

        <attr name="leftText" format="string"/>
        <attr name="leftTextSize" format="dimension"/>
        <attr name="leftTextColor" format="color"/>

        <attr name="rightText" format="string"/>
        <attr name="rightTextSize" format="dimension"/>
        <attr name="rightTextColor" format="color"/>

        <attr name="titleBackground" format="color|reference"/>
        <attr name="leftBackground" format="color|reference"/>
        <attr name="rightBackground" format="color|reference"/>
    </declare-styleable>
</resources>

在代码里通过标签声明了使用自定义属性，并通过name属性来确定引用的名称，最后用标签来声明具体的自定义属性，formal属性用来指定属性的类型，如果有多个引用属性，就用“|”分隔开不同的属性。
二、确定好属性后，就可以创建一个自定义控件——TopBarView，并让它继承ViewGroup，从而组合起控件。这里简单就继承RelativeLayout，在构造方法中通过如下代码获取XML布局文件中自定义的那些属性：

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBarView);

接下来通过TypedArray对象的getString(),getColor等方法获取这些定义的属性值，如下：

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBarView);

        titleText = ta.getString(R.styleable.TopBarView_titleText);
        leftText = ta.getString(R.styleable.TopBarView_leftText);
        rightText = ta.getString(R.styleable.TopBarView_rightText);

        titleTextColor = ta.getColor(R.styleable.TopBarView_titleTextColor, defaultTextColor);
        leftTextColor = ta.getColor(R.styleable.TopBarView_leftTextColor, defaultTextColor);
        rightTextColor = ta.getColor(R.styleable.TopBarView_rightTextColor, defaultTextColor);

        titleTextSize = ta.getDimension(R.styleable.TopBarView_titleTextSize, defaultTextSize);
        leftTextSize = ta.getDimension(R.styleable.TopBarView_leftTextSize, defaultTextSize);
        rightTextSize = ta.getDimension(R.styleable.TopBarView_rightTextSize, defaultTextSize);

        titleBackground = ta.getDrawable(R.styleable.TopBarView_titleBackground);
        leftBackground = ta.getDrawable(R.styleable.TopBarView_leftBackground);
        rightBackground = ta.getDrawable(R.styleable.TopBarView_rightBackground);

        ta.recycle(); //used finish and recycle.

三、接下来我们就开始组合控件了，这里我TopBarView两边添加的是两个TextView，具体需要可以根据实际拓展，上代码一目了然：

titleTextView = new TextView(context);
        leftTextView = new TextView(context);
        rightTextView = new TextView(context);

        titleTextView.setText(titleText);
        titleTextView.setTextSize(titleTextSize);
        if(titleTextColor != defaultTextColor) {
            titleTextView.setTextColor(titleTextColor);
        }
        if(titleBackground != null) {
            titleTextView.setBackground(titleBackground);
        }
        titleTextView.setGravity(Gravity.CENTER);

        leftTextView.setText(leftText);
        leftTextView.setTextSize(leftTextSize);
        if(leftTextColor != defaultTextColor) {
            leftTextView.setTextColor(leftTextColor);
        }
        if(leftBackground != null) {
            leftTextView.setBackground(leftBackground);
        }
        leftTextView.setGravity(Gravity.CENTER);

        rightTextView.setText(rightText);
        rightTextView.setTextSize(rightTextSize);
        if(rightTextColor != defaultTextColor) {
            rightTextView.setTextColor(rightTextColor);
        }
        if(rightBackground != null) {
            rightTextView.setBackground(rightBackground);
        }
        rightTextView.setGravity(Gravity.CENTER);

        //为组件元素设置相应的布局元素
        LayoutParams titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(titleTextView, titleParams);

        LayoutParams leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(leftTextView, leftParams);

        LayoutParams rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(rightTextView, rightParams);

四、上面添加完控件了，那如何给它们添加一些事件呢？如经常用的点击事件！到这我们就会想到，既然是通用模板，不可能写具体的点击逻辑事件，只能定义接口，让调用者注册这个接口，实现逻辑就交个调用者了。实现过程如下：

/**
     * 接口，实现回调机制，具体的实现由调用者去创建
     * @author WuShengjun
     * @date 2016年11月1日
     */
    public interface OnTopViewsClikListener {
        public void titleClick();
        public void leftClick();
        public void rightClick();
    }

    /**
     * 暴露接口给调用者
     * @param listener
     */
    public void setOnTopViewsClikListener(OnTopViewsClikListener listener) {
        this.mListener = listener;
    }

把上面的接口暴露给调用者，不去实现具体的逻辑，而是调用接口中相应的点击方法：

titleTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.titleClick();
                }
            }
        });
        leftTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.leftClick();
                }
            }
        });
        rightTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.rightClick();
                }
            }
        });

五、调用者还可以动态的控制TopBarView上所有控件的显示状态，具体实现如下：

public enum TopBarViewId {
        LEFT(1), RIGHT(2), TITLE(3);

        //定义私有成员变量
        private int code;
        private TopBarViewId(int code) { //枚举类型的构造方法只能是私有的
            this.code = code;
        }

        @Override
        public String toString() {
            // TODO Auto-generated method stub
            return String.valueOf(this.code);
        }
    }

    public void setVisable(TopBarViewId tvId, boolean visable) {
        if(visable) {
            if(tvId == TopBarViewId.LEFT) {
                leftTextView.setVisibility(View.VISIBLE);
            } else if(tvId == TopBarViewId.RIGHT) {
                rightTextView.setVisibility(View.VISIBLE);
            } else if(tvId == TopBarViewId.TITLE) {
                titleTextView.setVisibility(View.VISIBLE);
            }
        } else {
            if(tvId == TopBarViewId.LEFT) {
                leftTextView.setVisibility(View.GONE);
            } else if(tvId == TopBarViewId.RIGHT) {
                rightTextView.setVisibility(View.GONE);
            } else if(tvId == TopBarViewId.TITLE) {
                titleTextView.setVisibility(View.GONE);
            }
        }
    }

六、引用TopBarView模板，布局文件中引用示例如下：

<com.wsj.view.TopBarView
        android:id="@+id/topBarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:leftText="左边"
        custom:rightText="右边"
        custom:titleText="标题名称"
        custom:titleTextColor="@color/black"
        custom:titleTextSize="18sp" />

布局文件中第一行：xmlns:android=”http://schemas.android.com/apk/res/android”
指定引用的名字空间xmlns，即xml namespace，“android”是系统的名字空间；
xmlns:custom=”http://schemas.android.com/apk/res/com.wsj.regexdemo”，我们就取为“custom”,可以自定义取。

七、上面已经按部就班讲了下组合控件的定义。下面给出这个自定义控件类的完整代码：

package com.wsj.view;

import com.wsj.regexdemo.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TopBarView extends RelativeLayout {
    private int defaultTextColor = -1;
    private float defaultTextSize = 12;

    private TextView titleTextView, leftTextView, rightTextView;

    //
    private String titleText = "", leftText = "", rightText = "";
    private int titleTextColor, leftTextColor, rightTextColor;
    private float titleTextSize, leftTextSize, rightTextSize;
    private Drawable titleBackground, leftBackground, rightBackground;

    private OnTopViewsClikListener mListener;

    public TopBarView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public TopBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init(context, attrs);
    }

    public TopBarView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBarView);

        titleText = ta.getString(R.styleable.TopBarView_titleText);
        leftText = ta.getString(R.styleable.TopBarView_leftText);
        rightText = ta.getString(R.styleable.TopBarView_rightText);

        titleTextColor = ta.getColor(R.styleable.TopBarView_titleTextColor, defaultTextColor);
        leftTextColor = ta.getColor(R.styleable.TopBarView_leftTextColor, defaultTextColor);
        rightTextColor = ta.getColor(R.styleable.TopBarView_rightTextColor, defaultTextColor);

        titleTextSize = ta.getDimension(R.styleable.TopBarView_titleTextSize, defaultTextSize);
        leftTextSize = ta.getDimension(R.styleable.TopBarView_leftTextSize, defaultTextSize);
        rightTextSize = ta.getDimension(R.styleable.TopBarView_rightTextSize, defaultTextSize);

        titleBackground = ta.getDrawable(R.styleable.TopBarView_titleBackground);
        leftBackground = ta.getDrawable(R.styleable.TopBarView_leftBackground);
        rightBackground = ta.getDrawable(R.styleable.TopBarView_rightBackground);

        ta.recycle(); //used finish and recycle.

        addView(context);

        initEvents();
    }

    private void addView(Context context) {
        titleTextView = new TextView(context);
        leftTextView = new TextView(context);
        rightTextView = new TextView(context);

        titleTextView.setText(titleText);
        titleTextView.setTextSize(titleTextSize);
        if(titleTextColor != defaultTextColor) {
            titleTextView.setTextColor(titleTextColor);
        }
        if(titleBackground != null) {
            titleTextView.setBackground(titleBackground);
        }
        titleTextView.setGravity(Gravity.CENTER);

        leftTextView.setText(leftText);
        leftTextView.setTextSize(leftTextSize);
        if(leftTextColor != defaultTextColor) {
            leftTextView.setTextColor(leftTextColor);
        }
        if(leftBackground != null) {
            leftTextView.setBackground(leftBackground);
        }
        leftTextView.setGravity(Gravity.CENTER);

        rightTextView.setText(rightText);
        rightTextView.setTextSize(rightTextSize);
        if(rightTextColor != defaultTextColor) {
            rightTextView.setTextColor(rightTextColor);
        }
        if(rightBackground != null) {
            rightTextView.setBackground(rightBackground);
        }
        rightTextView.setGravity(Gravity.CENTER);

        //为组件元素设置相应的布局元素
        LayoutParams titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(titleTextView, titleParams);

        LayoutParams leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(leftTextView, leftParams);

        LayoutParams rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(rightTextView, rightParams);
    }

    private void initEvents() {
        titleTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.titleClick();
                }
            }
        });
        leftTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.leftClick();
                }
            }
        });
        rightTextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mListener != null) {
                    mListener.rightClick();
                }
            }
        });
    }

    /**
     * 接口，实现回调机制，具体的实现由调用者去创建
     * @author WuShengjun
     * @date 2016年11月1日
     */
    public interface OnTopViewsClikListener {
        public void titleClick();
        public void leftClick();
        public void rightClick();
    }

    /**
     * 暴露接口给调用者
     * @param listener
     */
    public void setOnTopViewsClikListener(OnTopViewsClikListener listener) {
        this.mListener = listener;
    }

    public enum TopBarViewId {
        LEFT(1), RIGHT(2), TITLE(3);

        //定义私有成员变量
        private int code;
        private TopBarViewId(int code) { //枚举类型的构造方法只能是私有的
            this.code = code;
        }

        @Override
        public String toString() {
            // TODO Auto-generated method stub
            return String.valueOf(this.code);
        }
    }

    public void setVisable(TopBarViewId tvId, boolean visable) {
        if(visable) {
            if(tvId == TopBarViewId.LEFT) {
                leftTextView.setVisibility(View.VISIBLE);
            } else if(tvId == TopBarViewId.RIGHT) {
                rightTextView.setVisibility(View.VISIBLE);
            } else if(tvId == TopBarViewId.TITLE) {
                titleTextView.setVisibility(View.VISIBLE);
            }
        } else {
            if(tvId == TopBarViewId.LEFT) {
                leftTextView.setVisibility(View.GONE);
            } else if(tvId == TopBarViewId.RIGHT) {
                rightTextView.setVisibility(View.GONE);
            } else if(tvId == TopBarViewId.TITLE) {
                titleTextView.setVisibility(View.GONE);
            }
        }
    }
}

wushengjun1991

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义控件之复合控件详解

好久没写了，大半个月吧。下面就说说一下自定义View的一点知识，自己本人呢也正在学习，请多多指教哈。通常情况下，一个app里都会重用一些布局控件，而且为了应用程序风格的统一，都会运用一些共通的UI界面，就比如一个标题栏(下面我叫它为TopBarView)，中间是题目，左右边上是按钮或TextView之类的。一般这样我们就可以把这些界面抽象出来，形成一个通用的UI组件，这样我们就可以在所以需要添加
复制链接

扫一扫