Android 自定义的开关按钮——SwitchButton

本文转自：http://blog.csdn.net/swust_chenpeng/article/details/19967501

我将原文的控件进行了一些修改，去掉了原来控件的外边框，只留下重要的遮罩、背景和滑块。并且可以在布局文件中预览（预览效果不是太好，凑合看看还可以）。自己修改了下监听器，增加了一些方法。总之目前已经和官方的控件差不多了。重要的是可以自定义控件的大小了！

上面粉红色的那个就是我们自定义的控件了，下面的两个是用的官方的控件，自己改样式。基本处于没用的级别。

好了，现在我们开始讲自定义控件添加入代码中。

首先，定义attrs.xml文件

layout_width 　　控件的宽度，必须为确定数值的单位，不能用match_parent/wrap_content
layout_height　　控件的高度，必须为确定数值的单位，不能用match_parent/wrap_content
mask 　　 　　    控件的遮罩，在这个遮罩范围内的图片才予以显示，可以实现圆角
track 　　 　　　  控件的轨道背景图
thumb 　　　　   控件的滑块图片

这里的5个属性必须同时指定，否则会出问题！

mask.png

 track.png

thumb.png（这里可以看见这原点做的时候，应该做到和轨道一个长度，并且正好能在轨道的中间位置）

效果要达到这样能完美显示 →   ╮(╯▽╰)╭这种事情就交给美工妹子去做吧，程序员就好好地编程吧~

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="SwitchButton">
        <attr name="android:layout_width"/>
        <attr name="android:layout_height"/>
        <attr name="mask" format="reference"/>
        <attr name="android:track"/>
        <attr name="android:thumb"/>
    </declare-styleable>

</resources>

然后，我们写这个控件的类  SwitchButton.java

package com.kale.switchbutton;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;

/**
 * @author:swust_chenpeng
 * 本文转自：http://blog.csdn.net/swust_chenpeng/article/details/19967501
 * @tips : 白色圆点:switch_btn_pressed;
 *     左白右红的长条:switch_bottom;
 *     无色长条:switch_frame;
 *     黑色长条:switch_mask.
 * @date :2014-7-20
 */
public class SwitchButton extends View implements OnClickListener {
    private Bitmap mSwitchTrack, mSwitchThumb, mSwitchMask;
    private float mCurrentX = 0;// 当前的x坐标
    private boolean mSwitchOn = true;// 开关默认是开着的
    private int mMoveLength;// 最大移动距离
    private float mLastX = 0;// 第一次按下的有效区域

    private Rect mDest = null;// 绘制的目标区域大小
    private Rect mSrc = null;// 截取源图片的大小
    private int mDeltX = 0;// 移动的偏移量

    private int width, height;

    private Paint mPaint = null;
    private OnCheckedChangeListener mListener = null;
    private boolean mFlag = false;

    private float scaleWidth,scaleHeight;//图片缩放的比例

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

    public SwitchButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);

    }

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

    /**
     * 初始化相关资源
     */
    private void init(Context context, AttributeSet attrs) {
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
                R.styleable.SwitchButton);

        width = (int) mTypedArray.getDimension(
                R.styleable.SwitchButton_android_layout_width, 100);
        height = (int) mTypedArray.getDimension(
                R.styleable.SwitchButton_android_layout_height,43);

        // 遮罩
        mSwitchMask = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_mask);
        // 背景(轨道的背景)
        mSwitchTrack = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_android_track);
        // 滑块
        mSwitchThumb = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_android_thumb);

        // 计算缩放的比例
        scaleWidth = ((float) width / mSwitchMask.getWidth());
        scaleHeight = ((float) height / mSwitchMask.getHeight());

        mSwitchMask = getScaleBitmap(mSwitchMask);
        mSwitchTrack = getScaleBitmap(mSwitchTrack);
        mSwitchThumb = getScaleBitmap(mSwitchThumb);    

        setOnClickListener(this);
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return false;
            }
        });
        // 可以移动的长度
        mMoveLength = mSwitchTrack.getWidth() - mSwitchMask.getWidth();
        // 创建一个矩形对象(目标区域的大小)，通过使用四个整数来初始化矩形左上角的横坐标、纵坐标以及矩形的高度、宽度
        mDest = new Rect(0, 0, mSwitchMask.getWidth(),mSwitchMask.getHeight());
        // 创建一个矩形对象，矩形左上角的横坐标、纵坐标以及矩形的宽度、高度均为零。这是默认的构造函数
        mSrc = new Rect();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);// 消除锯齿
        mPaint.setAlpha(255);// 设置透明度
        mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
    }

    // 从资源中获取图片对象
    private Bitmap getSrcBitmap(TypedArray mTypedArray,int index) {
        BitmapDrawable tempBit;
        tempBit = (BitmapDrawable)mTypedArray.getDrawable(index);
        return tempBit.getBitmap();
    }

    // 将原图，按照布局文件中的控件长度来缩放
    private Bitmap getScaleBitmap(Bitmap bitmap) {
        Matrix matrix = new Matrix();
        if (isInEditMode()) {
            return bitmap;
        }
        matrix.postScale(scaleWidth, scaleHeight);
            bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
                    bitmap.getHeight(), matrix, true);
        return bitmap;
    }

    // 该方法指定该控件在屏幕上的大小,这里要计算一下控件的实际大小，然后调用setMeasuredDimension来设置
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mDeltX > 0 || mDeltX == 0 && mSwitchOn) {
            if (mSrc != null) {
                mSrc.set(mMoveLength - mDeltX, 0,
                        mSwitchTrack.getWidth() - mDeltX, mSwitchMask.getHeight());
            }
        }
        else if (mDeltX < 0 || mDeltX == 0 && !mSwitchOn) {
            if (mSrc != null) {
                mSrc.set(-mDeltX, 0, mSwitchMask.getWidth() - mDeltX,
                        mSwitchMask.getHeight());
            }
        }

        // 这儿是离屏缓冲，自己感觉类似双缓冲机制吧
        int count = canvas.saveLayer(new RectF(mDest), null,
                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(mSwitchTrack, mSrc, mDest, null);
        canvas.drawBitmap(mSwitchTrack, mSrc, mDest, null);
        canvas.drawBitmap(mSwitchMask, 0, 0, mPaint);
        canvas.drawBitmap(mSwitchThumb, mSrc, mDest, null);
        //这个判断，用来让这个控件可以在布局文件中预览
        if (isInEditMode()) {
            return ;
        }
        canvas.restoreToCount(count);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mLastX = event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            mCurrentX = event.getX();
            mDeltX = (int) (mCurrentX - mLastX);
            // 如果开关开着向左滑动，或者开关关着向右滑动（这时候是不需要处理的）
            if ((mSwitchOn && mDeltX < 0) || (!mSwitchOn && mDeltX > 0)) {
                mFlag = true;
                mDeltX = 0;
            }

            if (Math.abs(mDeltX) > mMoveLength) {
                mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;
            }
            invalidate();
            return true;
        case MotionEvent.ACTION_UP:
            if (Math.abs(mDeltX) > 0 && Math.abs(mDeltX) < mMoveLength / 2) {
                mDeltX = 0;
                invalidate();
                return true;
            } else if (Math.abs(mDeltX) > mMoveLength / 2
                    && Math.abs(mDeltX) <= mMoveLength) {
                mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;
                mSwitchOn = !mSwitchOn;
                if (mListener != null) {
                    mListener.onCheckedChanged(this, mSwitchOn);
                }
                invalidate();
                mDeltX = 0;
                return true;
            } else if (mDeltX == 0 && mFlag) {
                // 这时候得到的是不需要进行处理的，因为已经move过了
                mDeltX = 0;
                mFlag = false;
                return true;
            }
            return super.onTouchEvent(event);
        default:
            break;
        }
        invalidate();
        return super.onTouchEvent(event);
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mListener = listener;
    }

    public interface OnCheckedChangeListener {
        public void onCheckedChanged(SwitchButton button, boolean isChecked);
    }

    @Override
    public void onClick(View v) {
        mDeltX = mSwitchOn ? mMoveLength : -mMoveLength;
        mSwitchOn = !mSwitchOn;
        if (mListener != null) {
            mListener.onCheckedChanged(this, mSwitchOn);
        }
        invalidate();// 重绘
        mDeltX = 0;
    }

    public Boolean isChecked() {
        return mSwitchOn;
    }

    public void setChecked(Boolean checked) {
        mSwitchOn = checked;
        invalidate();
    }

}

最后，在布局文件中使用它。（记得写上命名空间）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:pv="http://schemas.android.com/apk/res/com.kale.switchbutton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.kale.switchbutton.SwitchButton
        android:id="@+id/switch_id"
        android:layout_width="80dp"
        android:layout_height="34dp"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"
        android:thumb="@drawable/switch_thumb"
        android:track="@drawable/switch_bottom"
        pv:mask="@drawable/switch_mask" />

        <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_gravity="center_horizontal"
            android:switchMinWidth="40dp"
            android:switchPadding="30dp"
            android:padding="5dp"
            android:text="自定义风格"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff=" "
            android:textOn="  "
            android:thumb="@drawable/tt_button"
            android:track="@drawable/tt_path" />

    <Switch
        android:id="@+id/switch1"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

源码下载：http://download.csdn.net/detail/shark0017/7659623

时间： 2024-10-10 08:41:06

Android 自定义的开关按钮——SwitchButton的相关文章

android 自定义开关（SwitchButton）

最近心血来潮,写了一个自定义仿iPhone的开关.有需要的同学可以来下载啦.支持点击自动滚动,速率可以自己根据需要修改.触摸滚动,大小自定义,支持修改样式.就不录制动画,就上传了两张图给大家看看.        主要代码: package com.example.switchbutton; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.Resou

Android自定义滑动开关按钮

一.效果图 二.主要技术点 1.自定义View 2.自定义属性 三.自定义控件的步骤 1.自定义类继承自View或View的子类: 2.重写构造方法 (1)MyView(Context);  // 在代码中new 对象时调用此方法 (2)MyView(Context,AttributeSet);  // 在XML布局文件中声明此View,创建对象时,由系统自动调用 (3)MyView(Context,AttributeSet,int);  // 与方法2用法一样,只是多了一个参数:默认样式 3.

Android 自定义View合集

自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/Mr-XiaoLiang 自定义控件三部曲 http://blog.csdn.net/harvic880925?viewmode=contents Android 从0开始自定义控件之View基础知识与概念 http://blog.csdn.net/airsaid/article/details/5

Android 自定义Gallery浏览图片

之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实这个效果使用的知识点就是图像的获取.创建.缩放.旋转.Matrix类.Canvas类等,另外就是自定义的Gallery控件. 相信大家都期待马上上代码了吧,嘻嘻.(注释比较多,相信大家都能看懂.) main.xml: <?xml version="1.0" encoding=&quo

Android自定义View探索(一)—生命周期

Activity代码: public class FiveActivity extends AppCompatActivity { private MyView myView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.e("log", "Activity生命周期:onCreate"); setConte

android自定义UI模板图文详解

不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一个标题的xml文件,然后在需要的地方直接通过include来引用,这比起在每个布局文件中写标题栏已经进化很多了,但仍然不是最简单有效的方法,我们为什么不能自定义一个标题控件呢?今天就带大家自己做一个标题栏控件.效果图如下: 开始啦: 第一步:自定义xml属性 新建一个android项目,在value

Android自定义进度条样式

最近在做一个widget,上面需要一个progressbar,产品经理和设计师给出来的东西是要实现一个圆角的progress和自定义的颜色,研究一小下,分享出来给大家哦. 测试于:Android4.0+ 操作步骤: 1.创建你的layout文件引用progressbar如下,标红处引用你自定的样式: <ProgressBar android:id="@+id/progressDownload" style="?android:attr/progressBarStyleH

Android 自定义RecyclerView 实现真正的Gallery效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38173061 ,本文出自:[张鸿洋的博客] 上一篇博客我使用自定义HorizontalScrollView写了一个具有HorizontalScrollView效果和ViewPager特性的横向图片轮播,详见:Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果.其实制作横向滚动的不得不说另一个控件,就是Google

Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr