Android实现类似ios滑动按钮

没吃过猪肉，但也一定见过猪跑喽。IOS的滑动按钮菜单在UI设计里面绝对堪称一绝，在学习了Android的自定义view后，我萌生了模仿它的想法。





实现上面的模拟需要自定义一个View;

      1>在View的OnDraw里画出圆角矩形，分别为灰色圆角矩形，红色圆角矩形，和绿色圆角矩形。然后计算相应的位置。

       2>本例中的宽高比为1:0.65，内部红色矩形尺寸为外部矩形尺寸0.9，内部的圆的半径为外部高的0.45倍。按照这个比例计算相应的坐标。

       3>本例中的动画是用ValueAnimation实现的，具体实现在下部代码中。

       4>本例中的透明度实现方法和运动动画一样。

       5>自定义View为外部提供了读取和修改内部状态的接口。

具体代码如下，

1、界面的XML代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_switch_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.app_switchbutton.SwitchButtonActivity">

<com.example.app_switchbutton.switchbutton
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<com.example.app_switchbutton.switchbutton
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>

</RelativeLayout>

2、实现自定义view的java代码：

package com.example.app_switchbutton;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RadioButton;

/**
* Created by 尽途 on 2017/4/26.
*/

public class switchbutton extends View {
private int widthSize;
private int heightSize;
private boolean isOn=false;
private float WhiteRoundRect_width,WhiteRoundRect_height;
private float Circle_X,Circle_Y,WhiteRoundRect_X,WhiteRoundRect_Y;
private float Radius;
private float currentValue;
private int currentAlphaofGreen,currentAlphaofGray;
public switchbutton(Context context){
super(context);
}
public switchbutton(Context context, AttributeSet attributeSet){
super(context,attributeSet);
setLayerType(LAYER_TYPE_SOFTWARE,null);
initData();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
widthSize=MeasureSpec.getSize(widthMeasureSpec);
heightSize=(int)(widthSize*0.65f);
setMeasuredDimension(widthSize,heightSize);
initData();
}
void initData(){
if (isOn){
currentValue=widthSize-0.5f*heightSize;
currentAlphaofGreen=255;
currentAlphaofGray=0;
}
else {
currentValue=0.5f*heightSize;
currentAlphaofGreen=0;
currentAlphaofGray=255;
}
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isOn){
DrawBackGreenRoundRect(canvas);
DrawCircle(canvas);
}
else {
DrawBackGrayRoundRect(canvas);
DrawBackWhiteRoundRect(canvas);
DrawCircle(canvas);
}
}
private void DrawBackGrayRoundRect(Canvas canvas){
Paint paint0=new Paint();
paint0.setStyle(Paint.Style.FILL);
paint0.setColor(Color.GRAY);
paint0.setAntiAlias(true);
paint0.setAlpha(currentAlphaofGray);
RectF roundRect=new RectF(0,0,widthSize,heightSize);
canvas.drawRoundRect(roundRect,heightSize*0.5f,heightSize*0.5f,paint0);
}
private void DrawBackGreenRoundRect(Canvas canvas){
Paint paint1=new Paint();
paint1.setStyle(Paint.Style.FILL);
paint1.setColor(Color.GREEN);
paint1.setAntiAlias(true);
paint1.setAlpha(currentAlphaofGreen);
RectF roundRect=new RectF(0,0,widthSize,heightSize);
canvas.drawRoundRect(roundRect,heightSize*0.5f,heightSize*0.5f,paint1);
}
private void DrawCircle(Canvas canvas){
Circle_Y=heightSize*0.5f;
Radius=heightSize*0.45f;
Paint paint2=new Paint();
paint2.setStyle(Paint.Style.FILL);
paint2.setColor(Color.WHITE);
paint2.setAntiAlias(true);
canvas.drawCircle(currentValue,Circle_Y,Radius,paint2);
}
private void DrawBackWhiteRoundRect(Canvas canvas){
Paint paint3=new Paint();
paint3.setStyle(Paint.Style.FILL);
paint3.setColor(Color.RED);
paint3.setAntiAlias(true);
paint3.setAlpha(currentAlphaofGray);
WhiteRoundRect_X=heightSize*0.05f;
WhiteRoundRect_Y=heightSize*0.05f;
WhiteRoundRect_width=widthSize-0.05f*heightSize;
WhiteRoundRect_height=heightSize*0.95f;
RectF rectf=new RectF(WhiteRoundRect_X,WhiteRoundRect_Y,WhiteRoundRect_width,WhiteRoundRect_height);
canvas.drawRoundRect(rectf,WhiteRoundRect_height*0.5f,WhiteRoundRect_height*0.5f,paint3);
}

/**
* 添加了过渡值动画，实现了平缓运动
* @param startValue
* @param endValue
*/
private void setAnimation(float startValue,float endValue){
ValueAnimator valueAnimator=ValueAnimator.ofFloat(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentValue);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentValue=(float)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
private void setAlphaAnimationofGray(int startValue,int endValue){
ValueAnimator valueAnimator=ValueAnimator.ofInt(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentAlphaofGray);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentAlphaofGray=(int)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
private void setAlphaAnimationofGreen(int startValue,int endValue){
ValueAnimator valueAnimator=ValueAnimator.ofInt(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentAlphaofGreen);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentAlphaofGreen=(int)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
return true;
case MotionEvent.ACTION_MOVE:
return false;
case MotionEvent.ACTION_UP:
isOn=!isOn;
invalidate();
break;
default:
break;
}
if (isOn){
float startCircle_X=0.5f*heightSize;
float endCircle_X=widthSize-0.5f*heightSize;
setAnimation(startCircle_X,endCircle_X);
setAlphaAnimationofGray(255,0);
setAlphaAnimationofGreen(0,255);
}else {
float startCircle_X=widthSize-0.5f*heightSize;
float endCircle_X=heightSize*0.5f;
setAnimation(startCircle_X,endCircle_X);
setAlphaAnimationofGray(0,255);
setAlphaAnimationofGreen(255,0);

}
return super.onTouchEvent(event);
}
public void writeSwitchButtonState(boolean isOn){
this.isOn=isOn;
}
public boolean readSwitchButtonState(){
return isOn;
}
}

模仿的不是很到位，请大家见谅。