Android实现类似ios滑动按钮

2023-07-18 12:06:03 70

IOS的滑动按钮菜单在UI设计里面绝对堪称一绝，在学习了Android的自定义view后，我萌生了模仿它的想法。

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

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

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

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

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

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

具体代码如下，

1、界面的XML代码：

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

packagecom.example.app_switchbutton;

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

/**
*Createdby尽途on2017/4/26.
*/

publicclassswitchbuttonextendsView{
privateintwidthSize;
privateintheightSize;
privatebooleanisOn=false;
privatefloatWhiteRoundRect_width,WhiteRoundRect_height;
privatefloatCircle_X,Circle_Y,WhiteRoundRect_X,WhiteRoundRect_Y;
privatefloatRadius;
privatefloatcurrentValue;
privateintcurrentAlphaofGreen,currentAlphaofGray;
publicswitchbutton(Contextcontext){
super(context);
}
publicswitchbutton(Contextcontext,AttributeSetattributeSet){
super(context,attributeSet);
setLayerType(LAYER_TYPE_SOFTWARE,null);
initData();
}

@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
widthSize=MeasureSpec.getSize(widthMeasureSpec);
heightSize=(int)(widthSize*0.65f);
setMeasuredDimension(widthSize,heightSize);
initData();
}
voidinitData(){
if(isOn){
currentValue=widthSize-0.5f*heightSize;
currentAlphaofGreen=255;
currentAlphaofGray=0;
}
else{
currentValue=0.5f*heightSize;
currentAlphaofGreen=0;
currentAlphaofGray=255;
}
}

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
if(isOn){
DrawBackGreenRoundRect(canvas);
DrawCircle(canvas);
}
else{
DrawBackGrayRoundRect(canvas);
DrawBackWhiteRoundRect(canvas);
DrawCircle(canvas);
}
}
privatevoidDrawBackGrayRoundRect(Canvascanvas){
Paintpaint0=newPaint();
paint0.setStyle(Paint.Style.FILL);
paint0.setColor(Color.GRAY);
paint0.setAntiAlias(true);
paint0.setAlpha(currentAlphaofGray);
RectFroundRect=newRectF(0,0,widthSize,heightSize);
canvas.drawRoundRect(roundRect,heightSize*0.5f,heightSize*0.5f,paint0);
}
privatevoidDrawBackGreenRoundRect(Canvascanvas){
Paintpaint1=newPaint();
paint1.setStyle(Paint.Style.FILL);
paint1.setColor(Color.GREEN);
paint1.setAntiAlias(true);
paint1.setAlpha(currentAlphaofGreen);
RectFroundRect=newRectF(0,0,widthSize,heightSize);
canvas.drawRoundRect(roundRect,heightSize*0.5f,heightSize*0.5f,paint1);
}
privatevoidDrawCircle(Canvascanvas){
Circle_Y=heightSize*0.5f;
Radius=heightSize*0.45f;
Paintpaint2=newPaint();
paint2.setStyle(Paint.Style.FILL);
paint2.setColor(Color.WHITE);
paint2.setAntiAlias(true);
canvas.drawCircle(currentValue,Circle_Y,Radius,paint2);
}
privatevoidDrawBackWhiteRoundRect(Canvascanvas){
Paintpaint3=newPaint();
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;
RectFrectf=newRectF(WhiteRoundRect_X,WhiteRoundRect_Y,WhiteRoundRect_width,WhiteRoundRect_height);
canvas.drawRoundRect(rectf,WhiteRoundRect_height*0.5f,WhiteRoundRect_height*0.5f,paint3);
}

/**
*添加了过渡值动画，实现了平缓运动
*@paramstartValue
*@paramendValue
*/
privatevoidsetAnimation(floatstartValue,floatendValue){
ValueAnimatorvalueAnimator=ValueAnimator.ofFloat(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentValue);
valueAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
currentValue=(float)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
privatevoidsetAlphaAnimationofGray(intstartValue,intendValue){
ValueAnimatorvalueAnimator=ValueAnimator.ofInt(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentAlphaofGray);
valueAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
currentAlphaofGray=(int)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
privatevoidsetAlphaAnimationofGreen(intstartValue,intendValue){
ValueAnimatorvalueAnimator=ValueAnimator.ofInt(startValue,endValue);
valueAnimator.setDuration(1500);
valueAnimator.setTarget(currentAlphaofGreen);
valueAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
currentAlphaofGreen=(int)animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
@Override
publicbooleanonTouchEvent(MotionEventevent){
switch(event.getAction()){
caseMotionEvent.ACTION_DOWN:
returntrue;
caseMotionEvent.ACTION_MOVE:
returnfalse;
caseMotionEvent.ACTION_UP:
isOn=!isOn;
invalidate();
break;
default:
break;
}
if(isOn){
floatstartCircle_X=0.5f*heightSize;
floatendCircle_X=widthSize-0.5f*heightSize;
setAnimation(startCircle_X,endCircle_X);
setAlphaAnimationofGray(255,0);
setAlphaAnimationofGreen(0,255);
}else{
floatstartCircle_X=widthSize-0.5f*heightSize;
floatendCircle_X=heightSize*0.5f;
setAnimation(startCircle_X,endCircle_X);
setAlphaAnimationofGray(0,255);
setAlphaAnimationofGreen(255,0);

}
returnsuper.onTouchEvent(event);
}
publicvoidwriteSwitchButtonState(booleanisOn){
this.isOn=isOn;
}
publicbooleanreadSwitchButtonState(){
returnisOn;
}
}

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android实现类似ios滑动按钮

热门推荐

随机推荐