自定义控件

Android给我们提供了丰富的组件库来创建丰富的UI效果，同时也提供了非常方便的拓展方法，有如下三种方式：

• 对现有控件进行拓展
• 通过组合控件来实现新控件
• 重写View来实现新的控件

除此之外，Android系统还提供给我们很多非常方便的回调方法，具体方法如下表所示：

其中的View的回调顺序如下：

onFinishInflate -> onMeasure() -> onMeasure() -> onSizeChange() -> onLayout() -> onMeasure() -> onMeasure() -> onLayout() -> onDraw()

当执行到onDraw()时，会一直调用onDraw()方法进行绘制。

原生控件拓展

修改原有控件我们只需要创建一个类继承系统存在的组件，然后在原有的逻辑上添加自己的实现即可。

比如，我们想让一个TextView的背景更加丰富，可以给其多增加几层背景：

package com.legend.demo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.TextView;
public class MyTextView extends TextView {
    private Paint mPaint;
    private Paint mPaint1;
    private int padding = 10;
    public MyTextView(Context context) {
        super(context);
        initPath();
    }
    public MyTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPath();
    }
    private void initPath() {
        // 创建外层矩形画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(getResources().getColor(android.R.color.holo_blue_light));
        mPaint.setStyle(Paint.Style.FILL);
        // 创建内层矩形画笔画笔
        mPaint1 = new Paint();
        mPaint1.setAntiAlias(true);
        mPaint1.setColor(Color.MAGENTA);
        mPaint1.setStyle(Paint.Style.FILL);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        /*在回调父方法前，实现自己的逻辑*/
        // 绘制外层矩形
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
        // 绘制内层矩形
        canvas.drawRect(padding, padding, getMeasuredWidth() - padding, getMeasuredHeight() - padding, mPaint1);
        // 绘制文字前平移10像素
        canvas.translate(padding, 0);
        canvas.restore();
        super.onDraw(canvas);
    }
}

注：绘制的时候，实现的绘制逻辑必须在回调父方法之前，如果在回调父方法之后的话，那么实现的绘制逻辑将在绘制文本内容后。

复合控件

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

a) 我们首先制定好需要组合的控件，用它来达到我们想要的效果：

<RelativeLayout 
    android:id="@+id/rl_viewgroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView 
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:textSize="20sp"
        android:text="我是标题"/>
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:layout_below="@id/tv_content"
        android:textColor="@android:color/darker_gray"
        android:text="我是未被选中的描述"/>
    <CheckBox 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"/>
</RelativeLayout>  

b) 在values目录下创建attrs.xml文件，并定义好属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name = "combinationView">
        <attr name = "title" format = "string"/>
        <attr name = "content" format = "string"/>
        <attr name = "focusable" format = "boolean"/>
    </declare-styleable>
</resources>  

c) 创建自定义控件类继承自ViewGroup，并实现带attrs的构造函数，再使用TypeArray来获取属性：

public class TextViewCheckBox extends RelativeLayout {
    private TextView mTvTitle,mTvContent;
    private CheckBox mCbClick;
    private String mTitle,mContentOn,mContentOff;
    
    public TextViewCheckBox(Context context) {
        this(context,null);
    }
    public TextViewCheckBox(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化布局和控件
        View view = View.inflate(context, R.layout.ui_text_checkbox, this);
        mTvTitle = (TextView) view.findViewById(R.id.tv_title);
        mTvContent = (TextView) view.findViewById(R.id.tv_content);
        mCbClick = (CheckBox) view.findViewById(R.id.cb_click);
        
        // 将attrs.xml中定义的所有属性的值存储到TypeArray中
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.combinationView);
        mTitle = array.getString(R.styleable.combinationView_title);
        mContentOn = array.getString(R.styleable.combinationView_content_on);
        mContentOff = array.getString(R.styleable.combinationView_content_off);
        array.recycle();
        
        // 初始化子控件描述和状态
        if(mTitle != null){
            mTvTitle.setText(mTitle);
        }
        
        if(mContentOff != null){
            mTvContent.setText(mContentOff);
        }
    }
}  

d) 暴露方法给调用者来设置描述和状态：

/**判断是否被选中*/
public boolean isChecked(){
    return mCbClick.isChecked();
}
/**设置选中的状态*/
public void setChecked(boolean isChecked){
    mCbClick.setChecked(isChecked);
    if(isChecked){
        mTvContent.setText(mContentOn);
    }else{
        mTvContent.setText(mContentOff);
    }
} 

e) 在布局中引用该控件，引入名称空间，并设置自定义的属性。

<cn.legend.review.TextViewCheckBox
    android:id="@+id/tvc_textchecked"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    review:title="我是标题"
    review:content_on = "控件被选中"
    review:content_off = "控件没有选中"/>  

注意：在使用自定义控件时需要引入名称空间：

xmlns:review="http://schemas.android.com/apk/res/cn.legend.review"

如果想让控件响应事件的话，则直接重写事件即可，如果用到了wrap_content或match_parent则需要进行测量等操作。

定义属性

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

a)在res/values文件下定义一个attrs.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 声明自定义属性集 -->
    <declare-styleable name="ToolBar">
        <!-- 通过name属性确定引用的名称 -->
        <attr name="buttonNum" format="integer"/>
        <attr name="itemBackground" format="reference|color"/>
    </declare-styleable>
</resources>

其中format的取值如下表所示：其中不包括 位或运算 和 枚举。

b)系统提供了TypeArray这样的数据结构来获取自定义属性集合，通过该对象的getString()、getColor()等方法来获取属性值。

// 第一种方式
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.ToolBar);
int buttonNum = array.getInt(R.styleable.ToolBar_buttonNum, 5);
int itemBg = array.getResourceId(R.styleable.ToolBar_itemBackground, -1);
array.recycle();

// 第二种方式
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.ToolBar);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
    int attr = array.getIndex(i);
    switch (attr) {
    case R.styleable.ToolBar_buttonNum:
        int buttonNum = array.getInt(attr, 5);
        break;
    case R.styleable.ToolBar_itemBackground:
        int itemBg = array.getResourceId(attr, -1);
        break;
    }
}  

注：获取属性后记得调用recycle()方法释放资源，然后就是在Android Studio中控件引用自定义属性需要添加名称空间：

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

完全重写

当Android系统原生控件无法满足我们的需求时，可以通过继承View或ViewGroup的方式来实现需要的功能。

重写View

假如我们要实现静态音频条形图，该类因为没有子控件，所以我们创建一个类来继承View

public class MediaView extends View {
    private int mRectCount = 12;
    private int mRectWidth;
    private int mRectHeight;
    private int mWidth;
    private double padding = 1;
    private double mRandom;
    private Paint mPaint;
    private LinearGradient mLinearGradient;
    public MediaView(Context context) {
        super(context, null);
    }
    public MediaView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        // 计算矩形的宽度和高度
        mRectWidth = (int)(mWidth * 0.6 / mRectCount);
        mRectHeight = getHeight();
        // 渐变效果
        mLinearGradient = new LinearGradient(
                0, 0, mRectWidth, mRectHeight, Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 由于需要绘制矩形条，每个矩形都有空距
        for (int i = 0; i < mRectCount; i++) {
            canvas.drawRect(
                    (float)(mWidth * 0.2 + mRectWidth * i + padding), getCurrentHeight(),
                    (float)(mWidth * 0.2 + mRectWidth * (i + 1)), mRectHeight, mPaint);
        }
        // 每隔1秒重绘，显示动态效果
        postInvalidateDelayed(1000);
    }
    // 生成随机距离top的高度
    private float getCurrentHeight() {
        mRandom = Math.random();
        return (float)(mRectHeight * mRandom);
    }
}

重写ViewGroup

自定义ViewGroup通常需要重写onMeasure() 和 onLayout()方法来对子控件进行测量和确定子控件的位置，重写onTouchEvent()方法增加响应事件。

SlidingMenu是一个ViewGroup，它由左侧菜单和右侧内容区域组成。


我们首先实现左侧和右侧布局，然后通过include标签将左右侧布局放入到SlidingMenu中：

<com.legend.menu.SlidingMenu
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/left_menu"/>
    <include layout="@layout/right_content"/>
</com.legend.menu.SlidingMenu>

编写ViewGrop

a) 首先创建类SlidingMenu继承ViewGroup，然后测量子View的大小，再指定子View的位置。

public class SlidingMenu extends ViewGroup {
    private int mLeftWidth;
    private View mLeftMenu;
    private View mRightContent;
    private int mDownx;
    private int mDownY;
    public SlidingMenu(Context context) {
        super(context);
    }
    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // 获取子控件实例
        mLeftMenu = getChildAt(0);
        mRightContent = getChildAt(1);
        mLeftWidth = mLeftMenu.getLayoutParams().width;
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 测量左侧孩子
        int leftWidthMeasureSpec = MeasureSpec.makeMeasureSpec(mLeftWidth, MeasureSpec.EXACTLY);
        int rightWidthMeasureSpec = heightMeasureSpec;
        mLeftMenu.measure(leftWidthMeasureSpec, rightWidthMeasureSpec);
        // 测量内容View和父容器等宽高。
        mRightContent.measure(widthMeasureSpec, heightMeasureSpec);
        // 针对自己，表示测量结束
        int measuredWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measuredHeight = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(measuredWidth, measuredHeight);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 指定子View的位置
        mLeftMenu.layout(-(mLeftMenu.getMeasuredWidth()), 0, 0, mLeftMenu.getMeasuredHeight());
        mRightContent.layout(0, 0, mRightContent.getMeasuredWidth(), mRightContent.getMeasuredHeight());
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mDownx = (int) event.getX();
                mDownY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int) event.getX();
                int moveY = (int) event.getY();
                //当从左往右滑动，窗体向左移动，坐标在减少，使用downX - moveX则刚好是负数
                int diffX = mDownx - moveX;
                // 获取窗体左上角坐标
                int scrollX = getScrollX();
                if(scrollX + diffX < -mLeftMenu.getMeasuredWidth()){
                    scrollTo(-mLeftMenu.getMeasuredWidth(), 0);
                }else if(scrollX + diffX > 0){
                    scrollTo(0, 0);
                }else{
                    scrollBy(diffX, 0);
                }
                // 重新记录坐标
                mDownx = moveX;
                mDownY = moveY;
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }
}

此时，我们已经完成SlidingMenu的基本操作，接下来讲解Android中的滑动事件。

滑动实现：

从左向右滑动屏幕，此时x坐标在不断变小，在up的时候，我们可以考虑两种情况：

• 当左上角坐标小于左侧菜单的宽度，此时左侧菜单已经出来一大半，我们就显示左侧菜单。
• 当左上角坐标大于左侧菜单的宽度，此时左侧菜单已经出来一小半，我们就显示内容区域。

case MotionEvent.ACTION_UP:
    if(getScrollX() < -leftMenuView.getMeasuredWidth() / 2){
        // 显示左侧部分
        scrollTo(-leftMenuView.getMeasuredWidth(), 0);
    }else{
        // 显示右侧部分
        scrollTo(0, 0);
    }
    break;  

现在，已经大致实现了需求，但是滑动感觉非常的僵硬，我们需要让它实现缓慢滚动的效果，实现一个过渡(模拟滑动)。

我们在构造函数初始化的时候实例化Scroller对象

mScoller = new Scroller(context);  

然后模拟数据变化

case MotionEvent.ACTION_UP:
    if(getScrollX() < -leftMenuView.getMeasuredWidth() / 2){
        // 显示左侧部分
        //scrollTo(-leftMenuView.getMeasuredWidth(), 0);
        int startX = getScrollX();
        int startY = getScrollY();
        int endX = -leftMenuView.getMeasuredWidth();
        int endY = 0;
        int dx = endX - startX;
        int dy = endY - startY;
        int duration = 500;
        mScoller.startScroll(startX, startY, dx, dy, duration);
    }else{
        // 显示右侧部分
        //scrollTo(0, 0);
        int startX = getScrollX();
        int startY = getScrollY();
        int endX = 0;
        int endY = 0;
        int dx = endX - startX;
        int dy = endY - startY;
        int duration = 500;
        mScoller.startScroll(startX, startY, dx, dy, duration);
    }
    invalidate();
    break;  

此时，发现运行起来并没有效果，因为此时只是模拟数据变化，我们还需要实现一个方法：

@Override
public void computeScroll() {
    if(mScoller.computeScrollOffset()){ // 正在滚动中
        scrollTo(mScoller.getCurrX(), 0);
        invalidate();
    }
}  

事件分发：

当手指按下某个点时，最外侧最先获取到事件，然后一路往下传递给子View，最内侧如果响应，表示事件消费掉了。如果最内侧不响应，会以此向外侧进行传递。

此时，当焦点在左侧菜单的时候，水平滑动是无效的，因为此时左侧菜单获取到了焦点。我们希望焦点在左侧菜单时，水平滑动是有效的，则可以让SlidingMenu去

响应事件即可。所以在SlidingMenu的 方法中去判断是否是水平滑动，是则拦截掉事件。

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action) {
    case MotionEvent.ACTION_DOWN:
        mDownX = (int) ev.getX();
        mDownY = (int) ev.getY();
        break;
    case MotionEvent.ACTION_MOVE:
        int moveX = (int) ev.getX();
        int moveY = (int) ev.getY();
        // 水平滑动
        if(Math.abs(moveX - mDownX) > Math.abs(moveY - mDownY)){
            return true;
        }
        break;
    case MotionEvent.ACTION_UP:
        break;
    }
    return super.onInterceptTouchEvent(ev);
}