github地址：LikeWeChatSwitchButton
首先我们来看一下微信中switchButton的效果, 就是下图那个样子, 打开微信玩一下就知道了。
Screenshot_20170404-171429.png
惯例, 先上实现的效果
switchbutton.gif
接下来, 我就说明如何一步步实现这个效果控件。
1.定义背景和中间圆球的颜色
public class SwitchButton extends View {
public SwitchButton(Context context) {
this(context, null);
}
public SwitchButton(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SwitchButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SwitchView, defStyleAttr, R.style.def_switch_view);
int indexCount = typedArray.getIndexCount();
for (int i = 0; i < indexCount; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.SwitchView_switch_bg_color:
//背景颜色
switchViewBgColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.SwitchView_switch_ball_color:
//圆球颜色
switchViewBallColor = typedArray.getColor(attr, Color.BLACK);
break;
}
}
typedArray.recycle();
initData();
}
}
在这里， 背景颜色和圆球颜色是从自定义属性中取的， 如果没有定义， 就取默认的颜色。
2.初始化一些东西， 比如创建两个画笔
private void initData() {
mBallPaint = createPaint(switchViewBallColor, 0, Paint.Style.FILL, 0);
mBgPaint = createPaint(switchViewBgColor, 0, Paint.Style.FILL, 0);
...
}
3.在onSizeChanged方法里定义一些长度和宽度
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
mViewHeight = h;
mViewWidth = w;
// 默认描边宽度是控件宽度的1/30, 比如控件宽度是120dp, 描边宽度就是4dp
switchViewStrockWidth = w * 1.0f / 30;
mStrokeRadius = mViewHeight / 2;
mSolidRadius = (mViewHeight - 2 * switchViewStrockWidth) / 2;
BALL_X_RIGHT = mViewWidth - mStrokeRadius;
mSwitchBallx = mStrokeRadius;
mBgStrokeRectF = new RectF(0, 0, mViewWidth, mViewHeight);
}
在这里， 定义了圆球的半径， 圆球中心的初始x坐标， 和用来画圆角矩形的矩形， 特别注意这里的switchViewStrockWidth指的是如下图这段
Paste_Image.png
4.在onMeasure方法里定义控件的宽度和高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureWidth;
int measureHeight;
switch (widthMode) {
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST://wrap_content
measureWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_W, getResources().getDisplayMetrics());
widthMeasureSpec = MeasureSpec.makeMeasureSpec(measureWidth, MeasureSpec.EXACTLY);
break;
case MeasureSpec.EXACTLY:
break;
}
switch (heightMode) {
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST://wrap_content
measureHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_H, getResources().getDisplayMetrics());
heightMeasureSpec = MeasureSpec.makeMeasureSpec(measureHeight, MeasureSpec.EXACTLY);
break;
case MeasureSpec.EXACTLY:
break;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
这里默认高是60dp, 高是120dp, 自己定义时最好也按照这个比例， 否则会显得不和谐
5.这里是最重要的， 在onDraw方法里画背景和圆球
@Override
protected void onDraw(Canvas canvas) {
drawSwitchBg(canvas);
drawSwitchBall(canvas);
}
private void drawSwitchBall(Canvas canvas) {
canvas.drawCircle(mSwitchBallx, mStrokeRadius, mSolidRadius, mBallPaint);
}
private void drawSwitchBg(Canvas canvas) {
canvas.drawRoundRect(mBgStrokeRectF, mStrokeRadius, mStrokeRadius, mBgPaint);
}
到这里的时候， 就能看到画好的背景和圆球了， 但却是静态的， 还不能动
6.定义枚举变量， 用来记录开关的状态
private enum State {
OPEN, CLOSE
}
private State mCurrentState;
7.当button被点击时， 改变圆球的x坐标和背景画笔的颜色， 调用invalidate重绘界面
设置点击事件
private void initData() {
...
setOnClickListener(this);
}
在 onClick方法里
@Override
public void onClick(View v) {
mCurrentState = (mCurrentState == State.CLOSE ? State.OPEN : State.CLOSE);
//绿色 #1AAC19
//灰色 #999999
if (mCurrentState == State.CLOSE) {
animate(BALL_X_RIGHT, mStrokeRadius, greenColor, greyColor);
} else {
animate(mStrokeRadius, BALL_X_RIGHT, greyColor, greenColor);
}
if (mOnCheckedChangeListener != null) {
if (mCurrentState == State.OPEN) {
mOnCheckedChangeListener.onCheckedChanged(this, true);
} else {
mOnCheckedChangeListener.onCheckedChanged(this, false);
}
}
}
private void animate(int from, int to, int startColor, int endColor) {
ValueAnimator translate = ValueAnimator.ofFloat(from, to);
translate.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSwitchBallx = ((float) animation.getAnimatedValue());
postInvalidate();
}
});
ValueAnimator color = ValueAnimator.ofObject(new ColorEvaluator(), startColor, endColor);
color.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
switchViewBgColor = ((int) animation.getAnimatedValue());
mBgPaint.setColor(switchViewBgColor);
postInvalidate();
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(translate, color);
animatorSet.setDuration(200);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
setClickable(false);
}
@Override
public void onAnimationEnd(Animator animation) {
setClickable(true);
}
});
animatorSet.start();
}
需要说明的是， 这里的难点在于如何让圆球和x坐标在指定时间内圆滑地变换到另一个值， 以及如何让颜色如何从灰色圆滑地变换到绿色。这里我使用的是值动画（因为暂时没有想到更好的方法）。坐标值的变换比较简单。颜色变化这里用到了估值器ArgbEvaluator
8.暴露接口获取开关的状态
这里我就不贴代码了， 很简单的
总的来说， 还是挺简单的, 也就200多行代码。参考demo: ATDragViewDemo
Paste_Image.png
