本文轉自：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() {@Overridepublic 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來設置 @Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(width, height);}@Overrideprotected 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);}@Overridepublic 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);}@Overridepublic 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.SwitchButtonandroid: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" /><Switchandroid: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" /><Switchandroid: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

總結

以上是生活随笔為你收集整理的Android 自定义的开关按钮——SwitchButton的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。