Android 自定义带动画效果的开关按钮

最新推荐文章于 2023-04-19 11:57:01 发布

gf771115

最新推荐文章于 2023-04-19 11:57:01 发布

阅读量4.4k

点赞数 1

分类专栏： Android

Android 专栏收录该内容

483 篇文章 4 订阅

订阅专栏

转自：http://blog.csdn.net/qq_22393017/article/details/52198453

自定义带动画效果的开关按钮

一个自定义控制开关的控件，简单实用，效果特别棒。项目中常会用到，比那种用两张图片做按钮背景，selector选择的方式，视觉效果好很多。忘了是以前从哪找的了，本着开源的精神整理了一下分享出来。好了，废话不多说，先展示效果图：

Github 项目地址：https://github.com/xiaosong520/SwitchButtonDemo.git

步骤：

1.创建SwitchButton类添加到自己的项目中：

[java] view plain copy

print ?

/**
* @TODO<自定义选择开关按钮>
* @author 小嵩
* @date 2016-8-5 09:57:29
*/
public class SwitchButton extends View{
    /** 圆角大小*/
    private float radius;
    /** 开启颜色*/
    private int onColor = Color.parseColor("#4ebb7f");
    /** 关闭颜色*/
    private int offBorderColor = Color.parseColor("#dadbda");
    /** 灰色带颜色*/
    private int offColor = Color.parseColor("#ffffff");
    /** 手柄颜色*/
    private int spotColor = Color.parseColor("#ffffff");
    /** 边框颜色*/
    private int borderColor = offBorderColor;
    /** 画笔*/
    private Paint paint ;
    /** 开关状态*/
    private boolean toggleOn = false;
    /** 边框大小*/
    private int borderWidth = 2;
    /** 垂直中心*/
    private float centerY;
    /** 按钮的开始和结束位置*/
    private float startX, endX;
    /** 手柄X位置的最小和最大值*/
    private float spotMinX, spotMaxX;
    /**手柄大小 */
    private int spotSize ;
    /** 手柄X位置*/
    private float spotX;
    /** 关闭时内部灰色带高度*/
    private float offLineWidth;
    /** */
    private RectF rect = new RectF();
    /** 默认使用动画*/
    private boolean defaultAnimate = true;

    private OnToggleChanged listener;

    private SwitchButton(Context context) {
        super(context);
    }
    public SwitchButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setup(attrs);
    }
    public SwitchButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        setup(attrs);
    }

    public void setup(AttributeSet attrs) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Style.FILL);
        paint.setStrokeCap(Cap.ROUND);

        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {
                toggle(defaultAnimate);
            }
        });

        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.SwitchButton);
        offBorderColor = typedArray.getColor(R.styleable.SwitchButton_offBorderColor, offBorderColor);
        onColor = typedArray.getColor(R.styleable.SwitchButton_onColor, onColor);
        spotColor = typedArray.getColor(R.styleable.SwitchButton_spotColor, spotColor);
        offColor = typedArray.getColor(R.styleable.SwitchButton_offColor, offColor);
        borderWidth = typedArray.getDimensionPixelSize(R.styleable.SwitchButton_borderWidth, borderWidth);
        defaultAnimate = typedArray.getBoolean(R.styleable.SwitchButton_animate, defaultAnimate);
        typedArray.recycle();

        borderColor = offBorderColor;
    }

    public void toggle() {
        toggle(true);
    }

    public void toggle(boolean animate) {
        toggleOn = !toggleOn;
        takeEffect(animate);

        if(listener != null){
            listener.onToggle(toggleOn);
        }
    }

    public void toggleOn() {
        setToggleOn();
        if(listener != null){
            listener.onToggle(toggleOn);
        }
    }

    public void toggleOff() {
        setToggleOff();
        if(listener != null){
            listener.onToggle(toggleOn);
        }
    }

    /**
     * 设置显示成打开样式，不会触发toggle事件
     */
    public void setToggleOn() {
        setToggleOn(true);
    }

    /**
     * @param animate
     */
    public void setToggleOn(boolean animate){
        toggleOn = true;
        takeEffect(animate);
    }

    /**
     * 设置显示成关闭样式，不会触发toggle事件
     */
    public void setToggleOff() {
        setToggleOff(true);
    }

    public void setToggleOff(boolean animate) {
        toggleOn = false;
        takeEffect(animate);
    }

    private void takeEffect(boolean animate) {
        if(animate){
            slide();
        }else{
            calculateEffect(toggleOn ? 1 : 0);
        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        Resources r = Resources.getSystem();
        if(widthMode == MeasureSpec.UNSPECIFIED || widthMode == MeasureSpec.AT_MOST){
            widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, r.getDisplayMetrics());
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
        }

        if(heightMode == MeasureSpec.UNSPECIFIED || heightSize == MeasureSpec.AT_MOST){
            heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, r.getDisplayMetrics());
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        final int width = getWidth();
        final int height = getHeight();

        radius = Math.min(width, height) * 0.5f;
        centerY = radius;
        startX = radius;
        endX = width - radius;
        spotMinX = startX + borderWidth;
        spotMaxX = endX - borderWidth;
        spotSize = height - 4 * borderWidth;
        spotX = toggleOn ? spotMaxX : spotMinX;
        offLineWidth = 0;
    }

    private void slide(){
            Animation animation = new Animation() {
                @Override
                protected void applyTransformation(float interpolatedTime,
                        Transformation t) {
                    if(toggleOn){
                        calculateEffect(interpolatedTime);
                    }else{
                        calculateEffect(1-interpolatedTime);
                    }
                }
            };
            animation.setDuration(200);
            clearAnimation();
            startAnimation(animation);
    }

    private int clamp(int value, int low, int high) {
        return Math.min(Math.max(value, low), high);
    }


    @Override
    public void draw(Canvas canvas) {
        //
        rect.set(0, 0, getWidth(), getHeight());
        paint.setColor(borderColor);
        canvas.drawRoundRect(rect, radius, radius, paint);

        if(offLineWidth > 0){
            final float cy = offLineWidth * 0.5f;
            rect.set(spotX - cy, centerY - cy, endX + cy, centerY + cy);
            paint.setColor(offColor);
            canvas.drawRoundRect(rect, cy, cy, paint);
        }

        rect.set(spotX - 1 - radius, centerY - radius, spotX + 1.1f + radius, centerY + radius);
        paint.setColor(borderColor);
        canvas.drawRoundRect(rect, radius, radius, paint);

        final float spotR = spotSize * 0.5f;
        rect.set(spotX - spotR, centerY - spotR, spotX + spotR, centerY + spotR);
        paint.setColor(spotColor);
        canvas.drawRoundRect(rect, spotR, spotR, paint);

    }

    /**
     * @param value
     */
    private void calculateEffect(final double value) {
        final float mapToggleX = (float) mapValueFromRangeToRange(value, 0, 1, spotMinX, spotMaxX);
        spotX = mapToggleX;

        float mapOffLineWidth = (float) mapValueFromRangeToRange(1 - value, 0, 1, 10, spotSize);

        offLineWidth = mapOffLineWidth;

        final int fb = Color.blue(onColor);
        final int fr = Color.red(onColor);
        final int fg = Color.green(onColor);

        final int tb = Color.blue(offBorderColor);
        final int tr = Color.red(offBorderColor);
        final int tg = Color.green(offBorderColor);

        int sb = (int) mapValueFromRangeToRange(1 - value, 0, 1, fb, tb);
        int sr = (int) mapValueFromRangeToRange(1 - value, 0, 1, fr, tr);
        int sg = (int) mapValueFromRangeToRange(1 - value, 0, 1, fg, tg);

        sb = clamp(sb, 0, 255);
        sr = clamp(sr, 0, 255);
        sg = clamp(sg, 0, 255);

        borderColor = Color.rgb(sr, sg, sb);

        postInvalidate();
    }

    public interface OnToggleChanged{
        /**
         * @param on
         */
        public void onToggle(boolean on);
    }


    public void setOnToggleChanged(OnToggleChanged onToggleChanged) {
        listener = onToggleChanged;
    }

    public boolean isAnimate() {
        return defaultAnimate;
    }
    public void setAnimate(boolean animate) {
        this.defaultAnimate = animate;
    }

    /**
       * Map a value within a given range to another range.
       * @param value the value to map
       * @param fromLow the low end of the range the value is within
       * @param fromHigh the high end of the range the value is within
       * @param toLow the low end of the range to map to
       * @param toHigh the high end of the range to map to
       * @return the mapped value
       */
      public static double mapValueFromRangeToRange(
          double value,
          double fromLow,
          double fromHigh,
          double toLow,
          double toHigh) {
        double fromRangeSize = fromHigh - fromLow;
        double toRangeSize = toHigh - toLow;
        double valueScale = (value - fromLow) / fromRangeSize;
        return toLow + (valueScale * toRangeSize);
      }
}

2.在项目res - values目录下 - 找到 attrs.xml 文件，在resource中间添加如下代码：

[html] view plain copy

print ?

<declare-styleable name="SwitchButton">
        <attr name="borderWidth" format="dimension">
        </attr>
        <attr name="offBorderColor" format="reference|color">
        </attr>
        <attr name="offColor" format="reference|color">
        </attr>
        <attr name="onColor" format="reference|color">
        </attr>
        <attr name="spotColor" format="reference|color">
        </attr>
        <attr name="animate" format="reference|boolean">
        </attr>
    </declare-styleable>

3.在XML布局文件中使用控件（路径引用需改成SwitchButton类所在目录）：

[html] view plain copy

print ?

<com.ui.widget.view.SwitchButton
            android:id="@+id/switchButton"
            android:layout_width="45dp"
            android:layout_height="25dp"
            app:borderWidth="0.8dp"
            app:offBorderColor="@color/light_gray"
            app:offColor="@color/common_white"
            app:onColor="@color/common_light_blue"
            app:spotColor="@color/common_white"
            app:animate="true"
            android:layout_margin="20dp" />
控件的属性介绍：
      borderWidth 描边宽度
      offBorderColor 关闭状态下描边的颜色
      offColor 关闭状态的颜色
      onColor 打开状态的颜色
      spotColor 控件中间的圆点的颜色
      animate 是否打开动画效果

4.在Activity中使用：

4.1绑定控件：
如果使用ButterKinfe库的话：
@Bind(R.id.switchButton) SwitchButton switchButton;

findViewById的方式:
SwitchButton switchButton = （SwitchButton）findViewById（R.id.switchButton);
4.2使用控件：

[java] view plain copy

print ?

switchButton.setToggleOn(false);//默认打开。如果参数传false,则打开页面初始化时不会有动画效果(改变状态还是会有动画)
switchButton.setOnToggleChanged(new SwitchButton.OnToggleChanged(){
    @Override
    public void onToggle(boolean isOn) {
      //处理自己的逻辑
      showToast( "SwitchButton"+isOn);
    }
  });
5.没有第五步了，已经大功告成~ 有问题欢迎call我，一起讨论~

gf771115

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
Android 自定义带动画效果的开关按钮

转自：http://blog.csdn.net/qq_22393017/article/details/52198453自定义带动画效果的开关按钮一个自定义控制开关的控件，简单实用，效果特别棒。项目中常会用到，比那种用两张图片做按钮背景，selector选择的方式，视觉效果好很多。忘了是以前从哪找的了，本着开源的精神整理了一下分享出来。好了，废话不多说，先展示效果图
复制链接

扫一扫