android 仿开关按钮,Android 自定义仿微信开关按钮

1.按钮可以点击打开和滑动打开

先上图：

2.思路很简单：

2.1绘制左边圆、矩形然后右边圆

2.2绘制中间滑动的白色小圆

2.3拦截触摸事件，判断点击，和滑动事件，同时重绘小圆和背景

3.上代码

package com.ouyang.qqui.view;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.os.Handler;

import android.os.Message;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

/**

* Create by oy 2017/9/8 9:45.

* 仿微信按钮

*/

public class MyClickButton extends View {

//左圆半径

private int center;

//矩形x坐标

private int rec_x;

//画笔

private Paint paint;

//控件宽

private int measuredWidth;

//控件高

private int measuredHeight;

//小圆半径

private int smallCenter;

//小圆的x坐标

private float smallCenter_x;

//小圆画笔

private Paint smallPaint;

//按下的x坐标

private float startx;

//移动的结束坐标

private float endx;

//左圆圆心和右圆圆心中间的坐标

private int mid_x;

public MyClickButton(Context context) {

this(context, null);

}

public MyClickButton(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public MyClickButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

//回调，点击事件

private OnMClickListener onClickListener;

public void setOnMbClickListener(OnMClickListener onClickListener) {

this.onClickListener = onClickListener;

}

public interface OnMClickListener {

void onClick(boolean isRight);

}

private void init() {

//初始化一些数据

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

smallPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

paint.setColor(Color.GREEN);

smallPaint.setColor(Color.WHITE);

}

//往左

public static final int TO_LEFT = 11;

//往右

public static final int TO_RIGHT = 22;

private boolean isRight = true;

private boolean isAnimate = false;

Handler handler = new Handler() {

@Override

public void handleMessage(Message msg) {

switch (msg.what) {

case TO_LEFT:

paint.setColor(Color.GRAY);

if (smallCenter_x > center) {

smallCenter_x -= 5;

handler.sendEmptyMessageDelayed(TO_LEFT, 1);

isAnimate = true;

} else {

smallCenter_x = center;

//设置滑动不可点击

setEnabled(true);

isAnimate = false;

}

break;

case TO_RIGHT:

paint.setColor(Color.GREEN);

if (smallCenter_x < rec_x) {

smallCenter_x += 5;

handler.sendEmptyMessageDelayed(TO_RIGHT, 1);

isAnimate = true;

} else {

smallCenter_x = rec_x;

setEnabled(true);

isAnimate = false;

}

break;

}

//重绘

invalidate();

}

};

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measuredHeight = getMeasuredHeight();

measuredWidth = getMeasuredWidth();

//得出左圆，长方形，右圆的坐标

center = measuredHeight / 2;

//长方形右边的坐标

rec_x = measuredWidth - center;

//小圆的半径 = 大圆半径减5

smallCenter = center - 5;

//小圆的圆心x坐标一直在变化

smallCenter_x = rec_x;

}

@Override

protected void onDraw(Canvas canvas) {

//左圆

canvas.drawCircle(center, center, center, paint);

//矩形

canvas.drawRect(center, 0, rec_x, measuredHeight, paint);

//右圆

canvas.drawCircle(rec_x, center, center, paint);

//小圆

canvas.drawCircle(smallCenter_x, center, smallCenter, smallPaint);

super.onDraw(canvas);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

//开始的x坐标

startx = event.getX();

endx = event.getX();

break;

case MotionEvent.ACTION_MOVE:

float distance = event.getX() - endx;

smallCenter_x += distance;

//控制范围

if (smallCenter_x > rec_x) {

isRight = true;

smallCenter_x = rec_x;

paint.setColor(Color.GREEN);

} else if (smallCenter_x < center) {

//最左

smallCenter_x = center;

isRight = false;

paint.setColor(Color.GRAY);

}

invalidate();

break;

case MotionEvent.ACTION_UP:

//分2种情况，1.点击 2.没滑过中点

//1.点击

float up_x = event.getX();

//按下和抬起的距离小于2确定是点击了

if (Math.abs(up_x - Math.abs(startx)) < 2) {

//不在动画的时候可以点击

if (!isAnimate) {

startGO();

}

} else {

//2.没滑过中点

//滑到中间的x坐标

mid_x = (center + (rec_x - center) / 2);

if (smallCenter_x < mid_x) {

//最左

isRight = false;

smallCenter_x = center;

paint.setColor(Color.GRAY);

setEnabled(true);

invalidate();

} else {

//最右

isRight = true;

smallCenter_x = rec_x;

paint.setColor(Color.GREEN);

setEnabled(true);

invalidate();

}

}

//到了两端都有点击事件

if (smallCenter_x == rec_x || smallCenter_x == center) {

if (onClickListener != null) {

onClickListener.onClick(isRight);

}

}

break;

}

return true;

}

//提供方法调用

private void goLeft() {

isRight = false;

handler.sendEmptyMessageDelayed(TO_LEFT, 40);

}

private void goRight() {

isRight = true;

handler.sendEmptyMessageDelayed(TO_RIGHT, 40);

}

public void startGO() {

if (isRight) {

goLeft();

} else {

goRight();

}

}

}

代码中调用：

mbButton.setOnMbClickListener(new MyClickButton.OnMClickListener() {

@Override

public void onClick(boolean isRight) {

if (isRight){

Toast.makeText(weixinButtonActivity.this,"右",Toast.LENGTH_SHORT).show();

}else {

Toast.makeText(weixinButtonActivity.this,"左",Toast.LENGTH_SHORT).show();

}

}

}); 4.完事了