Android自定义开关按钮源码解析

本文实例为大家分享了Android自定义开关的具体代码,供大家参考,具体内容如下

ToggleColorY 为例分析, ToggleImageY逻辑代码差不多

初始化参数

获取背景颜色,按钮颜色,开关状态

@SuppressLint("ResourceAsColor")
private void initParame(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ToggleColorY, defStyleAttr, 0);
    mOpenBGColor = typedArray.getColor(R.styleable.ToggleColorY_tby_open_bg, getResources().getColor(R.color.tby_orange));
    mCloseBGColor = typedArray.getColor(R.styleable.ToggleColorY_tby_close_bg, getResources().getColor(R.color.tby_gray));
    mTouchColor = typedArray.getColor(R.styleable.ToggleColorY_tby_touch, getResources().getColor(R.color.tby_read));
    mIsOpen = typedArray.getBoolean(R.styleable.ToggleColorY_tby_state, false);
    typedArray.recycle();
}

初始化画笔和 RectF

//    Paint.Style.FILL设置只绘制图形内容
//    Paint.Style.STROKE设置只绘制图形的边
//    Paint.Style.FILL_AND_STROKE设置都绘制
private void initPaint() {
    //开关 开背景
    mOpenBGPaint = new Paint();
    mOpenBGPaint.setAntiAlias(true);
    mOpenBGPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mOpenBGPaint.setColor(mOpenBGColor);
    //开关 关背景
    mCloseBGPaint = new Paint();
    mCloseBGPaint.setAntiAlias(true);
    mCloseBGPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mCloseBGPaint.setColor(mCloseBGColor);
    //Touch 圆形
    mTouchPaint = new Paint();
    mTouchPaint.setAntiAlias(true);
    mTouchPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mTouchPaint.setColor(mTouchColor);

    //开 RectF
    mRectFOpen = new RectF();
    //关 RectF
    mRectFClose = new RectF();
}

onLayout 时获取整个控件宽高,并且设置 RectF 尺寸

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    mWidth = getWidth();
    mHeight = getHeight();
    initView();
}
private void initView() {
    mRectFClose.set(0, 0, mWidth, mHeight);
    mRectFOpen.set(0, 0, mWidth, mHeight);
}

绘制开关初始状态以及滑动按钮得初始状态

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //开关初始状态
    if (mIsOpen) {
        canvas.drawRoundRect(mRectFOpen, mHeight / 2, mHeight / 2, mOpenBGPaint);//开
    } else {
        canvas.drawRoundRect(mRectFClose, mHeight / 2, mHeight / 2, mCloseBGPaint);//关
    }
    firstDraw();
    //绘制滑动按钮
    canvas.drawCircle(mSlidingDistance, mHeight / 2, mHeight / 2, mTouchPaint);
}
/**
 * 根据开关初始状态设置滑动按钮位置
 */
private void firstDraw() {
    if (!mIsFirst) {
        if (mIsOpen) {
            mSlidingDistance = mWidth - mHeight / 2;
        } else {
            mSlidingDistance = mHeight / 2;
        }
        mIsFirst = !mIsFirst;
    }
}

剩下就是处理开关的滑动和点击

  • Down->Up, 点击事件.
  • Down->Move->Up,滑动事件

此处分Move小于一定距离也认为是点击,只有Move距离大于定值才认为是一个滑动事件组

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //mLastX 是记录手指按下的点X坐标值
            //mStartX 表示的是当前滑动的起始点X坐标值
            mLastX = mStartX = event.getX();
            //2种情况
            //1, Down->Up,若是这个顺序,手指抬起时候,按照点击逻辑切换开关
            //2, Down->Move->Up,若是这个顺序, 手指抬起时候, 就按照滑动逻辑切换开关
            mIsEnableClick = true;
            break;
        case MotionEvent.ACTION_MOVE:
            float mEndX = event.getX();
            //滑动起始坐标与滑动后坐标值相减,得到手指移动距离
            float distanceX = mEndX - mStartX;
            //对手指移动距离进行累加,这个距离是圆心X轴坐标
            mSlidingDistance += distanceX;
            //判断左右两个临界值,不能超出左右侧边值
            if (mSlidingDistance < mHeight / 2) {
                mSlidingDistance = mHeight / 2;
            }
            if (mSlidingDistance >= mWidth - mHeight / 2) {
                mSlidingDistance = mWidth - mHeight / 2;
            }
            //重绘,到这一步,圆就随手指开始移动了
            invalidate();
            //手指按下坐标与滑动最后坐标差值
            float mMinDistanceX = Math.abs(mEndX - mLastX);
            //判断差值
            //1,如果差值大于8, 则认为是滑动, 如果用户松开按钮则按照滑动条件判断
            //1,如果差值小于8, 则认为是点击, 如果用户此时松开按钮则按照点击条件判断
            if (mMinDistanceX > 8) {
                mIsEnableClick = false;
            } else {
                mIsEnableClick = true;
            }
            //更新滑动X轴起始坐标,为下一次Move事件滑动做准备
            mStartX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            if (!mIsEnableClick) {
                //当判定为滑动时, 首先判断这次滑动累加的距离, 如果大于一半则开关取反
                if (mSlidingDistance >= mWidth / 2) {
                    mIsOpen = true;
                } else {
                    mIsOpen = false;
                }
                //设置好开关Flag,执行替换背景
                drawToggle();
            } else {
                mIsOpen = !mIsOpen;
                drawToggle();
            }
            break;
    }
    return true;
}
/**
 * 按钮重绘
 */
public void drawToggle() {
    if (mIsOpen) {
        //开
        mSlidingDistance = mWidth - mHeight / 2;
    } else {
        //关
        mSlidingDistance = mHeight / 2;
    }
    if (onClick != null) {
        onClick.click(mIsOpen);
    }
    invalidate();
}

项目地址

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android中ToggleButton开关状态按钮控件使用方法详解

    ToggleButton开关状态按钮控件使用方法,具体内容如下 一.简介 1. 2.ToggleButton类结构 父类是CompoundButton,引包的时候注意下 二.ToggleButton开关状态按钮控件使用方法 1.新建ToggleButton控件及对象 private ToggleButton toggleButton1; toggleButton1=(ToggleButton) findViewById(R.id.toggleButton1); 2.设置setOnCheckedC

  • Android自定义View实现开关按钮

    前言:Android自定义View对于刚入门乃至工作几年的程序员来说都是非常恐惧的,但也是Android进阶学习的必经之路,平时项目中经常会有一些苛刻的需求,我们可以在GitHub上找到各种各样的效果,能用则用,不能用自己花功夫改改也能草草了事.不过随着工作经验和工作性质,越来越觉得自定义View是时候有必要自己花点功夫研究一下. 一.经过这两天的努力,自己也尝试着写了一个Demo,效果很简单,就是开关按钮的实现. 可能有的人会说这效果so easy,找UI切三张图就完事了,何必大费周折自定义.

  • Android 仿苹果IOS6开关按钮

    先给大家展示下效果图: 不知道大家对效果图感觉怎么样,个人觉还不错,感兴趣的朋友可以参考下实现代码哦. public class ToggleButton extends View { private SpringSystem springSystem; private Spring spring ; /** */ private float radius; /** 开启颜色*/ private int onColor = Color.parseColor("#4ebb7f"); /*

  • Android基于ImageView绘制的开关按钮效果示例

    本文实例讲述了Android基于ImageView绘制的开关按钮效果.分享给大家供大家参考,具体如下: 今天弄了一下用图片绘制开关按钮. 效果图: 还有我两张start图片和stop图片就是上面的图片,到时候大家可以按照自己的图片调用.. Main.xml文件 在xml进入这段代码就ok了. <ImageView Android:id="@+id/start" android:layout_width="150.px" android:layout_heigh

  • Android自定义实现开关按钮代码

    我们在应用中经常看到一些选择开关状态的配置文件,做项目的时候用的是android的Switch控件,但是感觉好丑的样子子 个人认为还是自定义的比较好,先上个效果图: 实现过程: 1.准备开关不同状态的两张图片放入drawable中. 2.xml文件中添加代码: <ToggleButton android:id="@+id/switch1" android:layout_width="wrap_content" android:layout_height=&qu

  • Android开发之开关按钮用法示例

    本文实例讲述了Android开发之开关按钮用法.分享给大家供大家参考,具体如下: 效果如下: 以下是布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_

  • Android动画 实现开关按钮动画(属性动画之平移动画)实例代码

    Android动画 实现开关按钮动画(属性动画之平移动画),最近做项目,根据项目需求,有一个这样的功能,实现类似开关的动画效果,经过自己琢磨及上网查找资料,终于解决了,这里就记录下: 在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Animation).补间动画(Tween Animation)和属性动画(Property Animation),至于这

  • Android开发之开关按钮控件ToggleButton简单用法示例

    本文实例讲述了Android开发之开关按钮控件ToggleButton简单用法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: res/layout/activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • Android模拟开关按钮点击打开动画(属性动画之平移动画)

    在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持两种动画:补间动画和属性动画,至于这两种动画的区别这里不再介绍,希望开发者都能在使用的过程中体会两者的不同. 本文使用属性动画完成,说到属性动画,肯定要提到 JakeWharton大神写的NineOldAndroids动画库,如果你的app需要在android3.0以下使用属性动画,那么这个库就很有作用了,如果只需要在高版本使用,那么直接

  • Android 自定义Switch开关按钮的样式实例详解

    封面 GitHub传送门 1.写在前面 本文主要讲的是在Android原生Switch控件的基础上进行样式自定义,内容很简单,但是在实现的过程中还是遇到了一些问题,在此记录下来,希望对大家能够有所帮助,看下效果图: 自定义样式 2.自定义样式 2.1 原生样式 首先看下原生的效果(Android 7.1): 原生效果 布局文件如下: <Switch android:layout_width="wrap_content" android:layout_height="wr

随机推荐