自定义控件，1，自定义属性；2，创建复合控件

整理昨日在群英传上深入学习到的自定义view的知识

一,对现有控件进行扩展：

在原生控件的基础上进行拓展，增加新的功能、修改显示的UI等，一般来说，我们可以在onDraw（）方法上对原生控件行为进行拓展

以TextView的背景更加丰富，让Textview的背景更加丰富，给其多绘制几层背景。

1.1

原生的TextView使用onDraw()方法绘制要显示的文字。当继承了TextView之后如果不重写该方法，则不会修改Textview的任何效果

@Override
    protected void onDraw(Canvas canvas) {

        //在回调父类方法前，实现自己的逻辑，对TextView来说即是在绘制文本前
        super.onDraw(canvas);
        //在回调父类方法后，实现自己的逻辑，对TextView来说即是在绘制文本后
    

    }    

通过以上思路，就可以实现自定义TextView了。我们在构造方法中完成必要对象的初始化的工作。

例如：初始化两个画笔paint;

mPaint1= new Paint();
mPaint1.setColor(getResources().getColor(android.R.color.holo_blue_light));
mPaint1.setStyle(Paint.Style.FILL);
mPaint2= new Paint();
mPaint2.setColor(Color.YELLOW);
mPaint2.setStyle(Paint.Style.FILL);

然后在绘制文字前，我们可以绘制两个不同大小的矩形，形成一个重叠效果，再让系统调用 super.onDraw(canvas)方法，执行绘制文字的工作。

//绘制外层矩形
 canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint1);
//绘制内层矩形
canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mPaint1);
canvas.save();
//绘制文字前平移10像素
canvas.translate(10,0);
super.onDraw(canvas)；
canvas.restore();

1.2实现稍微复杂的TextView，实现动态文字的闪动效果。

实现这个效果可以使用Paint对象的Shader渲染器。通过设置一个不断变化的LinearGradient，并使用带有该属性的Paint对象来绘制要显示的文字。首先要在onSizeChanged（）方法中进行一些对象的初始化工作，并根据view的宽度设置一个LinearGradient

渐变渲染器，代码如下：

mViewWidth为view的宽度，通过getMeasure方法可以获取

mPaint，这里最关键的一个地方，通过getPaint()方法获取当前绘制TextView的Paint对象

mLinearGradient线性渐变属性，LinearGradient是基于Shader渲染器的

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mViewWidth==0){
            mViewWidth=getMeasuredWidth();
            if (mViewWidth>0){
                //获取当前绘制TextView的Paint对象
                mPaint=getPaint();
                //LinearGradient是基于Shader渲染器的
                mLinearGradient= new LinearGradient(
                        0,
                        0,
                        mViewWidth,
                        0,
                        new int[]{
                                Color.BLUE,0xffffffff,
                                Color.BLUE
                        },
                        null,
                        Shader.TileMode.CLAMP);
　　　　　　　　//给paint设置原生TextView没有的LinearGradient的属性
                mPaint.setShader(mLinearGradient);
　　　　　　　　　//在这里初始化好Matrix的对象，用于接下来实现平移效果，当然设置matrix还可以实现其他效果，例如旋转，缩放等

                mGradientMatrix= new Matrix();

            }
        }

    }

最后，在onDraw()方法中，通过矩阵的方式来不断的平移效果，从而绘制文字时，产生动态的闪动效果。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mGradientMatrix != null) {
            mTranslate+=mViewWidth/5;
            if (mTranslate>2*mViewWidth){
                mTranslate=-mViewWidth;
            }
            mGradientMatrix.setTranslate(mTranslate,0);//设置平移效果
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(100);

        }

    }

最后效果是这样的：

二、创建复合控件

创建复合控件可以很好的创建出具有重用功能的控件集合，这种方式通常需要继承一个合适的ViewGroup,再给它添加指定的功能的控件，从而组合成新的符合控件

我们一般会给它指定一些可配置的属性，让它具有更强的拓展性。

定义一个topBar为例

2.1定义属性：

为一个View提供可定义的属性非常简单，只需要在res资源目录的values目录下创建一个attrs.xml的文件。

name为属性的名称，format属性来指定属性的类型

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBar">
        <attr name="title" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackGround" format="reference|color"/>
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackGround" format="reference|color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>
</resources>

系统提供了TypedArray这样的数据结构来获取自定义属性集，后面引用的styleable的TopBar，就是在xml中通过<delcare-styleable name="TopBar">所指定的name名。通过TypedArray的getString(),getColor()等方法，就可以获取这些定义的属性值。
当获取完属性后，需要调用TypedArray的recyle方法来完成资源的回收 

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        mLeftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor,0);
        mLeftBackGround=ta.getDrawable(R.styleable.TopBar_leftBackGround);
        mLeftText=ta.getString(R.styleable.TopBar_leftText);

        mRightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor,0);
        mRightBackGround=ta.getDrawable(R.styleable.TopBar_rightBackGround);
        mRightText=ta.getString(R.styleable.TopBar_rightText);

        mTitleTextSize= ta.getDimension(R.styleable.TopBar_titleTextSize,10);
        mTitleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor,0);
        mTitle=ta.getString(R.styleable.TopBar_title);
        //获取完TypedArray的值后，一般要调用recyle方法来回收资源避免重新创建的时候造成的错误

        ta.recycle();

2.2组合控件

//创建组件
        mLeftButton= new Button(context);
        mRightButton= new Button(context);
        mTitleView = new TextView(context);
        //为创建的组件元素赋值，值就来源于我们在引用的xml文件中给对应属性的属性值
        mLeftButton.setText(mLeftText);
        mLeftButton.setTextColor(mLeftTextColor);
        mLeftButton.setBackground(mLeftBackGround);

        mRightButton.setText(mRightText);
        mRightButton.setTextColor(mRightTextColor);
        mRightButton.setBackground(mRightBackGround);

        mTitleView.setText(mTitle);
        mTitleView.setTextColor(mTitleTextColor);
        mTitleView.setTextSize(mTitleTextSize);
        mTitleView.setGravity(Gravity.CENTER);

        //为组件元素设置相对应的布局元素
        mLeftParams= new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
        addView(mLeftButton,mLeftParams);

        mRightParams= new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
        addView(mRightButton,mRightParams);

        mTitleParams= new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
        addView(mTitleView,mTitleParams);

要给左右按钮设计点击事件。每个调用者所需要这些按钮能够实现的功能都是不一样的，因此不能直接在UI模板中添加具体的实现逻辑

定义接口

public interface topbarClickListener{
        //左边按钮点击事件
        void leftClick();
        //右边按钮点击事件
        void rightClick();
    }

对两个按钮设置监听事件

mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener!=null)    //此处要判监听是否为空，否则在没有调用接口的情况下会报空指针异常
                mListener.rightClick();
            }
        });
mLeftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener!=null)   //此处要判监听是否为空，否则在没有调用接口的情况下会报空指针异常

mListener.leftClick(); } });

暴露接口给调用者

//暴露一个方法给调用者来注册接口调用，通过接口获得回调者对接口方法的实现
    public void setOnTopbarClickListener(topbarClickListener  listener){
        this.mListener=listener;

    }

这样TopBar的基本功能就实现了，

当然还可以提供其他的接口方法来设置TopBar的属性

例如：提供setButtonVisiable方法来设置button是否显示

public void setButtonVisable(int id,boolean flag){
        if (flag){
            if (id==0){
                mLeftButton.setVisibility(VISIBLE);
            }else{
                mRightButton.setVisibility(VISIBLE);
            }
        }else{
            if (id==0){
                mLeftButton.setVisibility(GONE);
            }else{
                mRightButton.setVisibility(GONE);
            }
        }
    }

2.3如何引用自定义的UI模板

第三方控件使用如下代码来引入名字空间。

xmlns:custom="http://schemas.android.com/apk/res-auto"

然后在xml文件中就可以使用自定义的属性了，使用custom来引用。我们进一步将这个UI模板写到一个布局文件中。

<com.example.TopBar

　　xmlns:android="http://schemas.android.com/apk/res/android"
　　xmlns:custom="http://schemas.android.com/apk/res-auto"
    custom:leftBackGround="@color/blue"

    custom:leftText="Back"
    custom:leftTextColor="@color/yellow"
    custom:rightBackGround="@color/yellow"
    custom:rightText="More"
    custom:rightTextColor="@color/blue"
    custom:title="自定义标题"
    custom:titleTextColor="@color/black"
    custom:titleTextSize="10sp"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    >

</com.example.TopBar>

那么在其他布局文件中就可以通过<include>标签进行引用了

如下所示

<include layout="@layout/layout"/>