[置顶] 自定义控件：onDraw 方法实现仿 iOS 的开关效果

概述

自定义View的概述

View的生命周期

onFinishedInflate()

onSizeChanged()

onMeasure()

onLayout()

onDraw()

自定义View的流程

开始动手

初始化成员

/* 画笔 */
Paint mPaint;
/* 背景图片 */
Bitmap mSwitchBackground;
/* 滑动图片 */
Bitmap mSlideButton;
/* 最大滑动距离 */
int mMaxLeft;
/* 当前滑动距离 */
int mCurrLeft;
/* 当前状态 */
boolean isOpen = false;

/* 初始化各种组件 */
private void init(AttributeSet attrs) {
// 初始化画笔
mPaint = new Paint();
mPaint.setColor(Color.BLUE);

// 初始化背景图片
mSwitchBackground = BitmapFactory.decodeResource(getResources(),R.drawable.switch_background);

mSlideButton = BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);

// 计算最大可滑动距离
mMaxLeft = mSwitchBackground.getWidth() - mSlideButton.getWidth();

// 设置开关事件
// 已将点击事件的逻辑，移至 onTouchEvent 的 ACTION_UP 中
}

/* 设置状态，此方法只改变 mCurrLeft ，不引起重绘*/
private void setStatus(boolean status){
if (status){
mCurrLeft = mMaxLeft;
isOpen = true;
} else {
mCurrLeft = 0;
isOpen = false;
}
}

测量并绘制

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 将 View 的宽高设置为背景图的宽高
setMeasuredDimension(mSwitchBackground.getWidth(), mSwitchBackground.getHeight());
}

mCurrLeft

mCurrLeft

invalidate()

@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(mSwitchBackground, 0, 0, mPaint);
canvas.drawBitmap(mSlideButton, mCurrLeft, 0, mPaint);
}

处理 onTouchEvent

// 开始位置
int startX;

/**
* event.getX() 基于控件本身
* event.getRawX() 基于整个屏幕
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
int distance = (int) (event.getX() - startX);
mCurrLeft += distance;
startX = (int) event.getX();

break;
}

// 边界判断，不让滑块滑出边界
if (mCurrLeft < 0){
mCurrLeft = 0;
}

if (mCurrLeft > mMaxLeft){
mCurrLeft = mMaxLeft;
}

// 引起重绘（重新调用 onDraw 方法）
invalidate();
return true;
}

ACTION_MOVE

处理状态改变回调

/** 定义接口 */
public interface OnOpenedListener {
void onChecked(View v, boolean isOpened);
}

/** 定义成员变量 */
private onOpenedListener mOpenedkListener;

/** 提供设置回调的方法 */
public void setOnCheckChangedListener(onOpenedListener checkedkListener) {
this.mOpenedkListener = checkedkListener;
}

//处理回调
if (mOpenedkListener != null){
mOpenedkListener.onChecked(this, isOpen);
}

事件共存

onTouchEvent

return super.onTouchEvent(envent)

onTouchEvent

ACTION_UP

onTouchEvent

onClickListener

moveX <5

moveX >= 5

setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (isClick ){
setStatus(!isOpen);
// 引起重绘（重新调用 onDraw 方法）
invalidate();
}

}
});

booleal isClick;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
int distance = (int) (event.getX() - startX);
mCurrLeft += distance;
startX = (int) event.getX();

// 移动的距离必须用绝对值，避免往回滑，moveX反向减小
moveX += Math.abs(distance);
break;
case MotionEvent.ACTION_UP:
if (moveX >= 5){
isClick = false;
// 用户的本意是滑动
setStatus(mCurrLeft >= mMaxLeft / 2);

//处理回调
if (mOpenedkListener != null){
mOpenedkListener.onChecked(this, isOpen);
}

} else {
isClick = true;
// 用户的本意是点击，交给 onClickListener

}

// 完成一次滑动，则 moveX 必须清零
moveX = 0;
break;
}

// 边界判断
...

// 引起重绘
invalidate();
return true;
}

自定义属性

<declare-styleable name="SwitchButton">
<attr name="isOpened" format="boolean" />
<attr name="slide_button" format="reference" />
<attr name="switch_background" format="reference" />
</declare-styleable>

xmlns:ifavor="http://schemas.android.com/apk/res/res-auto"

<com.example.customeview.switchbutton.SwitchButton
android:layout_centerInParent="true"
android:id="@+id/sb_button"

ifavor:isOpened="true"
ifavor:slide_button="@drawable/slide_button"
ifavor:switch_background="@drawable/switch_background"

android:layout_width="wrap_content"
android:layout_height="wrap_content" />

附录