1.前言
在android4.0以后,有switch控件,类似于iPhone上面滑块的效果,但是只能用在4.0以后的系统中,之前的平台,就无法使用这种控件。近段时间,看到了小米3手机上自带的计算器app,有这样的效果,上面的一个控件,觉得很漂亮,并且与iPhone上的效果略有不同,于是自己动手编写了一下这个功能,在编写的过程中,参考过网上的一些demo,运行后,在控件滑动的时候,感觉动画不平滑,有卡顿的现象,反复修改,最后还是有一些问题,感觉是在滑动中的状态,没有合理的控制好。无奈只能参考Google的Switch.java源码,发现其在onTouchEvent函数中,设置了多个变量,用户控制滑动中的各种状态。
其动画效果如下gif图片所示:
2.开发思路
主要参考Android源码的Switch.java类,对onTouchEvent事件进行处理,其中的滑动块,是在onTouchEvent事件触发时,调用invalidate或者postInvalidate函数,触发onDraw方法,进行绘制,产生的动画效果。
自己实现的MySwitchView extends CompoundButton类。
自定义View的代码如下:
自己的demo中,运行效果图如下:
此控件,可以使用到实际的项目中,但需要美工优化两张图片,switch_mask.png
和 slip_btn.png
其中图片slip_btn.png和switch_mask.png的高度要一致,效果会更好。
另外,layout文件如下:
此控件,稍微做一些修改,可以做成锁屏效果。很多应用自带锁屏功能,例如多米音乐在运行时,其锁屏效果如下所示:
这个解锁屏的效果,就可以使用上述的MySwitchView控件,稍微做调整,就可以实现了,这里就不再写了。
总体来讲,Android源码,还是有很多东西可以挖掘,多读读源码,可以学习到更多的东西。
源码下载地址:https://github.com/hero-peng/MySwitchView
http://download.csdn.net/detail/coder80/7424759
小米的UI确实不错,雷布斯的东西,看来不是吹牛吹出来的,还是产品独特,能够吸引众多粉丝去花钱购买。不知道老罗的锤子手机如何,期待中......
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
和 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的宽度和高度。此处使用,非常合适。 此控件,稍微做一些修改,可以做成锁屏效果。很多应用自带锁屏功能,例如多米音乐在运行时,其锁屏效果如下所示:
这个解锁屏的效果,就可以使用上述的MySwitchView控件,稍微做调整,就可以实现了,这里就不再写了。
总体来讲,Android源码,还是有很多东西可以挖掘,多读读源码,可以学习到更多的东西。
源码下载地址:https://github.com/hero-peng/MySwitchView
http://download.csdn.net/detail/coder80/7424759
小米的UI确实不错,雷布斯的东西,看来不是吹牛吹出来的,还是产品独特,能够吸引众多粉丝去花钱购买。不知道老罗的锤子手机如何,期待中......