android仿ios开关按钮

最新推荐文章于 2022-10-12 16:53:16 发布
最新推荐文章于 2022-10-12 16:53:16 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： android Android自定义View 文章标签： 开关按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxc123e/article/details/52610850
版权

效果图
这里写图片描述

实现起来比较简单，直接上代码。

package com.chm.web.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.chm.web.R;

/**
 * Created by charmingfst on 2016/9/20.
 */
public class SlipButton extends View
{
    private boolean nowChoose = false;// 记录当前按钮是否打开,true为打开,flase为关闭

    private boolean onSlip = false;// 记录是否在滑动

    private float nowX;// 当前的x

    private OnChangedListener changeListener;

    private Bitmap bg_on, bg_off, slip_btn;

    public SlipButton(Context context)
    {
        super(context);
        init();
    }

    public SlipButton(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }

    public SlipButton(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init();
    }

    private void init()
    {// 初始化

        bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.split_left_1);
        bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.split_right_1);
        slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.dian);
//        Btn_On = new Rect(0, 0, slip_btn.getWidth(), slip_btn.getHeight());
//        Btn_Off = new Rect(bg_off.getWidth() - slip_btn.getWidth(), 0, bg_off.getWidth(),
//                slip_btn.getHeight());

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        setMeasuredDimension(bg_off.getWidth(), bg_off.getHeight());
        int width = measureDimension(bg_off.getWidth(), widthMeasureSpec);
        int height = measureDimension(bg_off.getHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }


    public int measureDimension(int expriedSize, int measureSpec){
        int result;

        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = expriedSize;   //UNSPECIFIED
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
    @Override
    protected void onDraw(Canvas canvas)
    {

        super.onDraw(canvas);

        Matrix matrix = new Matrix();
        Paint paint = new Paint();
        float x; //滑动点到左边的距离

        if (onSlip)// 是否是在滑动状态,

        {
            if (nowX < (bg_on.getWidth() / 2))// 滑动到前半段与后半段的背景不同,在此做判断
            {
                canvas.drawBitmap(bg_off, matrix, paint);// 画出关闭时的背景
            }
            else
            {
                canvas.drawBitmap(bg_on, matrix, paint);// 画出打开时的背景
            }

            //计算游标距离
            if (nowX >= bg_on.getWidth())// 是否划出指定范围,不能让游标跑到外头,必须做这个判断

                x = bg_on.getWidth() - slip_btn.getWidth() / 2;// 减去游标1/2的长度...

            else if (nowX < 0)
            {
                x = 0;
            }
            else
            {
                x = nowX - slip_btn.getWidth() / 2;
            }


        }
        else
        {// 非滑动状态

            if (nowChoose)// 根据现在的开关状态设置画游标的位置
            {
                x = bg_off.getWidth() - slip_btn.getWidth();
                canvas.drawBitmap(bg_on, matrix, paint);// 初始状态为true时应该画出打开状态图片
            }
            else
            {
                x = 0;
                canvas.drawBitmap(bg_off, matrix, paint);
            }
        }

        if (x < 0)// 对游标位置进行异常判断...
            x = 0;
        else if (x > bg_on.getWidth() - slip_btn.getWidth())
            x = bg_on.getWidth() - slip_btn.getWidth();
        canvas.drawBitmap(slip_btn, x, 0, paint);// 画出游标.

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
//        return super.onTouchEvent(event);
        switch (event.getAction())
        // 根据动作来执行代码

        {
            case MotionEvent.ACTION_MOVE:// 滑动
                nowX = event.getX();
                break;

            case MotionEvent.ACTION_DOWN:// 按下

                if (event.getX() > bg_on.getWidth() || event.getY() > bg_on.getHeight())
                    return false;
                onSlip = true;
                nowX = event.getX();
                break;

            case MotionEvent.ACTION_CANCEL: // 移到控件外部

                onSlip = false;
                boolean choose = nowChoose;
                if (nowX >= (bg_on.getWidth() / 2))
                {
//                    nowX = bg_on.getWidth() - slip_btn.getWidth() / 2;
                    nowChoose = true;
                }
                else
                {
                    nowX = nowX - slip_btn.getWidth() / 2;
                    nowChoose = false;
                }
                if (changeListener!=null && (choose != nowChoose)) // 调用监听方法
                    changeListener.onChanged(nowChoose);
                break;
            case MotionEvent.ACTION_UP:// 松开

                onSlip = false;
                boolean preChoose = nowChoose;

                if (event.getX() >= (bg_on.getWidth() / 2))
                {
//                    nowX = bg_on.getWidth() - slip_btn.getWidth() / 2;
                    nowChoose = true;
                }

                else
                {
                    nowX = nowX - slip_btn.getWidth() / 2;
                    nowChoose = false;
                }

                if (changeListener!=null && (preChoose != nowChoose)) // 调用监听方法
                    changeListener.onChanged(nowChoose);
                break;
            default:
        }
        invalidate();// 重画控件
        return true;
    }



    public void setOnChangedListener(OnChangedListener l)
    {
        changeListener = l;
    }

    public interface OnChangedListener
    {
        abstract void onChanged(boolean checkState);
    }

    public void setState(boolean isChecked)
    {
        nowChoose = isChecked;
        invalidate();
    }


    public boolean getState()
    {
        return this.nowChoose;
    }
}

下载地址：http://download.csdn.net/detail/zxc123e/9636210

下面修改一下，来做一个在滑动时按钮背景颜色会发生渐变的效果，参考前面的文章 仿微信6.x底部指示器渐变效果,实现代码如下：

package com.chm.web.view;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.chm.web.R;

/**
 * Created by charmingfst on 2016/9/20.
 */
public class SlipButton extends View
{
    private boolean nowChoose = false;// 记录当前按钮是否打开,true为打开,flase为关闭

    private boolean onSlip = false;// 记录是否在滑动

    private float nowX;// 当前的x

    private OnChangedListener changeListener;

    private Bitmap bg, slip_btn;

    private Canvas mCanvas;
    private Bitmap mBitmap;
    private Paint mPaint;
    private int mColor; //按钮开时的颜色

    private Rect mRect;

    public SlipButton(Context context)
    {
        super(context);
        init();
    }

    public SlipButton(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }

    public SlipButton(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init();
    }

    private void init()
    {// 初始化

        bg = BitmapFactory.decodeResource(getResources(), R.drawable.split_right_1);
        slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.dian);
        mColor = 0xff00ff00;
        mRect = new Rect(0,0, bg.getWidth(),bg.getHeight());

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        setMeasuredDimension(bg.getWidth(), bg.getHeight());
        int width = measureDimension(bg.getWidth(), widthMeasureSpec);
        int height = measureDimension(bg.getHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }


    public int measureDimension(int expriedSize, int measureSpec){
        int result;

        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = expriedSize;   //UNSPECIFIED
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
    @Override
    protected void onDraw(Canvas canvas)
    {

        super.onDraw(canvas);


        float x; //滑动点到左边的距离
        canvas.drawBitmap(bg,0,0, null);
        if (onSlip)// 是否是在滑动状态,
        {


            float ratio = nowX/(bg.getWidth() - slip_btn.getWidth() / 2);;
            int alpha = (int) (ratio*255);
            if (alpha >= 0 && alpha<=255)
            {
                setTargetBitmap(alpha);

            }
            canvas.drawBitmap(mBitmap, 0, 0, null);

            //计算游标距离
            if (nowX >= bg.getWidth())// 是否划出指定范围,不能让游标跑到外头,必须做这个判断

                x = bg.getWidth() - slip_btn.getWidth() / 2;// 减去游标1/2的长度...

            else if (nowX < 0)
            {
                x = 0;
            }
            else
            {
                x = nowX - slip_btn.getWidth() / 2;
            }


        }
        else
        {// 非滑动状态

            if (nowChoose)// 根据现在的开关状态设置画游标的位置
            {
                x = bg.getWidth() - slip_btn.getWidth();
                setTargetBitmap(255);

            }
            else
            {
                x = 0;
                setTargetBitmap(0);
            }
            canvas.drawBitmap(mBitmap, 0, 0, null);

        }

        if (x < 0)// 对游标位置进行异常判断...
            x = 0;
        else if (x > bg.getWidth() - slip_btn.getWidth())
            x = bg.getWidth() - slip_btn.getWidth();
        canvas.drawBitmap(slip_btn, x, 0, null);// 画出游标.

    }

    private void setTargetBitmap(int alpha) {
        mBitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        //以bitmap对象创建一个画布，则将内容都绘制在bitmap上，bitmap不得为null;
        mCanvas = new Canvas((mBitmap));
        mPaint = new Paint();
        mPaint.setColor(mColor);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true); //设置防抖动,效果更柔和
        mPaint.setAlpha(alpha);
        mCanvas.drawRect(mRect,mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mPaint.setAlpha(255);
        mCanvas.drawBitmap(bg,null,mRect,mPaint);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
//        return super.onTouchEvent(event);
        switch (event.getAction())
        // 根据动作来执行代码

        {
            case MotionEvent.ACTION_MOVE:// 滑动
                nowX = event.getX();
                break;

            case MotionEvent.ACTION_DOWN:// 按下

                if (event.getX() > bg.getWidth() || event.getY() > bg.getHeight())
                    return false;
                onSlip = true;
                nowX = event.getX();
                break;

            case MotionEvent.ACTION_CANCEL: // 移到控件外部

                onSlip = false;
                return true;
            case MotionEvent.ACTION_UP:// 松开

                onSlip = false;
                boolean preChoose = nowChoose;
                nowX = event.getX();
                if (event.getX() >= (bg.getWidth() / 2))
                {
                    nowChoose = true;
                }
                else
                {
                    nowChoose = false;
                }

                if (changeListener!=null && (preChoose != nowChoose)) // 调用监听方法
                    changeListener.onChanged(nowChoose);
                break;
            default:
        }
        invalidate();// 重画控件
        return true;
    }



    public void setOnChangedListener(OnChangedListener l)
    {
        changeListener = l;
    }

    public interface OnChangedListener
    {
        abstract void onChanged(boolean checkState);
    }

    public void setState(boolean isChecked)
    {
        nowChoose = isChecked;
        invalidate();
    }


    public boolean getState()
    {
        return this.nowChoose;
    }
}
zxc123e
关注
专栏目录
Android View 仿iOS SwitchButton [Material Design]
bfbx5173的专栏
04-22 1万+
自学android差不多有一年了，从最初的小白菜鸟，摸爬滚打，看大神们的博客，android官网的api，某网站的视频教学，github开源项目。奋斗这么久隐隐感觉自己可以脱离新手的身份了，交出这篇文章权当作andriod小学水准的毕业典礼。 iOS SwitchButton。 说实话功能也不过就个开关功能而已。但是为什么让人感觉不错，因为效果看起来赏心悦目呀： 好了，为了实现它，首先要分析它。 这个按钮被我玩来玩去最后静止的时候都会停留在下面的样子： 那么怎么把这个实现出来呢？观察一番会发现上图是极
android 仿ios滑动开关按钮
09-16
该demo是仿照ios里面的滑动开关，希望与大家一起研究探讨
Android自定义控件【仿IOS开关】
02-09
Android自定义控件【仿IOS开关】，学习Android自定义控件。
android实现仿ios开关按钮
05-10
android实现仿ios开关按钮，绝对好用
Android 高仿ios开关,Android 高仿IOS打开和关闭按钮
最新发布
weixin_44910912的博客
10-12 1019
Android 高仿ios开关,Android 高仿IOS打开和关闭按钮。
Android自定义控件——仿ios开关按钮
Vincent的专栏
09-16 8579
大凡在公司做客户端产品开发的都会发现，android和ios的差异化，ios得益于“老乔”的精心设计，界面用户体验做到了极致，而android秉承开源思想，界面用户体验百家各有其长，相互不得统一。不说废话，先上图，看看ios的“开关按钮”
最完美的android仿ios开关按钮
09-02
博主认为这是最完美的android仿ios开关按钮，谢谢。
android 高仿ios开关,android仿ios开关Switch
weixin_30538719的博客
05-25 257
先看效果图(实际效果很丝滑！)GIF 2020-6-10 19-17-21.gif代码没太整理，将就看哈，可以自行调整修改。public class OnOffView extends FrameLayout implements View.OnClickListener {private static String TAG = "OnOffView";private int onColor = ...
安卓android各种开关包括仿ios开关样式switchbuttondemo
04-08
安卓android各种开关包括仿ios开关样式switchbuttondemo
Android 仿苹果IOS6开关按钮
09-01
主要介绍了Android 仿苹果IOS6开关按钮的实现代码,代码简单易懂非常不错具有参考借鉴价值，需要的朋友可以参考下
Android仿ios滑动开关以及Material效果的滑动开关
06-09
模仿ios的滑动开关，以及实现Material效果的滑动开关
android 仿ios风格的SwitchButton
04-07
android 仿ios风格的SwitchButton， 关注博客http://himici.com/
android 高仿ios开关,Android 仿苹果IOS6开关按钮
weixin_29762229的博客
05-25 575
先给大家展示下效果图：不知道大家对效果图感觉怎么样，个人觉还不错，感兴趣的朋友可以参考下实现代码哦。public class ToggleButton extends View {private SpringSystem springSystem;private Spring spring ;/** */private float radius;/** 开启颜色*/private int onCo...
android 高仿ios开关,Android自定义view仿IOS开关效果
weixin_33256627的博客
05-25 844
本文主要讲解如何在 Android 下实现高仿 iOS 的开关按钮，并非是在 Android 自带的 ToggleButton 上修改，而是使用 API 提供的 onDraw、onMeasure、Canvas 方法，纯手工绘制。基本原理就是在 Canvas 上叠着放两张图片，上面的图片根据手指触摸情况，不断移动，实现开关效果。废话不说,上效果图,看看怎么样样式如下:网上也有实现这种效果的，但是大都...
SwitchButton 开关按钮 的多种实现方式 （附源码DEMO）
xumingrencai
04-15 2339
刚开始接触开关样式的按钮是在IOS系统上面，它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮，就是只有2个状态：on和off，下图就是系统IOS 7上开关按钮效果。 起初我在android上我只会使用CheckBox去满足对应的功能。后来，查看开发文档发现，android也有了自己的原生态开关控件，并且在4.0版本中又优化加入了新的类似控件--Switch控件，以及使用起来十分简单的T...
Android简单粗暴实现IOS按钮(代码极少易理解)
Xie Tiansheng的博客
05-12 430
Android简单实现IOS按钮（动画效果） 标题上写漏的还有一个自己加上的回弹效果 网上类似的贴子很多，由于自己项目需要用到，所以花了点时间写了个稍稍简单点的，代码量也不是很多 先来看看效果图 有回弹效果 无回弹效果 再来看一下这个尺寸的回弹效果 分析一下个人的思路 1.背景 我这里能想到的是先画一个左边的半圆，接着中间一个矩形，最后右边再来个半...
Android 仿iOS 开关SwitchButton
柳的博客
01-03 687
iOS SwitchButton。  说实话功能也不过就个开关功能而已。但是为什么让人感觉不错，因为效果看起来赏心悦目呀： ~~~~~~~~~~
android 仿ios开关控件
weixin_34253126的博客
07-25 163
ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android开发者来照着做,今天就来做一个设置中常见的开关效果, 思路： 1：准备二张图片 一个是包括开和关二种状态的图片,一个是上面滑动的button图片 2：这些图片肯定是不能通过原生态的控件显...
Android 实现苹果IOS6风格开关按钮教程
在 Android 中，要实现一个仿苹果 iOS 6 开关按钮，我们可以创建一个新的自定义 View 类，这里名为 ToggleButton。这个类会包含必要的属性和方法来绘制开关按钮，并处理触摸事件以改变开关状态。 首先，我们看到 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值