Android实现类似ios滑动按钮

更新时间：2020年08月20日 11:03:41 作者：番茄炒蛋不要蛋

这篇文章主要为大家详细介绍了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;
  }
}

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

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

您可能感兴趣的文章:

Android Studio下添加assets目录的实现方法
下面小编就为大家带来一篇Android Studio下添加assets目录的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Andriod arcgis保存Mapview为图片的实例代码
这篇文章主要介绍了Andriod arcgis保存Mapview为图片的实例代码的相关资料,需要的朋友可以参考下
2016-03-03
Android控件之菜单的创建方式
本文给大家分享android控件菜单的两种创建方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-09
Android BSearchEdit 搜索结果选择框的实例代码
EditText搜索结果下拉框、自动or回调模式、可diy、使用超简便。这篇文章主要介绍了Android BSearchEdit 搜索结果选择框的实例代码,需要的朋友可以参考下
2019-10-10
Android用ListView显示SDCard文件列表的小例子
本文简单实现了用ListView显示SDCard文件列表，目录的回退等功能暂不讨论，获取文件列表，files即为所选择目录下的所有文件列表
2013-11-11
Android 环境变量的配置方法
本文主要介绍Android 环境变量的配置方法，这里详细讲解了如何实现环境变量的配置方法,有兴趣的小伙伴可以参考下
2016-09-09
Android使用ViewPager实现滚动广告
这篇文章主要为大家详细介绍了Android使用ViewPager实现滚动广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
Android Studio实现注册页面跳转登录页面的创建
这篇文章主要为大家详细介绍了Android Studio实现注册页面跳转登录页面的创建，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
Android四种常见布局方式示例教程
Android四种布局有线性布局LinearLayout、相对布局RelativeLayout、网格布局GridLayout、和滚动视图ScrollView，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
android使用gesturedetector手势识别示例分享
这篇文章主要介绍了android使用手势识别的方法，介绍了单击触摸屏触发的事件和双击事件的使用等方法，大家参考使用吧
2014-01-01

Android实现类似ios滑动按钮

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具