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

最新推荐文章于 2024-08-26 03:55:37 发布

kakacxicm

最新推荐文章于 2024-08-26 03:55:37 发布

阅读量2.9k

点赞数

分类专栏： Android进阶文章标签： android canvas 控件 android开发

本文链接：https://blog.csdn.net/u012723976/article/details/51452862

版权

本文是Android开发中的自定义View系列文章之一，详细讲解如何使用Canvas、Paint结合属性动画实现一个高仿苹果UISwitch的控件。文章分析了UISwitch的组成部分，探讨了绘制流程，并提供了范例代码，包括手柄位置和颜色的平滑渐变效果。

摘要由CSDN通过智能技术生成

一.引言

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