小米3系统计算器自己定义开关控件-MySwitchView
近段时间。看到了小米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的代码例如以下：
当中的AnimationTransRunnable类，是一个线程。触发滑块动画的形成，让滑块移动时，平滑细腻，而不是突然跳跃，參考网上的一段代码：http://blog.csdn.net/singwhatiwanna/article/details/9254309package 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(); } } } }
自己的demo中，执行效果图例如以下：
此控件，能够使用到实际的项目中，但须要美工优化两张图片，switch_mask.png
和 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控件。略微做调整。就能够实现了，这里就不再写了。
整体来讲。Android源代码。还是有非常多东西能够挖掘，多读读源代码。能够学习到很多其它的东西。
源代码下载地址：https://github.com/hero-peng/MySwitchView
http://download.csdn.net/detail/coder80/7424759
小米的UI确实不错，雷布斯的东西，看来不是吹牛吹出来的。还是产品独特，能够吸引众多粉丝去花钱购买。
不知道老罗的锤子手机怎样，期待中......
