不到百行代码实现,类似iPhone的滑块开关

自定义view写了这么多篇幅,通用的属性部分代码,测量代码忽略不计

真正实现的部分就不到100行!先上效果图

关闭状态

打开状态

动起来

下面我们看下我们的实现;

  • 绘制背景,绘制圆球
 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawSwichBg(canvas);
        drawSwichBallByFlag(canvas);
    }
private void drawSwichBallByFlag(Canvas canvas) {
// 绘制滑动的小球
        canvas.drawCircle(swichBallx, strockRadio, solidRadio, viewBallPaint);
    }

    private void drawSwichBg(Canvas canvas) {
    // 绘制圆角背景
        canvas.drawRoundRect(bgStrockRectF, strockRadio, strockRadio, viewStrockPaint);
        canvas.drawRoundRect(bgRectF, solidRadio, solidRadio, viewBgPaint);
    }
  • 计算圆球的边界和移动范围
 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewHeight = h;
        viewWidth = w;

//计算小球半径和圆角背景的矩形范围
        strockRadio = viewHeight / 2;
        solidRadio = (viewHeight - 2 * switchViewStrockWidth) / 2;

        swichBallx = strockRadio;
        bgStrockRectF = new RectF(0, 0, viewWidth, viewHeight);
        bgRectF = new RectF(switchViewStrockWidth, switchViewStrockWidth, viewWidth - switchViewStrockWidth, viewHeight - switchViewStrockWidth);
    }
 public void setOpenState(boolean openState) {
 //根据小球的开关状态,重置小球位置
        isOpen = openState;
        swichBallx = isOpen ? viewWidth - strockRadio : strockRadio;
        int currentStrockColor = isOpen ? switchViewBgOpenColor : switchViewStrockColor;
        int currentBgColor = isOpen ? switchViewBgOpenColor : switchViewBgCloseColor;
        viewStrockPaint.setColor(currentStrockColor);
        viewBgPaint.setColor(currentBgColor);
    }
  • 滑动处理
public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
            // 小球跟随手指移动,并且限制边界范围
                int moveX = (int) event.getX();
                if (moveX < strockRadio) {
                    moveX = strockRadio;
                }
                if (moveX > viewWidth - strockRadio) {
                    moveX = viewWidth - strockRadio;
                }
                swichBallx = moveX;
                break;
            case MotionEvent.ACTION_UP:
            // 手指离开时,根据up的坐标设置view的开关状态
                int upX = (int) event.getX();
                if (upX > viewWidth / 2) {
                    setOpenState(true);
                } else {
                    setOpenState(false);
                }
                break;
        }
        invalidate();
        return true;
    }

核心代码结束,由于开关滑块比较小就没有加入弹性滑动以及属性动画 有兴趣的可以加一个valueanimion在UP中进行缓慢的滑动!

完整的代码和下载地址如下:

[https://github.com/GuoFeilong/ATDragViewDemo]

(https://github.com/GuoFeilong/ATDragViewDemo)

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏埋名

CSS样式clip-path绘制图形裁剪图片

发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用,几乎任何形状都可以做出来...

28720
来自专栏Android先生

Android知识总结——Path常用方法解析 - 简书

前言:开发过程中很容易忘记一些API的使用方法,网上搜索或者在源码里找也很难短时间内筛选出自己需要的,遂自己将这些知识总结一番

12030
来自专栏Java与Android技术栈

Java实现图片滤镜的高级玩法

github 地址:https://github.com/imageprocessor/cv4j

17730
来自专栏郭耀华‘s Blog

android:scaleType属性

ImageView.ScaleType.CENTER|android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为...

31090
来自专栏前端小吉米

SVG 动画精髓

30750
来自专栏Python爬虫与算法进阶

Kaggle入门之预测房价

先给出本次参赛的地址House Prices: Advanced Regression Techniques

17530
来自专栏向治洪

Android滤镜效果实现及原理分析

Android在处理图片时,最常使用到的数据结构是位图(Bitmap),它包含了一张图片所有的数据。整个图片都是由点阵和颜色值组成的,所谓点阵就是一个包含像素的...

60970
来自专栏大数据风控

如何在R中绘制树图(TreeMap)

树图(TreeMap) 通过矩形面积的大小,以及填充颜色的深浅,来显示节点的统计数据,通过嵌套层次来显示分组的层级的可视化图形。 for example...

788100
来自专栏wym

俄罗斯方块

//*********************************************// //**************  头文件  *****...

7810
来自专栏前端知识分享

第154天:canvas基础(一)

​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(...

10020

扫码关注云+社区

领取腾讯云代金券