先上个效果图
1.控件主代码
public class SlideView extends View {
private float width = -1;
private float height = -1;
private Paint bluePaint = null;
private Paint whitePaint = null;
private Paint textPaint = null;
private float strokeWidth = 3;
private float contentBoundary = 10;
private float btnRadius = -1;
private float currentX = -1;
private float minX = -1;
private float maxX = -1;
private boolean clicked = false;
private OnSlideListener listener;
public SlideView(Context context) {
this(context, null);
}
public SlideView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}
public SlideView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
bluePaint = new Paint();
bluePaint.setAntiAlias(true);
bluePaint.setColor(Color.parseColor("#099CE9"));
whitePaint = new Paint();
whitePaint.setAntiAlias(true);
whitePaint.setColor(Color.parseColor("#FFFFFF"));
textPaint = new Paint();
textPaint.setColor(Color.parseColor("#909090"));
textPaint.setTextSize(26);
textPaint.setTextAlign(Paint.Align.CENTER);
}
public void setOnSlideListener(OnSlideListener listener) {
this.listener = listener;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//根据控件的宽高设置内部数值
if (width != getMeasuredWidth() || height != getMeasuredHeight()) {
width = getMeasuredWidth();
height = getMeasuredHeight();
btnRadius = (height - (contentBoundary * 2)) / 2;
minX = contentBoundary + btnRadius;
maxX = width - contentBoundary - btnRadius;
currentX = minX;
invalidate();
}
}
/**
* 恢复到原始状态
*/
public void reset() {
currentX = minX;
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
getParent().requestDisallowInterceptTouchEvent(true);
float x = event.getX();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (x >= currentX - btnRadius && x <= currentX + btnRadius) {
clicked = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (!clicked) {
return true;
}
if (x < minX) {
currentX = minX;
} else if (x > maxX) {
currentX = maxX;
} else {
currentX = x;
}
invalidate();
break;
case MotionEvent.ACTION_UP:
clicked = false;
if (listener != null) {
if (currentX < maxX) {
listener.onCancel(this);
} else {
listener.onComplete(this);
}
}
currentX = minX;
invalidate();
break;
}
return true;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (width == -1 || height == -1) {
return;
}
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
| Paint.FILTER_BITMAP_FLAG));
drawRounRect(canvas, 0, 0, width, height, bluePaint);
drawRounRect(canvas, strokeWidth, strokeWidth, width - strokeWidth, height - strokeWidth, whitePaint);
drawRounRect(canvas, contentBoundary, contentBoundary, currentX + btnRadius, height - contentBoundary, bluePaint);
}
/**
* 画半圆的矩形
*/
private void drawRounRect(Canvas canvas, float l, float t, float r, float b, Paint paint) {
float h2 = (b - t) / 2;
canvas.drawCircle(l + h2, t + h2, h2, paint);
canvas.drawCircle(r - h2, t + h2, h2, paint);
canvas.drawRect(l + h2, t, r - h2, b, paint);
}
}
2.监听类代码
public interface OnSlideListener {
void onComplete(View v);
void onCancel(View v);
}
3.在布局文件中调用控件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.sandu.mavenproject.widget.SlideView
android:id="@+id/slide_view"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:layout_marginTop="@dimen/px20dp" />
</RelativeLayout>
4.在activity中设置回调
SlideView slideView = (SlideView) findViewById(R.id.slide_view);
slideView.setOnSlideListener(new OnSlideListener() {
@Override
public void onComplete(View v) {
Toast.makeText(MainActivity.this, "滑动成功", Toast.LENGTH_SHORT).show();
}
@Override
public void onCancel(View v) {
Toast.makeText(MainActivity.this, "滑动取消", Toast.LENGTH_SHORT).show();
}
});
补充一下
为了解决控件的横向滑动与纵向滑动的冲突,添加了下面代码
getParent().requestDisallowInterceptTouchEvent(true);