Android自定义的SwitchButton按钮，自己喜欢的风格

最新推荐文章于 2024-02-29 15:42:53 发布
最新推荐文章于 2024-02-29 15:42:53 发布
阅读量3.5k 收藏
点赞数
分类专栏： Android 文章标签： android开发 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012386435/article/details/52251556
版权

效果图如图所示：

注解：此方法类 是本人在网上找的。并非本人的，拿来自己修改就直接用了
import me.imid.movablecheckbox.R;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.view.ViewParent;
import android.widget.CheckBox;

public class SwitchButton extends CheckBox {
    private Paint mPaint;

    private ViewParent mParent;

    private Bitmap mBottom;

    private Bitmap mCurBtnPic;

    private Bitmap mBtnPressed;

    private Bitmap mBtnNormal;

    private Bitmap mFrame;

    private Bitmap mMask;

    private RectF mSaveLayerRectF;

    private PorterDuffXfermode mXfermode;

    private float mFirstDownY; // 首次按下的Y

    private float mFirstDownX; // 首次按下的X

    private float mRealPos; // 图片的绘制位置

    private float mBtnPos; // 按钮的位置

    private float mBtnOnPos; // 开关打开的位置

    private float mBtnOffPos; // 开关关闭的位置

    private float mMaskWidth;

    private float mMaskHeight;

    private float mBtnWidth;

    private float mBtnInitPos;

    private int mClickTimeout;

    private int mTouchSlop;

    private final int MAX_ALPHA = 255;

    private int mAlpha = MAX_ALPHA;

    private boolean mChecked = false;

    private boolean mBroadcasting;

    private boolean mTurningOn;

    private PerformClick mPerformClick;

    private OnCheckedChangeListener mOnCheckedChangeListener;

    private OnCheckedChangeListener mOnCheckedChangeWidgetListener;

    private boolean mAnimating;

    private final float VELOCITY = 350;

    private float mVelocity;

    private final float EXTENDED_OFFSET_Y = 15;

    private float mExtendOffsetY; // Y轴方向扩大的区域,增大点击区域

    private float mAnimationPosition;

    private float mAnimatedVelocity;

    public SwitchButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.checkboxStyle);
    }

    public SwitchButton(Context context) {
        this(context, null);
    }

    public SwitchButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }

    private void initView(Context context) {
        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        Resources resources = context.getResources();

        // get viewConfiguration
        mClickTimeout = ViewConfiguration.getPressedStateDuration()
                + ViewConfiguration.getTapTimeout();
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

        // get Bitmap
        mBottom = BitmapFactory.decodeResource(resources, R.drawable.bottom);
        mBtnPressed = BitmapFactory.decodeResource(resources, R.drawable.btn_pressed);
        mBtnNormal = BitmapFactory.decodeResource(resources, R.drawable.btn_unpressed);
        mFrame = BitmapFactory.decodeResource(resources, R.drawable.frame);
        mMask = BitmapFactory.decodeResource(resources, R.drawable.mask);
        mCurBtnPic = mBtnNormal;

        mBtnWidth = mBtnPressed.getWidth();
        mMaskWidth = mMask.getWidth();
        mMaskHeight = mMask.getHeight();

        mBtnOffPos = mBtnWidth / 2;
        mBtnOnPos = mMaskWidth - mBtnWidth / 2;

        mBtnPos = mChecked ? mBtnOnPos : mBtnOffPos;
        mRealPos = getRealPos(mBtnPos);

        final float density = getResources().getDisplayMetrics().density;
        mVelocity = (int) (VELOCITY * density + 0.5f);
        mExtendOffsetY = (int) (EXTENDED_OFFSET_Y * density + 0.5f);

        mSaveLayerRectF = new RectF(0, mExtendOffsetY, mMask.getWidth(), mMask.getHeight()
                + mExtendOffsetY);
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    }

    @Override
    public void setEnabled(boolean enabled) {
        mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA / 2;
        super.setEnabled(enabled);
    }

    public boolean isChecked() {
        return mChecked;
    }

    public void toggle() {
        setChecked(!mChecked);
    }

    /**
     * 内部调用此方法设置checked状态，此方法会延迟执行各种回调函数，保证动画的流畅度
     * 
     * @param checked
     */
    private void setCheckedDelayed(final boolean checked) {
        this.postDelayed(new Runnable() {

            @Override
            public void run() {
                setChecked(checked);
            }
        }, 10);
    }

    /**
     * <p>
     * Changes the checked state of this button.
     * </p>
     * 
     * @param checked true to check the button, false to uncheck it
     */
    public void setChecked(boolean checked) {

        if (mChecked != checked) {
            mChecked = checked;

            mBtnPos = checked ? mBtnOnPos : mBtnOffPos;
            mRealPos = getRealPos(mBtnPos);
            invalidate();

            // Avoid infinite recursions if setChecked() is called from a
            // listener
            if (mBroadcasting) {
                return;
            }

            mBroadcasting = true;
            if (mOnCheckedChangeListener != null) {
                mOnCheckedChangeListener.onCheckedChanged(SwitchButton.this, mChecked);
            }
            if (mOnCheckedChangeWidgetListener != null) {
                mOnCheckedChangeWidgetListener.onCheckedChanged(SwitchButton.this, mChecked);
            }

            mBroadcasting = false;
        }
    }

    /**
     * Register a callback to be invoked when the checked state of this button
     * changes.
     * 
     * @param listener the callback to call on checked state change
     */
    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeListener = listener;
    }

    /**
     * Register a callback to be invoked when the checked state of this button
     * changes. This callback is used for internal purpose only.
     * 
     * @param listener the callback to call on checked state change
     * @hide
     */
    void setOnCheckedChangeWidgetListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeWidgetListener = listener;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        float y = event.getY();
        float deltaX = Math.abs(x - mFirstDownX);
        float deltaY = Math.abs(y - mFirstDownY);
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                attemptClaimDrag();
                mFirstDownX = x;
                mFirstDownY = y;
                mCurBtnPic = mBtnPressed;
                mBtnInitPos = mChecked ? mBtnOnPos : mBtnOffPos;
                break;
            case MotionEvent.ACTION_MOVE:
                float time = event.getEventTime() - event.getDownTime();
                mBtnPos = mBtnInitPos + event.getX() - mFirstDownX;
                if (mBtnPos >= mBtnOffPos) {
                    mBtnPos = mBtnOffPos;
                }
                if (mBtnPos <= mBtnOnPos) {
                    mBtnPos = mBtnOnPos;
                }
                mTurningOn = mBtnPos > (mBtnOffPos - mBtnOnPos) / 2 + mBtnOnPos;

                mRealPos = getRealPos(mBtnPos);
                break;
            case MotionEvent.ACTION_UP:
                mCurBtnPic = mBtnNormal;
                time = event.getEventTime() - event.getDownTime();
                if (deltaY < mTouchSlop && deltaX < mTouchSlop && time < mClickTimeout) {
                    if (mPerformClick == null) {
                        mPerformClick = new PerformClick();
                    }
                    if (!post(mPerformClick)) {
                        performClick();
                    }
                } else {
                    startAnimation(!mTurningOn);
                }
                break;
        }

        invalidate();
        return isEnabled();
    }

    private final class PerformClick implements Runnable {
        public void run() {
            performClick();
        }
    }

    @Override
    public boolean performClick() {
        startAnimation(!mChecked);
        return true;
    }

    /**
     * Tries to claim the user's drag motion, and requests disallowing any
     * ancestors from stealing events in the drag.
     */
    private void attemptClaimDrag() {
        mParent = getParent();
        if (mParent != null) {
            mParent.requestDisallowInterceptTouchEvent(true);
        }
    }

    /**
     * 将btnPos转换成RealPos
     * 
     * @param btnPos
     * @return
     */
    private float getRealPos(float btnPos) {
        return btnPos - mBtnWidth / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.saveLayerAlpha(mSaveLayerRectF, mAlpha, Canvas.MATRIX_SAVE_FLAG
                | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
                | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);
        // 绘制蒙板
        canvas.drawBitmap(mMask, 0, mExtendOffsetY, mPaint);
        mPaint.setXfermode(mXfermode);

        // 绘制底部图片
        canvas.drawBitmap(mBottom, mRealPos, mExtendOffsetY, mPaint);
        mPaint.setXfermode(null);
        // 绘制边框
        canvas.drawBitmap(mFrame, 0, mExtendOffsetY, mPaint);

        // 绘制按钮
        canvas.drawBitmap(mCurBtnPic, mRealPos, mExtendOffsetY, mPaint);
        canvas.restore();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension((int) mMaskWidth, (int) (mMaskHeight + 2 * mExtendOffsetY));
    }

    private void startAnimation(boolean turnOn) {
        mAnimating = true;
        mAnimatedVelocity = turnOn ? -mVelocity : mVelocity;
        mAnimationPosition = mBtnPos;

        new SwitchAnimation().run();
    }

    private void stopAnimation() {
        mAnimating = false;
    }

    private final class SwitchAnimation implements Runnable {

        @Override
        public void run() {
            if (!mAnimating) {
                return;
            }
            doAnimation();
            FrameAnimationController.requestAnimationFrame(this);
        }
    }

    private void doAnimation() {
        mAnimationPosition += mAnimatedVelocity * FrameAnimationController.ANIMATION_FRAME_DURATION
                / 1000;
        if (mAnimationPosition <= mBtnOnPos) {
            stopAnimation();
            mAnimationPosition = mBtnOnPos;
            setCheckedDelayed(true);
        } else if (mAnimationPosition >= mBtnOffPos) {
            stopAnimation();
            mAnimationPosition = mBtnOffPos;
            setCheckedDelayed(false);
        }
        moveView(mAnimationPosition);
    }

    private void moveView(float position) {
        mBtnPos = position;
        mRealPos = getRealPos(mBtnPos);
        invalidate();
    }
}

SwitchButton switchButton=new SwitchButton();
new一个这个类的对象 接下来就是自己设置属性和监听 实现自己所需要的方法 即可。
下面是用到的图片：


暴走的辣子皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android入门第16天-Android里的SwitchButton的使用
lifetragedy的专栏
11-09 1635
SwitchButton是个什么样的东西呢？其实它就是一个开关，本篇将详尽介绍SwitchButton的使用。
android SwitchButton 滑动开关按钮
03-07
自定义滑动开关按钮，可左右滑动切换开关状态，也可点击切换。与iPhone的开关组件效果一样。
安卓轻量级选择按钮——SwitchButton
莫言情难忘的博客
12-10 1万+
一个美丽的轻量级的选择按钮，也是我常用的排第二选择按钮 因为简单，所以，直接上手吧 1.Project 的build.gradle中添加 mavenCentral() jcenter() 在Module:app中添加依赖 2.代码 xml中其代码为 &lt;com.suke.widget.SwitchButton android:id...
Android 开关控件Switch使用
热门推荐
心田祭思博客
06-29 5万+
相关属性 android:showText：设置on/off的时候是否显示文字,boolean android:splitTrack：是否设置一个间隙，让滑块与底部图片分隔,boolean android:switchMinWidth：设置开关的最小宽度 android:switchPadding：设置滑块内文字的间隔 android:switchTextAppearance：设...
Android 自定义 Switch （使用selector实现）
m0_73545408的博客
02-29 908
可以通过定义switch的thumb（滑块）和track（轨道）的图片来达到自定义switch样式的目的，现把相关的步骤记录下来，然后用选择器selector来实现switch的不同状态，来加载不同的drawable文件。5.创建switch_custom_thumb_selector.xml。6.创建switch_custom_track_selector.xml。2.创建switch_custom_thumb_off.xml。4.创建switch_custom_track_off.xml。
SwitchButton（原ToggleButton）
Android小飞の博客
12-08 634
样式图： gradle绑定: repositories { mavenCentral() jcenter() } ... dependencies { compile 'com.github.zcweng:switch-button:0.0.3@aar' } 布局使用: LinearLayout xmlns:android="http:
Android第三方开源SwitchButton
weixin_34308389的博客
06-21 355
Android第三方开源SwitchButton Android SwitchButton是github上的一个第三方开源项目，其项目主页是：https://github.com/kyleduo/SwitchButton Android平台上的Switch Button样式单一，SwitchButton旨在丰富Android平台的Switch样式的Button，其实现的结果如...
android自定义选择开关switchButton
09-14
自定义效果的选择开关，可以实现滑动改变开关状态，xml中设置开关状态，代码中动态改变和监听开关的状态等效果
安卓 android 自定义 switch button，滑动开关
09-19
安卓 android 自定义 switch button，滑动开关，绝对漂亮美观
Android - SwitchButton 开关按钮 的多种实现方式 （源码）
最新发布
04-16
重写CompoundButton控件实现带... 由于DEMO中的继承CompoundButton的SwitchButton是使用自定义配置的，所以如果不了解自定义配置的可以看以下文章：android 自定义控件 使用declare-styleable进行配置属性（源码角度）
android switchButton
11-18
一个仿iPhone的开关。特别好用。支持点击自动滚动、触摸后自动滚动、回调监听、样式自定义。
Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）
01-05
做IOS开发的都知道，IOS提供了一个具有...顾客是上帝……)，其中的设置功能中就有开关按钮，原来的开关做的是两幅图片，通过点击图片来给开关设置不同的状态图片，但是这种效果很死板和程序的整体风格不太协调，于是就
安卓UI:Switch和ToggleButton
A125679880的博客
07-15 2234
安卓 Switch 是一个常用的开关控件，用于在两个互斥的状态（开/关）之间进行切换。Switch 继承自 CompoundButton 类，可以在用户界面中显示一个开关按钮，并且可以处理用户的点击事件。它由一个可滑动的滑块和一个表示开/关状态的文本组成。Switch 在布局中被定义为标签。可以通过编程方式设置其属性，也可以使用 XML 属性进行配置。
Android 自定义控件之 SwitchButton(仿 iOS 开关)
禽兽先生不禽兽
06-10 4818
上图中的按钮是 iOS 中的自带的开关控件，Android 也有很多优秀的仿这个控件的开源库，自己也是模仿着实现了一下，下面记录一下实现过程。 1 思路 首先还是来进行分解动作，从静态样子来看，这个开关是一个圆角矩形的背景，然后中间有一个圆形的东西（姑且叫做按钮指示器）。点击该控件的时候会像 CheckBox 一样，会在开和关的状态之间切换，这个切换不是瞬间完成的，中间的指示器会有一...
android 自定义开关（SwitchButton）
Because of dream!
11-18 2389
最近心血来潮，写了一个自定义仿iPhone的开关。有需要的同学可以来下载啦。支持点击自动滚动，速率可以自己根据需要修改。触摸滚动，大小自定义，支持修改样式。
Android Switch开关按钮使用和自定义样式（系列教程五）
qq_34215018的博客
11-04 1万+
Android Switch开关按钮使用和自定义样式。Switch开关按钮是Android中的基本控件之一，其本质上也是一个按钮，具有开和关两种展示状态。textOn：开关按钮打开时显示的文字。textOff：开关按钮关闭时显示的文字。thumb：开关按钮上原型滑块的样式，自定义样式时需要设置此样式。track：开关按钮下面导轨的样式，自定义样式时需要设置此样式。switchTextAppearance：设置文本的风格，可以用来设置开关两种状态下的文本样式。checked：设置初始选中状态。
Android开发之玩转SwitchButton
lulusayhi的博客
03-08 6869
/**  * SwitchButton开关控件早已经非常流行。有各种各样的样式，SwitchButton开关控件一般用于app软件设置那里，控制缓存、声音、提示、下载等等。是具有很好的UI体验以及用户的习惯性  */ Part 1、使用自定义View来实现SwitchButton 步骤： [java] view plain copy
视图组件--Switch开关按钮
技术应让更广泛的人群流入到实际产品开发中才是正统
09-19 114
要在 Android 应用中创建开关按钮（Switch），你可以使用Switch视图组件。上述示例中，我们创建了一个简单的 Switch，设置了其 ID 和显示的文本。onCreate这个监听器会在用户切换开关状态时触发，根据isChecked参数来判断开关的状态。你可以在相应的条件下执行你的操作。这些步骤可以帮助你创建和操作开关按钮，以实现在应用程序中让用户切换某些功能或选项的功能。根据需要，你可以根据用户的选择执行不同的操作。
android开关按钮背景图,Android自定义控件之开关按钮学习笔记分享
05-27
好的，关于 Android 开关按钮的背景图和自定义控件，我可以为您提供一些学习笔记和分享。 1. Android 开关按钮背景图 在 Android 中，开关按钮的背景图可以通过 drawable 文件夹下的 xml 文件来实现。以下是一个简单的例子： ```xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/switch_on" android:state_checked="true"/> <item android:drawable="@drawable/switch_off"/> </selector> ``` 其中，我们使用了 selector 标签来表示按钮的状态。在 checked 为 true 时，使用 switch_on 图片作为背景图；否则使用 switch_off 图片作为背景图。 2. Android 自定义控件之开关按钮学习笔记分享 如果您想完全自定义一个开关按钮控件，以下是一些实现步骤： 1) 创建一个继承自 CompoundButton 的类，例如 SwitchButton。 2) 实现 SwitchButton 的构造函数和一些必要的属性。 ```java public class SwitchButton extends CompoundButton { public SwitchButton(Context context) { super(context); init(); } public SwitchButton(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SwitchButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化一些属性 } } ``` 3) 在 init() 方法中，设置一些默认属性，例如背景图、文字等。 4) 重写 onMeasure() 方法，计算出 SwitchButton 的宽高。 ```java @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); setMeasuredDimension(widthSize, heightSize); } ``` 5) 重写 onDraw() 方法，绘制 SwitchButton 的背景图和文字。 ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制背景图和文字 } ``` 6) 重写 onTouchEvent() 方法，处理用户的触摸事件，例如改变 SwitchButton 的状态。 ```java @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 处理按下事件 break; case MotionEvent.ACTION_MOVE: // 处理移动事件 break; case MotionEvent.ACTION_UP: // 处理抬起事件 break; } return super.onTouchEvent(event); } ``` 7) 最后，将 SwitchButton 添加到布局文件中即可。 ```xml <com.example.myapp.SwitchButton android:id="@+id/switchButton" android:layout_width="wrap_content" android:layout_height="wrap_content"/> ``` 以上就是自定义开关按钮控件的一些步骤和注意事项。希望对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值