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

1.前言

            在android4.0以后，有switch控件。相似于iPhone上面滑块的效果。可是仅仅能用在4.0以后的系统中。之前的平台。就无法使用这种控件。

近段时间。看到了小米3手机上自带的计算器app，有这种效果。上面的一个控件，认为非常美丽，而且与iPhone上的效果略有不同，于是自己动手编写了一下这个功能。在编写的过程中。參考过网上的一些demo，执行后，在控件滑动的时候。感觉动画不平滑，有卡顿的现象，重复改动。最后还是有一些问题。感觉是在滑动中的状态，没有合理的控制好。无奈仅仅能參考Google的Switch.java源代码。发现其在onTouchEvent函数中，设置了多个变量，用户控制滑动中的各种状态。

    private static final int TOUCH_MODE_IDLE = 0;
    private static final int TOUCH_MODE_DOWN = 1;
    private static final int TOUCH_MODE_DRAGGING = 2;

     大喜。于是就參考而且移植到自己的项目中来。

先看看小米3自带计算机效果图。

                                                        
     其动画效果例如以下gif图片所看到的：
   
2.开发思路
         主要參考Android源代码的Switch.java类，对onTouchEvent事件进行处理，当中的滑动块，是在onTouchEvent事件触发时，调用invalidate或者postInvalidate函数，触发onDraw方法。进行绘制，产生的动画效果。
       自己实现的MySwitchView extends CompoundButton类。
       自己定义View的代码例如以下：

package com.coder80.switchview;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.ViewConfiguration;
import android.widget.CompoundButton;

@SuppressLint("NewApi")
@TargetApi(Build.VERSION_CODES.CUPCAKE)
public class MySwitchView extends CompoundButton{
    private static final int TOUCH_MODE_IDLE = 0;
    private static final int TOUCH_MODE_DOWN = 1;
    private static final int TOUCH_MODE_DRAGGING = 2;

    // Enum for the "typeface" XML parameter.
    private static final int SANS = 1;
    private static final int SERIF = 2;
    private static final int MONOSPACE = 3;

    private Drawable mThumbDrawable;//滑块Drawable
    private Drawable mTrackDrawable;//圆角矩形Drawable
    private int mThumbTextPadding;
    private int mSwitchMinWidth;
    private int mSwitchPadding;
    private CharSequence mTextOn;
    private CharSequence mTextOff;

    private int mTouchMode;
    private int mTouchSlop;
    private float mTouchX;
    private float mTouchY;
    private VelocityTracker mVelocityTracker = VelocityTracker.obtain();
    private int mMinFlingVelocity;

    private float mThumbPosition;
    private int mSwitchWidth;
    private int mSwitchHeight;
    private int mThumbWidth; // Does not include padding

    private int mSwitchLeft;
    private int mSwitchTop;
    private int mSwitchRight;
    private int mSwitchBottom;

    private TextPaint mTextPaint;
    private ColorStateList mTextColors;
    private Layout mOnLayout;
    private Layout mOffLayout;

    @SuppressWarnings("hiding")
    private final Rect mTempRect = new Rect();

    private static final int[] CHECKED_STATE_SET = {
        android.R.attr.state_checked
    };

    /**
     * Construct a new MySlideView with default styling.
     *
     * @param context The Context that will determine this widget's theming.
     */
    public MySwitchView(Context context) {
        this(context, null);
    }

    /**
     * Construct a new MySlideView with default styling, overriding specific style
     * attributes as requested.
     *
     * @param context The Context that will determine this widget's theming.
     * @param attrs Specification of attributes that should deviate from default
     *            styling.
     */
    public MySwitchView(Context context, AttributeSet attrs) {
        super(context, attrs, R.attr.switchStyle);

        mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        Resources res = getResources();
        mTextPaint.density = res.getDisplayMetrics().density;
//         mTextPaint.setCompatibilityScaling(res.getCompatibilityInfo().applicationScale);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Switch, R.attr.switchStyle, 0);

        mThumbDrawable = a.getDrawable(R.styleable.Switch_thumb);
        mTrackDrawable = a.getDrawable(R.styleable.Switch_track);
        mTextOn = a.getText(R.styleable.Switch_textOn);
        mTextOff = a.getText(R.styleable.Switch_textOff);
        mThumbTextPadding = a.getDimensionPixelSize(R.styleable.Switch_thumbTextPadding, 0);
        mSwitchMinWidth = a.getDimensionPixelSize(R.styleable.Switch_switchMinWidth, 0);
        mSwitchPadding = a.getDimensionPixelSize(R.styleable.Switch_switchPadding, 0);

        int appearance = a.getResourceId(R.styleable.Switch_switchTextAppearance, 0);
        if (appearance != 0) {
            setSwitchTextAppearance(context, appearance);
        }
        a.recycle();

        ViewConfiguration config = ViewConfiguration.get(context);
        mTouchSlop = config.getScaledTouchSlop();
        mMinFlingVelocity = config.getScaledMinimumFlingVelocity();

        // Refresh display with current params
        refreshDrawableState();
        setChecked(isChecked());
        setClickable(true);
    }

    /**
     * Sets the MySlideView text color, size, style, hint color, and highlight color
     * from the specified TextAppearance resource.
     */
    public void setSwitchTextAppearance(Context context, int resid) {
        TypedArray appearance = context.obtainStyledAttributes(resid, R.styleable.TextAppearance);

        ColorStateList colors;
        int ts;

        colors = appearance.getColorStateList(R.styleable.TextAppearance_android_textColor);
        if (colors != null) {
            mTextColors = colors;
        } else {
            // If no color set in TextAppearance, default to the view's
            // textColor
            mTextColors = getTextColors();
        }

        ts = appearance.getDimensionPixelSize(R.styleable.TextAppearance_android_textSize, 0);
        if (ts != 0) {
            if (ts != mTextPaint.getTextSize()) {
                mTextPaint.setTextSize(ts);
                requestLayout();
            }
        }

        int typefaceIndex, styleIndex;

        typefaceIndex = appearance.getInt(R.styleable.TextAppearance_android_typeface, -1);
        styleIndex = appearance.getInt(R.styleable.TextAppearance_android_textStyle, -1);

        setSwitchTypefaceByIndex(typefaceIndex, styleIndex);

        appearance.recycle();
    }

    private void setSwitchTypefaceByIndex(int typefaceIndex, int styleIndex) {
        Typeface tf = null;
        switch (typefaceIndex) {
            case SANS:
                tf = Typeface.SANS_SERIF;
                break;

            case SERIF:
                tf = Typeface.SERIF;
                break;

            case MONOSPACE:
                tf = Typeface.MONOSPACE;
                break;
        }
        setSwitchTypeface(tf, styleIndex);
    }

    /**
     * Sets the typeface and style in which the text should be displayed on the
     * switch, and turns on the fake bold and italic bits in the Paint if the
     * Typeface that you provided does not have all the bits in the style that
     * you specified.
     */
    public void setSwitchTypeface(Typeface tf, int style) {
        if (style > 0) {
            if (tf == null) {
                tf = Typeface.defaultFromStyle(style);
            } else {
                tf = Typeface.create(tf, style);
            }
            setSwitchTypeface(tf);
            // now compute what (if any) algorithmic styling is needed
            int typefaceStyle = tf != null ? tf.getStyle() : 0;
            int need = style & ~typefaceStyle;
            mTextPaint.setFakeBoldText((need & Typeface.BOLD) != 0);
            mTextPaint.setTextSkewX((need & Typeface.ITALIC) != 0 ? -0.25f : 0);
        } else {
            mTextPaint.setFakeBoldText(false);
            mTextPaint.setTextSkewX(0);
            setSwitchTypeface(tf);
        }
    }

    /**
     * Sets the typeface in which the text should be displayed on the switch.
     * Note that not all Typeface families actually have bold and italic
     * variants, so you may need to use
     * {@link #setSwitchTypeface(Typeface, int)} to get the appearance that you
     * actually want.
     *
     * @attr ref android.R.styleable#TextView_typeface
     * @attr ref android.R.styleable#TextView_textStyle
     */
    public void setSwitchTypeface(Typeface tf) {
        if (mTextPaint.getTypeface() != tf) {
            mTextPaint.setTypeface(tf);
            requestLayout();
            invalidate();
        }
    }

    /**
     * Returns the text displayed when the button is in the checked state.
     */
    public CharSequence getTextOn() {
        return mTextOn;
    }

    /**
     * Sets the text displayed when the button is in the checked state.
     */
    public void setTextOn(CharSequence textOn) {
        mTextOn = textOn;
        requestLayout();
    }

    /**
     * Returns the text displayed when the button is not in the checked state.
     */
    public CharSequence getTextOff() {
        return mTextOff;
    }

    /**
     * Sets the text displayed when the button is not in the checked state.
     */
    public void setTextOff(CharSequence textOff) {
        mTextOff = textOff;
        requestLayout();
    }

    private Layout makeLayout(CharSequence text) {
        return new StaticLayout(text, mTextPaint, (int) Math.ceil(Layout.getDesiredWidth(text,
                mTextPaint)), Layout.Alignment.ALIGN_NORMAL, 1.f, 0, true);
    }

    @Override
    public 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);

        if (mOnLayout == null) {
            mOnLayout = makeLayout(mTextOn);
        }
        if (mOffLayout == null) {
            mOffLayout = makeLayout(mTextOff);
        }

        mTrackDrawable.getPadding(mTempRect);
        final int maxTextWidth = Math.max(mOnLayout.getWidth(), mOffLayout.getWidth());
        final int switchWidth = Math.max(mSwitchMinWidth, maxTextWidth * 2 + mThumbTextPadding * 4
                + mTempRect.left + mTempRect.right);
        final int switchHeight = mTrackDrawable.getIntrinsicHeight();

        mThumbWidth = maxTextWidth + mThumbTextPadding * 1;

        switch (widthMode) {
            case MeasureSpec.AT_MOST:
                widthSize = Math.min(widthSize, switchWidth);
                break;

            case MeasureSpec.UNSPECIFIED:
                widthSize = switchWidth;
                break;

            case MeasureSpec.EXACTLY:
                // Just use what we were given
                break;
        }

        switch (heightMode) {
            case MeasureSpec.AT_MOST:
                heightSize = Math.min(heightSize, switchHeight);
                break;

            case MeasureSpec.UNSPECIFIED:
                heightSize = switchHeight;
                break;

            case MeasureSpec.EXACTLY:
                // Just use what we were given
                break;
        }

        mSwitchWidth = switchWidth;
        mSwitchHeight = switchHeight;

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int measuredHeight = getMeasuredHeight();
        if (measuredHeight < switchHeight) {
            setMeasuredDimension(getMeasuredWidth(), switchHeight);
        }
        Log.e("MySlideView", "onMeasure mSwitchWidth = " + mSwitchWidth+ ",mSwitchHeight = " + mSwitchHeight + ",mThumbWidth = " + mThumbWidth);
    }

    /**
     * @return true if (x, y) is within the target area of the switch thumb
     */
    private boolean hitThumb(float x, float y) {
        mThumbDrawable.getPadding(mTempRect);
        final int thumbTop = mSwitchTop - mTouchSlop;
        final int thumbLeft = mSwitchLeft + (int) (mThumbPosition + 0.5f) - mTouchSlop;
        final int thumbRight = thumbLeft + mThumbWidth + mTempRect.left + mTempRect.right + mTouchSlop;
        final int thumbBottom = mSwitchBottom + mTouchSlop;
        Log.e("MySlideView", "hitThumb thumbLeft = " + thumbLeft+ ",thumbRight = " + thumbRight + ",thumbTop = " + thumbTop + ",thumbBottom = " + thumbBottom + ",mThumbPosition = " + mThumbPosition);
        return x > thumbLeft && x < thumbRight && y > thumbTop && y < thumbBottom;
    }

    /**
     * @return true if (x, y) is within the target area of the switch track
     */
    private boolean hitTrack(float x, float y) {
        Log.e("MySlideView", "hitTrack x = " + x+ ",y = " + y);
        return x > 0 && x < mSwitchWidth && y > 0 && y < mSwitchHeight;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        mVelocityTracker.addMovement(ev);
        final int action = ev.getActionMasked();
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                final float x = ev.getX();
                final float y = ev.getY();
                Log.e("MySlideView", "onTouchEvent ACTION_DOWN x = " + x+ ",y = " + y);
                if (hitTrack(x, y)) {
                    mTouchMode = TOUCH_MODE_DOWN;
                    mTouchX = x;
                    mTouchY = y;
                }
                break;
            }

            case MotionEvent.ACTION_MOVE: {
                switch (mTouchMode) {
                    case TOUCH_MODE_IDLE:
                        // Didn't target the thumb, treat normally.
                        Log.e("MySlideView", "onTouchEvent ACTION_MOVE TOUCH_MODE_IDLE ");
                        break;

                    case TOUCH_MODE_DOWN: {
                        final float x = ev.getX();
                        final float y = ev.getY();
                        Log.e("MySlideView", "onTouchEvent ACTION_MOVE TOUCH_MODE_DOWN ");
                        if (Math.abs(x - mTouchX) > mTouchSlop
                                || Math.abs(y - mTouchY) > mTouchSlop) {
                            mTouchMode = TOUCH_MODE_DRAGGING;
                            getParent().requestDisallowInterceptTouchEvent(true);
                            mTouchX = x;
                            mTouchY = y;
                            Log.e("MySlideView", "onTouchEvent ACTION_MOVE TOUCH_MODE_DOWN ");
                            return true;
                        }
                        break;
                    }

                    case TOUCH_MODE_DRAGGING: {
                        final float x = ev.getX();
                        final float dx = x - mTouchX;
                        Log.e("MySlideView", "onTouchEvent ACTION_MOVE TOUCH_MODE_DRAGGING ");
                        float newPos = Math.max(0,
                                Math.min(mThumbPosition + dx, getThumbScrollRange()));
                        if (newPos != mThumbPosition) {
                            mThumbPosition = newPos;
                            mTouchX = x;
                            Log.e("MySlideView", "onTouchEvent ACTION_MOVE TOUCH_MODE_DRAGGING ");
                            invalidate();
                        }
                        return true;
                    }
                }
                break;
            }

            case MotionEvent.ACTION_UP:
                Log.e("MySlideView", "onTouchEvent ACTION_MOVE ACTION_UP mTouchMode = " + mTouchMode);
            case MotionEvent.ACTION_CANCEL:
                Log.e("MySlideView", "onTouchEvent ACTION_MOVE ACTION_CANCEL mTouchMode = " + mTouchMode);
                if (mTouchMode == TOUCH_MODE_DRAGGING) {
                    stopDrag(ev);
                    return true;
                }
                mTouchMode = TOUCH_MODE_IDLE;
                mVelocityTracker.clear();
                break;
        }
        return super.onTouchEvent(ev);
    }

    private void cancelSuperTouch(MotionEvent ev) {
        MotionEvent cancel = MotionEvent.obtain(ev);
        cancel.setAction(MotionEvent.ACTION_CANCEL);
        super.onTouchEvent(cancel);
        cancel.recycle();
    }

    /**
     * Called from onTouchEvent to end a drag operation.
     *
     * @param ev Event that triggered the end of drag mode - ACTION_UP or
     *            ACTION_CANCEL
     */
    private void stopDrag(MotionEvent ev) {
        mTouchMode = TOUCH_MODE_IDLE;
        // Up and not canceled, also checks the switch has not been disabled
        // during the drag
        boolean commitChange = ev.getAction() == MotionEvent.ACTION_UP && isEnabled();

        cancelSuperTouch(ev);

        if (commitChange) {
            boolean newState;
            mVelocityTracker.computeCurrentVelocity(1000);
            float xvel = mVelocityTracker.getXVelocity();
            if (Math.abs(xvel) > mMinFlingVelocity) {
                newState = xvel > 0;
            } else {
                newState = getTargetCheckedState();
            }
            animateThumbToCheckedState(newState);
        } else {
            animateThumbToCheckedState(isChecked());
        }
    }

    private void animateThumbToCheckedState(boolean newCheckedState) {
        // TODO animate!
        // float targetPos = newCheckedState ?

0 : getThumbScrollRange();
        // mThumbPosition = targetPos;
        setChecked(newCheckedState);
    }

    /**
     * Called from setChecked to start the Animate of the Thumb.
     * @param currPos the current position of the mThumbDrawable
     * @param checked the checked control is on or off
     */
    private void startAnimateToCheckedState(float currPos,boolean checked){
        float start = 0.0f;
        float end = 0.0f;
        if(checked){
            start = currPos;
            end = getThumbScrollRange();
        }else{
            start = currPos;
            end = 0;
        }
        if (mTouchMode == TOUCH_MODE_IDLE || mTouchMode == TOUCH_MODE_DOWN) {
            AnimationTransRunnable aTransRunnable = new AnimationTransRunnable(start, end, 1);
            new Thread(aTransRunnable).start();
        }
    }

    private boolean getTargetCheckedState() {
        return mThumbPosition >= getThumbScrollRange() / 2;
//        return false;
    }

    @Override
    public void setChecked(boolean checked) {
        super.setChecked(checked);
        Log.e("MySlideView", "setChecked checked = " + checked + ",Range = " + getThumbScrollRange() + ",mThumbPosition = " + mThumbPosition);
        startAnimateToCheckedState(mThumbPosition,checked);
    }

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

        mThumbPosition = isChecked() ?

getThumbScrollRange() : 0;

        int switchRight = getWidth() - getPaddingRight();
        int switchLeft = switchRight - mSwitchWidth;
        int switchTop = 0;
        int switchBottom = 0;
        switch (getGravity() & Gravity.VERTICAL_GRAVITY_MASK) {
            default:
            case Gravity.TOP:
                switchTop = getPaddingTop();
                switchBottom = switchTop + mSwitchHeight;
                break;

            case Gravity.CENTER_VERTICAL:
                switchTop = (getPaddingTop() + getHeight() - getPaddingBottom()) / 2
                        - mSwitchHeight / 2;
                switchBottom = switchTop + mSwitchHeight;
                break;

            case Gravity.BOTTOM:
                switchBottom = getHeight() - getPaddingBottom();
                switchTop = switchBottom - mSwitchHeight;
                break;
        }

        mSwitchLeft = switchLeft;
        mSwitchTop = switchTop;
        mSwitchBottom = switchBottom;
        mSwitchRight = switchRight;
        Log.e("Switch", "onLayout mSwitchLeft = " + mSwitchLeft+ ",mSwitchTop = " + mSwitchTop + ",mSwitchBottom = " + mSwitchBottom + ",mSwitchRight = " + mSwitchRight + ",range = " + getThumbScrollRange());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // Draw the switch
        int switchLeft = mSwitchLeft;
        int switchTop = mSwitchTop;
        int switchRight = mSwitchRight;
        int switchBottom = mSwitchBottom;

        mTrackDrawable.setBounds(switchLeft, switchTop, switchRight, switchBottom);
        mTrackDrawable.draw(canvas);

        canvas.save();

        mTrackDrawable.getPadding(mTempRect);
        int switchInnerLeft = switchLeft + mTempRect.left;
        int switchInnerTop = switchTop + mTempRect.top;
        int switchInnerRight = switchRight - mTempRect.right;
        int switchInnerBottom = switchBottom - mTempRect.bottom;
        canvas.clipRect(switchInnerLeft, switchTop, switchInnerRight, switchBottom);

        mThumbDrawable.getPadding(mTempRect);
        final int thumbPos = (int) (mThumbPosition + 0.5f);
        int thumbLeft = switchInnerLeft - mTempRect.left + thumbPos;
        int thumbRight = switchInnerLeft + thumbPos + mThumbWidth + mTempRect.right;

        mThumbDrawable.setBounds(thumbLeft, switchTop, thumbRight, switchBottom);
        mThumbDrawable.draw(canvas);

        // mTextColors should not be null, but just in case
        if (mTextColors != null) {
            mTextPaint.setColor(mTextColors.getColorForState(getDrawableState(),
                    mTextColors.getDefaultColor()));
        }
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.drawableState = getDrawableState();

//        Layout switchText = getTargetCheckedState() ?

mOnLayout : mOffLayout;
        Layout switchText = mOnLayout;
        // the margin between the switchText and mThumbDrawable
        int textMargin = (switchInnerRight - switchInnerLeft - mTempRect.left - mTempRect.right - switchText.getWidth() - mThumbWidth)/2 - 4;

        int textLeft = thumbLeft - textMargin  - switchText.getWidth();
        int textRight = thumbRight + textMargin;

        // draw the left text
        canvas.translate(textLeft,
                (switchInnerTop + switchInnerBottom) / 2 - switchText.getHeight() / 2);
        switchText.draw(canvas);
        canvas.restore();

        canvas.save();
        switchText = mOffLayout;
        // draw the right text
        canvas.translate(textRight,
                (switchInnerTop + switchInnerBottom) / 2 - switchText.getHeight() / 2);
        switchText.draw(canvas);
        canvas.restore();
    }

    @Override
    public int getCompoundPaddingRight() {
        int padding = super.getCompoundPaddingRight() + mSwitchWidth;
        if (!TextUtils.isEmpty(getText())) {
            padding += mSwitchPadding;
        }
        return padding;
    }

    private int getThumbScrollRange() {
        if (mTrackDrawable == null) {
            return 0;
        }
        mTrackDrawable.getPadding(mTempRect);
        return mSwitchWidth - mThumbWidth - mTempRect.left - mTempRect.right;
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }
        return drawableState;
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();

        int[] myDrawableState = getDrawableState();

        // Set the state of the Drawable
        // Drawable may be null when checked state is set from XML, from super
        // constructor
        if (mThumbDrawable != null)
            mThumbDrawable.setState(myDrawableState);
        if (mTrackDrawable != null)
            mTrackDrawable.setState(myDrawableState);
        invalidate();
    }

    @Override
    protected boolean verifyDrawable(Drawable who) {
        return super.verifyDrawable(who) || who == mThumbDrawable || who == mTrackDrawable;
    }

    /**
     * AnimationTransRunnable 做滑动动画所使用的线程
     */
    private class AnimationTransRunnable implements Runnable {
        private int srcX, dstX;
        private int duration;
        private String TAG = AnimationTransRunnable.class.getSimpleName();
        /**
         * 滑动动画
         * @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 delta = (dstX > srcX ? 4 : -4);
            if (duration == 0) {
                mThumbPosition = isChecked() ? getThumbScrollRange() : 0;
                postInvalidate();
            } else {
                Log.e(TAG, "start Animation: [ " + srcX + " , " + dstX + " ]");
                int x = srcX + delta;
                while (Math.abs(x - dstX) > 5) {
                    mThumbPosition = x;
                    postInvalidate();
                    x += delta;
                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                mThumbPosition = dstX;
                postInvalidate();
            }
        }
    }

}

       当中的AnimationTransRunnable类，是一个线程。触发滑块动画的形成，让滑块移动时，平滑细腻，而不是突然跳跃，參考网上的一段代码：http://blog.csdn.net/singwhatiwanna/article/details/9254309
      自己的demo中，执行效果图例如以下：
         
     此控件，能够使用到实际的项目中，但须要美工优化两张图片，switch_mask.png

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ29kZXI4MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" align="middle" />   
    和 slip_btn.png
    当中图片slip_btn.png和switch_mask.png的高度要一致，效果会更好。
      另外，layout文件例如以下：    

    <com.coder80.switchview.MySwitchView
        android:id="@+id/my_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="32dip"
        android:layout_marginTop="32dp"
        android:background="#ffff0000" />

MySwitchView      
onDraw方法中，主要是绘制滑块和左右两边的text，涉及到的计算比較复杂，当中的StaticLayout函数。主要是用于计算text的宽度和高度。此处使用，非常合适。  
     此控件，略微做一些改动，能够做成锁屏效果。非常多应用自带锁屏功能，比如多米音乐在执行时，其锁屏效果例如以下所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ29kZXI4MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" align="middle" />
     这个解锁屏的效果。就能够使用上述的MySwitchView控件。略微做调整。就能够实现了，这里就不再写了。
     整体来讲。Android源代码。还是有非常多东西能够挖掘，多读读源代码。能够学习到很多其它的东西。

     源代码下载地址：https://github.com/hero-peng/MySwitchView
http://download.csdn.net/detail/coder80/7424759
         小米的UI确实不错，雷布斯的东西，看来不是吹牛吹出来的。还是产品独特，能够吸引众多粉丝去花钱购买。

不知道老罗的锤子手机怎样，期待中......