android仿ios开关按钮

前一段时间在做项目的时候遇到了一个问题，美工在设计的时候设计的是一个iPhone中的开关，但是都知道Android中的Switch开关和IOS中的不同，这样就需要通过动画来实现一个iPhone开关了。

通常我们设置界面采用的是PreferenceActivity

 package me.imid.movablecheckbox;

 import android.os.Bundle;
 import android.preference.PreferenceActivity;

 public class MovableCheckboxActivity extends PreferenceActivity {

     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         addPreferencesFromResource(R.xml.testpreference);
     }
 }

有关PreferenceActivity请看：http://blog.csdn.net/dawanganban/article/details/19082949

我们的基本思路是将CheckBox自定义成我们想要的样子，然后再重写CheckBoxPreference将自定义的CheckBox载入。

1、重写CheckBox

 package me.imid.view;

 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();
     }
 }

2、新建一个布局文件preference_widget_checkbox.xml

 <?xml version="1.0" encoding="utf-8"?>
 <me.imid.view.SwitchButton xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/checkbox"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="right|center" />

3、重写CheckBoxPreference并通过Inflater加载布局文件，同时屏蔽原有点击事件

 package me.imid.preference;

 import me.imid.movablecheckbox.R;
 import me.imid.view.SwitchButton;

 import android.app.Service;
 import android.content.Context;
 import android.preference.PreferenceActivity;
 import android.text.TextUtils;
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
 import android.view.accessibility.AccessibilityManager;
 import android.widget.Checkable;
 import android.widget.CompoundButton;
 import android.widget.CompoundButton.OnCheckedChangeListener;
 import android.widget.TextView;

 public class CheckBoxPreference extends android.preference.CheckBoxPreference {
     private Context mContext;
     private int mLayoutResId = R.layout.preference;
     private int mWidgetLayoutResId = R.layout.preference_widget_checkbox;

     private boolean mShouldDisableView = true;

     private CharSequence mSummaryOn;
     private CharSequence mSummaryOff;

     private boolean mSendAccessibilityEventViewClickedType;

     private AccessibilityManager mAccessibilityManager;

     public CheckBoxPreference(Context context, AttributeSet attrset,
             int defStyle) {
         super(context, attrset);
         mContext = context;
         mSummaryOn = getSummaryOn();
         mSummaryOff = getSummaryOff();
         mAccessibilityManager = (AccessibilityManager) mContext
                 .getSystemService(Service.ACCESSIBILITY_SERVICE);
     }

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

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

     /**
      * Creates the View to be shown for this Preference in the
      * {@link PreferenceActivity}. The default behavior is to inflate the main
      * layout of this Preference (see {@link #setLayoutResource(int)}. If
      * changing this behavior, please specify a {@link ViewGroup} with ID
      * {@link android.R.id#widget_frame}.
      * <p>
      * Make sure to call through to the superclass's implementation.
      *
      * @param parent
      *            The parent that this View will eventually be attached to.
      * @return The View that displays this Preference.
      * @see #onBindView(View)
      */
     protected View onCreateView(ViewGroup parent) {
         final LayoutInflater layoutInflater = (LayoutInflater) mContext
                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

         final View layout = layoutInflater.inflate(mLayoutResId, parent, false);

         if (mWidgetLayoutResId != 0) {
             final ViewGroup widgetFrame = (ViewGroup) layout
                     .findViewById(R.id.widget_frame);
             layoutInflater.inflate(mWidgetLayoutResId, widgetFrame);
         }
         return layout;
     }

     @Override
     protected void onBindView(View view) {
         // 屏蔽item点击事件
         view.setClickable(false);

         TextView textView = (TextView) view.findViewById(R.id.title);
         if (textView != null) {
             textView.setText(getTitle());
         }

         textView = (TextView) view.findViewById(R.id.summary);
         if (textView != null) {
             final CharSequence summary = getSummary();
             if (!TextUtils.isEmpty(summary)) {
                 if (textView.getVisibility() != View.VISIBLE) {
                     textView.setVisibility(View.VISIBLE);
                 }

                 textView.setText(getSummary());
             } else {
                 if (textView.getVisibility() != View.GONE) {
                     textView.setVisibility(View.GONE);
                 }
             }
         }

         if (mShouldDisableView) {
             setEnabledStateOnViews(view, isEnabled());
         }

         View checkboxView = view.findViewById(R.id.checkbox);
         if (checkboxView != null && checkboxView instanceof Checkable) {
             ((Checkable) checkboxView).setChecked(isChecked());
             SwitchButton switchButton = (SwitchButton) checkboxView;
             switchButton
                     .setOnCheckedChangeListener(new OnCheckedChangeListener() {

                         public void onCheckedChanged(CompoundButton buttonView,
                                 boolean isChecked) {
                             // TODO Auto-generated method stub
                             mSendAccessibilityEventViewClickedType = true;
                             if (!callChangeListener(isChecked)) {
                                 return;
                             }
                             setChecked(isChecked);
                         }
                     });
             // send an event to announce the value change of the CheckBox and is
             // done here
             // because clicking a preference does not immediately change the
             // checked state
             // for example when enabling the WiFi
             if (mSendAccessibilityEventViewClickedType
                     && mAccessibilityManager.isEnabled()
                     && checkboxView.isEnabled()) {
                 mSendAccessibilityEventViewClickedType = false;

                 int eventType = AccessibilityEvent.TYPE_VIEW_CLICKED;
                 checkboxView.sendAccessibilityEventUnchecked(AccessibilityEvent
                         .obtain(eventType));
             }
         }

         // Sync the summary view
         TextView summaryView = (TextView) view.findViewById(R.id.summary);
         if (summaryView != null) {
             boolean useDefaultSummary = true;
             if (isChecked() && mSummaryOn != null) {
                 summaryView.setText(mSummaryOn);
                 useDefaultSummary = false;
             } else if (!isChecked() && mSummaryOff != null) {
                 summaryView.setText(mSummaryOff);
                 useDefaultSummary = false;
             }

             if (useDefaultSummary) {
                 final CharSequence summary = getSummary();
                 if (summary != null) {
                     summaryView.setText(summary);
                     useDefaultSummary = false;
                 }
             }

             int newVisibility = View.GONE;
             if (!useDefaultSummary) {
                 // Someone has written to it
                 newVisibility = View.VISIBLE;
             }
             if (newVisibility != summaryView.getVisibility()) {
                 summaryView.setVisibility(newVisibility);
             }
         }
     }

     /**
      * Makes sure the view (and any children) get the enabled state changed.
      */
     private void setEnabledStateOnViews(View v, boolean enabled) {
         v.setEnabled(enabled);

         if (v instanceof ViewGroup) {
             final ViewGroup vg = (ViewGroup) v;
             for (int i = vg.getChildCount() - 1; i >= 0; i--) {
                 setEnabledStateOnViews(vg.getChildAt(i), enabled);
             }
         }
     }

 }

4、在res/xml下新建选项设置布局文件

 <?xml version="1.0" encoding="utf-8"?>
 <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

     <me.imid.preference.CheckBoxPreference
         android:defaultValue="true"
         android:enabled="false"
         android:summary="summary"
         android:title="MyCheckbox(disabled)" />
     <me.imid.preference.CheckBoxPreference
         android:defaultValue="true"
         android:dependency="checkbox"
         android:summaryOff="off"
         android:summaryOn="on"
         android:title="MyCheckbox(enabled)" />
     <me.imid.preference.CheckBoxPreference
         android:defaultValue="false"
         android:key="checkbox"
         android:summaryOff="off"
         android:summaryOn="on"
         android:title="MyCheckbox(enabled)" />

     <CheckBoxPreference
         android:defaultValue="true"
         android:enabled="false"
         android:summaryOff="off"
         android:summaryOn="on"
         android:title="defalt checkbox(disabled)" />
     <CheckBoxPreference
         android:defaultValue="true"
         android:dependency="checkbox1"
         android:summaryOff="off"
         android:summaryOn="on"
         android:title="defalt checkbox(enabled)" />
     <CheckBoxPreference
         android:defaultValue="false"
         android:key="checkbox1"
         android:summaryOff="off"
         android:summaryOn="on"
         android:title="defalt checkbox(enabled)" />

 </PreferenceScreen>

运行结果：