热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android实现类似ios滑动按钮

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

<&#63;xml version="1.0" encoding="utf-8"&#63;>

 
  
  
 

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;
  }
}

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

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


推荐阅读
  • Vue 2 中解决页面刷新和按钮跳转导致导航栏样式失效的问题
    本文介绍了如何通过配置路由的 meta 字段,确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时,始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性,并在 HTML 模板中动态绑定类名。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
author-avatar
再见看淡_266
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有