自定义switch开关控件,实现点击和滑动效果

效果图

1. xml布局中

<com.etoury.etoury.ui.view.SlideSwitch
        android:id="@+id/slideSwitch3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

2. SlideSwitch.java

package com.etoury.etoury.ui.view;

import com.etoury.project.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.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;

/**
 * SlideSwitch 仿iphone滑动开关组件,仿百度魔图滑动开关组件 组件分为三种状态:打开、关闭、正在滑动<br/>
 * 使用方法:
 *
 * <pre>
 * SlideSwitch slideSwitch = new SlideSwitch(this);
 * slideSwitch.setOnSwitchChangedListener(onSwitchChangedListener);
 * linearLayout.addView(slideSwitch);
 * </pre>
 *
 * 注:也可以加载在xml里面使用
 *
 * @author scott
 *
 */
public class SlideSwitch extends View {
    public static final String TAG = "SlideSwitch";
    public static final int SWITCH_OFF = 0;// 关闭状态
    public static final int SWITCH_ON = 1;// 打开状态
    public static final int SWITCH_SCROLING = 2;// 滚动状态

    // 用于显示的文本
    private String mOnText = "打开";
    private String mOffText = "关闭";

    private int mSwitchStatus = SWITCH_OFF;

    private boolean mHasScrolled = false;// 表示是否发生过滚动

    private int mSrcX = 0, mDstX = 0;

    private int mBmpWidth = 0;
    private int mBmpHeight = 0;
    private int mThumbWidth = 0;

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private OnSwitchChangedListener mOnSwitchChangedListener = null;

    // 开关状态图
    Bitmap mSwitch_off, mSwitch_on, mSwitch_thumb;

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

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

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

    // 初始化三幅图片
    private void init() {
        Resources res = getResources();
        mSwitch_off = BitmapFactory.decodeResource(res,
                R.drawable.bg_btn_oval_gray);
        mSwitch_on = BitmapFactory.decodeResource(res,
                R.drawable.bg_btn_oval_blue);
        mSwitch_thumb = BitmapFactory.decodeResource(res,
                R.drawable.bg_btn_round);
        mBmpWidth = mSwitch_on.getWidth();
        mBmpHeight = mSwitch_on.getHeight();
        mThumbWidth = mSwitch_thumb.getWidth();
    }

    @Override
    public void setLayoutParams(LayoutParams params) {
        params.width = mBmpWidth;
        params.height = mBmpHeight;
        super.setLayoutParams(params);
    }

    /**
     * 为开关控件设置状态改变监听函数
     *
     * @param onSwitchChangedListener
     *            参见 {@link OnSwitchChangedListener}
     */
    public void setOnSwitchChangedListener(
            OnSwitchChangedListener onSwitchChangedListener) {
        mOnSwitchChangedListener = onSwitchChangedListener;
    }

    /**
     * 设置开关上面的文本
     *
     * @param onText
     *            控件打开时要显示的文本
     * @param offText
     *            控件关闭时要显示的文本
     */
    public void setText(final String onText, final String offText) {
        mOnText = onText;
        mOffText = offText;
        invalidate();
    }

    /**
     * 设置开关的状态
     *
     * @param on
     *            是否打开开关 打开为true 关闭为false
     */
    public void setStatus(boolean on) {
        mSwitchStatus = (on ? SWITCH_ON : SWITCH_OFF);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        Log.d(TAG, "onTouchEvent  x=" + event.getX());
        switch (action) {
        case MotionEvent.ACTION_DOWN:
            mSrcX = (int) event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            mDstX = Math.max((int) event.getX(), 10);
            mDstX = Math.min(mDstX, 62);
            if (mSrcX == mDstX)
                return true;
            mHasScrolled = true;
            AnimationTransRunnable aTransRunnable = new AnimationTransRunnable(
                    mSrcX, mDstX, 0);
            new Thread(aTransRunnable).start();
            mSrcX = mDstX;
            break;
        case MotionEvent.ACTION_UP:
            if (mHasScrolled == false)// 如果没有发生过滑动,就意味着这是一次单击过程
            {
                mSwitchStatus = Math.abs(mSwitchStatus - 1);
                int xFrom = 10, xTo = 62;
                if (mSwitchStatus == SWITCH_OFF) {
                    xFrom = 62;
                    xTo = 10;
                }
                AnimationTransRunnable runnable = new AnimationTransRunnable(
                        xFrom, xTo, 1);
                new Thread(runnable).start();
            } else {
                invalidate();
                mHasScrolled = false;
            }
            // 状态改变的时候 回调事件函数
            if (mOnSwitchChangedListener != null) {
                mOnSwitchChangedListener.onSwitchChanged(this, mSwitchStatus);
            }
            break;

        default:
            break;
        }
        return true;
    }

    @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);
        // 绘图的时候 内部用到了一些数值的硬编码,其实不太好,
        // 主要是考虑到图片的原因,图片周围有透明边界,所以要有一定的偏移
        // 硬编码的数值只要看懂了代码,其实可以理解其含义,可以做相应改进。
        mPaint.setTextSize(14);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);

        if (mSwitchStatus == SWITCH_OFF) {
            drawBitmap(canvas, null, null, mSwitch_off);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            mPaint.setColor(Color.rgb(105, 105, 105));
            canvas.translate(mSwitch_thumb.getWidth(), 0);
            canvas.drawText(mOffText, 0, 20, mPaint);
        } else if (mSwitchStatus == SWITCH_ON) {
            drawBitmap(canvas, null, null, mSwitch_on);
            int count = canvas.save();
            canvas.translate(mSwitch_on.getWidth() - mSwitch_thumb.getWidth(),
                    0);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            mPaint.setColor(Color.WHITE);
            canvas.restoreToCount(count);
            canvas.drawText(mOnText, 17, 20, mPaint);
        } else // SWITCH_SCROLING
        {
            mSwitchStatus = mDstX > 35 ? SWITCH_ON : SWITCH_OFF;
            drawBitmap(canvas, new Rect(0, 0, mDstX, mBmpHeight), new Rect(0,
                    0, (int) mDstX, mBmpHeight), mSwitch_on);
            mPaint.setColor(Color.WHITE);
            canvas.drawText(mOnText, 17, 20, mPaint);

            int count = canvas.save();
            canvas.translate(mDstX, 0);
            drawBitmap(canvas, new Rect(mDstX, 0, mBmpWidth, mBmpHeight),
                    new Rect(0, 0, mBmpWidth - mDstX, mBmpHeight), mSwitch_off);
            canvas.restoreToCount(count);

            count = canvas.save();
            canvas.clipRect(mDstX, 0, mBmpWidth, mBmpHeight);
            canvas.translate(mThumbWidth, 0);
            mPaint.setColor(Color.rgb(105, 105, 105));
            canvas.drawText(mOffText, 0, 20, mPaint);
            canvas.restoreToCount(count);

            count = canvas.save();
            canvas.translate(mDstX - mThumbWidth / 2, 0);
            drawBitmap(canvas, null, null, mSwitch_thumb);
            canvas.restoreToCount(count);
        }

    }

    public void drawBitmap(Canvas canvas, Rect src, Rect dst, Bitmap bitmap) {
        dst = (dst == null ? new Rect(0, 0, bitmap.getWidth(),
                bitmap.getHeight()) : dst);
        Paint paint = new Paint();
        canvas.drawBitmap(bitmap, src, dst, paint);
    }

    /**
     * AnimationTransRunnable 做滑动动画所使用的线程
     */
    private class AnimationTransRunnable implements Runnable {
        private int srcX, dstX;
        private int duration;

        /**
         * 滑动动画
         *
         * @param srcX
         *            滑动起始点
         * @param dstX
         *            滑动终止点
         * @param duration
         *            是否采用动画,1采用,0不采用
         */
        public AnimationTransRunnable(float srcX, float dstX, final int duration) {
            this.srcX = (int) srcX;
            this.dstX = (int) dstX;
            this.duration = duration;
        }

        @Override
        public void run() {
            final int patch = (dstX > srcX ? 5 : -5);
            if (duration == 0) {
                SlideSwitch.this.mSwitchStatus = SWITCH_SCROLING;
                SlideSwitch.this.postInvalidate();
            } else {
                Log.d(TAG, "start Animation: [ " + srcX + " , " + dstX + " ]");
                int x = srcX + patch;
                while (Math.abs(x - dstX) > 5) {
                    mDstX = x;
                    SlideSwitch.this.mSwitchStatus = SWITCH_SCROLING;
                    SlideSwitch.this.postInvalidate();
                    x += patch;
                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                mDstX = dstX;
                SlideSwitch.this.mSwitchStatus = mDstX > 35 ? SWITCH_ON
                        : SWITCH_OFF;
                SlideSwitch.this.postInvalidate();
            }
        }

    }

    public static interface OnSwitchChangedListener {
        /**
         * 状态改变 回调函数
         *
         * @param status
         *            SWITCH_ON表示打开 SWITCH_OFF表示关闭
         */
        public abstract void onSwitchChanged(SlideSwitch obj, int status);
    }

}
时间: 2024-10-13 00:35:27

自定义switch开关控件,实现点击和滑动效果的相关文章

Android 自定义SwitchButton开关控件

SwitchButton开关控件早已经非常流行.有各种各样的样式,SwitchButton开关控件一般用于app软件设置那里,控制缓存.声音.提示.下载等等.是具有很好的UI体验以及用户的习惯性.那么再下面介绍一个SwitchButton开关控件.并附上源码. 源码下载:点击 一.看实现的效果图 二.自定义SwitchButton 这是一个继承CheckBox的SwitchButton类.来实现做这些动画效果的,首先准备好这些图片,然后canvas绘制控件 的边框.背景.以及按钮.绘制时候加上相

自定义下拉控件,点击屏幕别处收起下拉

/// <summary> /// 在调度消息之前将其筛选出来. /// </summary> /// <param name="m">要调度的消息.无法修改此消息.</param> /// <returns>如果筛选消息并禁止消息被调度,则为 true:如果允许消息继续到达下一个筛选器或控件,则为 false.</returns> public bool PreFilterMessage(ref Message

selector设置按钮或者一些点击控件在点击时的效果

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_toc_white_24dp" android:state_pressed="true"

android自定义开关控件

近日在android项目要使用开关控件,但是android中自带的开关控件不太满意,所以就打算通过自定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图:    分析: 开关控件,中包含了两个部分,一个是一个圆,一个是圆角矩形,好了那我们只要通过view来进行绘制这两部分就可以了 直接上代码: package com.example.widget; import com.example.switchbutton_master.R; import android.conte

weui-switch开关控件,表单提交后如何取值

最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态,试了一下,确实可以,把我自己的解决方法写下来如下: weui这个switch开关控件好像确实只能用来显示开关状态,无法提交数据,我根据楼上的思路,建了一个隐藏的radio标签,然后通过这个开关控件来设置radio标签的value属性,这样提交,后台php就能获取到正确的表单信息了: <!--隐含元素

自定义三档半圆开关控件

项目中需要一个多档的开关,根据美工的做图来开,可能得用自定义控件来实现,正好之前学习做了一个卫星菜单自定义控件,打算尝试自己自定义这个半圆控件. 美工图如下: 1.考虑自定义控件所需属性 根据美工图来看,我觉得需要三个属性,开关所处于档位level(说是3档),指示器颜色indicatorColor,内圆半径radius 于是在values文件夹下新建attrs.xml文件,内容如下 <?xml version="1.0" encoding="utf-8"?&

小米3系统计算器自定义开关控件-MySwitchView

1.前言 在android4.0以后,有switch控件,类似于iPhone上面滑块的效果,但是只能用在4.0以后的系统中,之前的平台,就无法使用这种控件.近段时间,看到了小米3手机上自带的计算器app,有这样的效果,上面的一个控件,觉得很漂亮,并且与iPhone上的效果略有不同,于是自己动手编写了一下这个功能,在编写的过程中,参考过网上的一些demo,运行后,在控件滑动的时候,感觉动画不平滑,有卡顿的现象,反复修改,最后还是有一些问题,感觉是在滑动中的状态,没有合理的控制好.无奈只能参考Goo

Ext 6.5.3 classic版本,自定义实现togglefield开关控件

1,在Ext 6.5.3的classic版中没有提供开关控件,参照modern版中 togglefield开关的实现,继承滑动器(sliderfield),自定义一个开关按钮.支持value绑定和点击切换状态以及表单提交. 2,完成后效果如图: 3, js代码如下: //基于滑动器自定义开关控件, by xxx Ext.define('ux.slider.Toggle', { extend: 'Ext.slider.Single', alias: 'widget.uxSliderToggle',

VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列

接下来几篇作文,会介绍用到的输入框系列,今天会介绍组普通的调用方式,因为RXEditor要求复杂的输入功能,后面的例子会用VUE的component动态调用,就没有今天的这么直观了,控件的实现原理都一样,只是调用方式的区别,今天的例子的调用代码为了写作文特殊制作的,写完作文还要恢复回去.开关控件(Switch)的实现效果: 给组件取个好听的名字,叫RxSwitch吧.调用代码: <RxSwitch :onValue = "'on-value'" :offValue = "