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

一.引言

个人觉得，自定义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嘛！