Android开关按钮 Android自定义开关按钮源码解析
碧云天丶 人气:0想了解Android自定义开关按钮源码解析的相关内容吗,碧云天丶在本文为您仔细讲解Android开关按钮的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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(); }
效果图
加载全部内容