Android进阶之自定义View实战仿iOS UISwitch控件实现

Posted 2023-02-17 kakacxicm

一.引言

个人觉得，自定义View一直是android开发最变换莫测、最难掌握、最具吸引力的地方。因为它涉及到的知识点比较多，想在实际应用中驾轻就熟，由浅入深，你需要掌握以下知识点:
1. View的绘制机制以及Canvas、Paint、Rect等的常用方法;
2. View的测量及布局机制:熟悉View的测量模式以及对实际宽高的影响;熟悉对view位置的影响因素，如：layout/onLayout方法、LayoutParams、TransationX/Y。
3. View/ViewGroup的事件分发、拦截及消费机制
4. View的滚动机制:Scroller的使用
接下来的几篇博客,我会给大家分享自己项目中的典型案例，让大家明白自定义View的常用套路。这篇博客主要介绍如何通过Canvas、Paint结合属性动画实现一个高仿苹果UISwitch的控件。自定义View官网链接

二.案例分析

有关Canvas、Paint的学习资料网上有很多,这里就不再赘述了。下面直接进入主题，看看苹果上UISwitch长啥样子吧。

可以看到，按钮主要包括以下元素：
1. 跑道形状的底板
2. 可变颜色的滑槽
3. 圆形手柄
4. 底板和手柄的深色边框
这里的深色边框可以有两种方式实现：1.Path 2.绘制两个图层，二者叠加实现。方法一的主要工作在于确定跑道形状的路径，运算量较大。方法二简单粗暴，稍有不足的做了冗余的绘制。个人倾向于后者。经过分解，于是就有了绘制的流程：
1. 深色底板的绘制(这个底板颜色也就是边框的颜色);
2.灰色底板的绘制，这个底板颜色可变，size比深色底板小一个边框的宽度
3.手柄的绘制,深色圆盘和白色圆盘组成带边框的手柄
基本形状的绘制流程弄清楚之后，下面还有另外一个问题,开关切换时，手柄移动的同时，手柄槽颜色也从白色渐变到绿色，这个功能怎么实现呢？这个开关的切换过程包含了两个属性的渐变：手柄位置和手柄槽颜色，很容易让人想到属性动画，是不是？不熟悉的，请看看上篇博客:Android进阶之Property Animator研究。在切换动画的过程中，水平位移线性渐变，颜色的渐变可以通过RGB三通道的颜色渐变来实现。
绘制和平滑切换的问题解决了之后，后面的点击事件和回调处理就so easy啦？下面看看代码实现吧。

三.范例代码

AppleSwitch代码实现:

package com.star.appletogglebutton;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.OvershootInterpolator;

/**
 * Created by kakaxicm on 16/5/17.
 */
public class AppleSwitch extends View 
    private final int BORDER_WIDTH = 2;//边框宽度

    private int mBasePlaneColor = Color.GRAY;//地盘颜色
    private int mOpenSlotColor = Color.parseColor("#4ebb7f");
    private int mOffSlotColor = Color.parseColor("#dadbda");//关闭时手柄滑动槽的颜色
    private int mSlotColor;

    private RectF mRect = new RectF();

    //绘制参数
    private float mBackPlaneRadius;//底板的圆形半径
    private float mSpotRadius;//手柄半径

    private float spotStartX;//手柄的起始X位置,切换时平移改变它
    private float mSpotY;//手柄的起始X位置，不变
    private float mOffSpotX;//关闭时,手柄的水平位置

    private Paint mPaint;//画笔

    private boolean mIsToggleOn;//开关标记

    private OnToggleListener mOnToggleListener;//toggle事件监听
    interface OnToggleListener
        void onSwitchChangeListener(boolean switchState);
    

    public AppleSwitch(Context context, AttributeSet attrs) 
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        setOnClickListener(new OnClickListener() 
            @Override
            public void onClick(View v) 
                if(mIsToggleOn)
                    toggleOff();
                else 
                    toggleOn();
                
                mIsToggleOn = !mIsToggleOn;
                if(mOnToggleListener != null)
                    mOnToggleListener.onSwitchChangeListener(mIsToggleOn);
                
            
        );
    

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wMode = MeasureSpec.getMode(widthMeasureSpec);
        int hMode = MeasureSpec.getMode(heightMeasureSpec);
        int wSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSize = MeasureSpec.getSize(heightMeasureSpec);
        int resultWidth = wSize;
        int resultHeight = hSize;
        Resources r = Resources.getSystem();
        //lp = wrapcontent时 指定默认值
        if(wMode == MeasureSpec.AT_MOST)
            resultWidth =  (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, r.getDisplayMetrics());
        
        if(hMode == MeasureSpec.AT_MOST)
            resultHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, r.getDisplayMetrics());
        
        setMeasuredDimension(resultWidth, resultHeight);
    

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) 
        mBackPlaneRadius = Math.min(getWidth(), getHeight()) * 0.5f;
        mSpotRadius = mBackPlaneRadius - BORDER_WIDTH;
        spotStartX = 0;
        mSpotY = 0;
        mOffSpotX = getMeasuredWidth() - mBackPlaneRadius*2;
        mSlotColor = mOffSlotColor;
    

    @Override
    protected void onDraw(Canvas canvas) 
        //画底板
        mRect.set(0, 0, getMeasuredWidth(), getMeasuredHeight());
        mPaint.setColor(mBasePlaneColor);
        canvas.drawRoundRect(mRect, mBackPlaneRadius, mBackPlaneRadius, mPaint);

        //画手柄的槽
        mRect.set(BORDER_WIDTH, BORDER_WIDTH, getMeasuredWidth() - BORDER_WIDTH, getMeasuredHeight() - BORDER_WIDTH);
        mPaint.setColor(mSlotColor);
        canvas.drawRoundRect(mRect, mSpotRadius, mSpotRadius, mPaint);

        //手柄包括包括两部分,深色底板和白板,这样做的目的是使圆盘具有边框
        //手柄的底盘
        mRect.set(spotStartX, mSpotY, spotStartX+mBackPlaneRadius*2, mSpotY+mBackPlaneRadius*2);
        mPaint.setColor(mBasePlaneColor);
        canvas.drawRoundRect(mRect, mBackPlaneRadius, mBackPlaneRadius, mPaint);
        //手柄的圆板
        mRect.set(spotStartX+BORDER_WIDTH, mSpotY+BORDER_WIDTH, mSpotRadius*2+spotStartX+BORDER_WIDTH, mSpotRadius*2+mSpotY+BORDER_WIDTH);
        mPaint.setColor(Color.WHITE);
        canvas.drawRoundRect(mRect, mSpotRadius, mSpotRadius, mPaint);
    

    public float getSpotStartX() 
        return spotStartX;
    

    public void setSpotStartX(float spotStartX) 
        this.spotStartX = spotStartX;
    

    /**
     * 计算切换时的手柄槽的颜色
     * @param fraction 动画播放进度
     * @param startColor 起始颜色
     * @param endColor 终止颜色
     */
    public void calculateColor(float fraction, int startColor, int endColor)
        final int fb = Color.blue(startColor);
        final int fr = Color.red(startColor);
        final int fg = Color.green(startColor);

        final int tb = Color.blue(endColor);
        final int tr = Color.red(endColor);
        final int tg = Color.green(endColor);

        //RGB三通道线性渐变
        int sr = (int) (fr + fraction*(tr - fr));
        int sg = (int) (fg + fraction*(tg - fg));
        int sb = (int) (fb + fraction*(tb - fb));
        //范围限定
        sb = clamp(sb, 0, 255);
        sr = clamp(sr, 0, 255);
        sg = clamp(sg, 0, 255);

        mSlotColor = Color.rgb(sr, sg, sb);
    

    private int clamp(int value, int low, int high) 
        return Math.min(Math.max(value, low), high);
    

    //关闭
    public void toggleOn()
        //手柄槽颜色渐变和手柄滑动通过属性动画来实现
        ObjectAnimator animator = ObjectAnimator.ofFloat(this,"spotStartX", 0, mOffSpotX);
        animator.setDuration(300);
        animator.start();
        animator.setInterpolator(new OvershootInterpolator(0.5f));
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
            @Override
            public void onAnimationUpdate(ValueAnimator animation) 
                float fraction = animation.getAnimatedFraction();
                calculateColor(fraction, mOffSlotColor, mOpenSlotColor);
                invalidate();
            
        );
    

    //打开
    public void toggleOff()
        //手柄槽颜色渐变和手柄滑动通过属性动画来实现
        ObjectAnimator animator = ObjectAnimator.ofFloat(this,"spotStartX",mOffSpotX, 0);
        animator.setDuration(300);
        animator.start();
        animator.setInterpolator(new OvershootInterpolator(0.5f));
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
            @Override
            public void onAnimationUpdate(ValueAnimator animation) 
                float fraction = animation.getAnimatedFraction();
                calculateColor(fraction, mOpenSlotColor, mOffSlotColor);
                invalidate();
            
        );
    

    public boolean getSwitchState()
        return mIsToggleOn;
    

    public void setToggle(boolean state)
        mIsToggleOn = state;
        if(mIsToggleOn)
            toggleOff();
        else 
            toggleOn();
        
    

    public void setOnToggleListener(OnToggleListener listener)
        mOnToggleListener = listener;
    

说明:
1.在onDraw方法里面的边框可以用绘制Path代替,绘制圆形也可以直接用drawCircle方法代替,看个人喜好
2.onMeasure方法里面设定了默认的size，否则，在它和父View的LayoutParams均配置为wrap_content时，会充满父view。这里的机制会在后面的博客详细说明.
3.下面的代码

 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
            @Override
            public void onAnimationUpdate(ValueAnimator animation) 
                float fraction = animation.getAnimatedFraction();
                calculateColor(fraction, mOffSlotColor, mOpenSlotColor);
                invalidate();
            
        );

实现了手柄位置和槽的颜色渐变，当然也可以在setSpotStartX中实现，只是颜色渐变所需要的参量fraction还要计算，所以就放在动画监听里了。
4.calculateColor方法通过RGB三通道颜色渐变与合成来实现颜色的平滑渐变
5.自定义属性网上资料也有很多，这里写死了开关状态的颜色。
通过这个实例，希望能让大家觉得:原来一些简单的控件也是just so so嘛！