写在前头，抖音里面很多控件，效果很不错，但是，Android 跟iOS的表现形式以及实现方式，都是有区别的，这里实现Android左右拖拉控件进行视频封面选择。
public class ChoiceCover extends View {
private int mWidth;
private int mHeight;
private Paint mPaint;
private RectF rectF;
private RectF rectF2;
private int rectWidth;
private Bitmap bitmap;
private OnScrollBorderListener onScrollBorderListener;
private int minPx;
public ChoiceCover(Context context) {
super(context);
init();
}
public ChoiceCover(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public ChoiceCover(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
int dp5 = (int) getResources().getDimension(R.dimen.pat_dimen_2);
mPaint.setStrokeWidth(dp5);
//bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.video_thumbnail);
rectWidth = (int) getResources().getDimension(R.dimen.pat_dimen_2);
minPx = (int) getResources().getDimension(R.dimen.pat_dimen_28);
}
public void setMinInterval(int minPx) {
if (mWidth > 0 && minPx > mWidth) {
minPx = mWidth;
}
this.minPx = minPx;
}
public interface OnScrollBorderListener {
void OnScrollBorder(float start, float end);
void onScrollStateChange();
}
public void setOnScrollBorderListener(OnScrollBorderListener listener) {
this.onScrollBorderListener = listener;
}
public float getLeftInterval() {
return rectF.left;
}
public float getRightInterval() {
return rectF2.right;
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mWidth == 0) {
mWidth = getWidth();
mHeight = getHeight();
rectF = new RectF();
rectF.left = 0;
rectF.top = 0;
rectF.right = rectWidth;
rectF.bottom = mHeight;
rectF2 = new RectF();
rectF2.left = minPx + rectWidth;
rectF2.top = 0;
rectF2.right = (rectWidth * 2) + minPx;
rectF2.bottom = mHeight;
}
private float downX;
private boolean isScroll;
@Override
public boolean onTouchEvent(MotionEvent event) {
move(event);
return isScroll;
}
boolean scrollChange;
private boolean move(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
if (downX > rectF.left && downX < rectF2.right) {
isScroll = true;
} else {
Log.e("downX", "downX = " + downX + " left*" + rectF.left + " right*" + rectF2.right);
rectF.left = (downX - minPx / 2) - rectWidth;
rectF.right = downX - minPx / 2;
rectF2.left = downX + minPx / 2;
rectF2.right = (downX + minPx / 2) + rectWidth;
//滑动到左边最大值
if (rectF.left < 0) {
rectF.left = 0;
rectF.right = rectWidth;
rectF2.left = minPx + rectWidth;
rectF2.right = (rectWidth * 2) + minPx;
}
//滑动至右边最大值
if (rectF2.right > mWidth) {
rectF2.right = mWidth;
rectF2.left = mWidth - rectWidth;
rectF.right = mWidth - minPx - rectWidth;
rectF.left = mWidth - minPx - (rectWidth * 2);
}
isScroll = true;
invalidate();
if (onScrollBorderListener != null) {
onScrollBorderListener.OnScrollBorder(rectF.left, rectF2.right);
}
}
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float scrollX = moveX - downX;
if (isScroll) {
rectF.left = rectF.left + scrollX;
rectF.right = rectF.right + scrollX;
rectF2.left = rectF2.left + scrollX;
rectF2.right = rectF2.right + scrollX;
//滑动到左边最大值
if (rectF.left < 0) {
rectF.left = 0;
rectF.right = rectWidth;
rectF2.left = minPx + rectWidth;
rectF2.right = (rectWidth * 2) + minPx;
}
//滑动至右边最大值
if (rectF2.right > mWidth) {
rectF2.right = mWidth;
rectF2.left = mWidth - rectWidth;
rectF.right = mWidth - minPx - rectWidth;
rectF.left = mWidth - minPx - (rectWidth * 2);
}
scrollChange = true;
invalidate();
if (onScrollBorderListener != null) {
onScrollBorderListener.OnScrollBorder(rectF.left, rectF2.right);// 回调选择的区域
}
}
downX = moveX;
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
downX = 0;
isScroll = false;
//invalidate();
if (onScrollBorderListener != null) {
onScrollBorderListener.onScrollStateChange();
}
scrollChange = false;
break;
}
return true;
}
@Override
protected void onDraw(Canvas canvas) {
//TODO 动图托框 绘制
mPaint.setColor(Color.RED);
canvas.drawLine(rectF.left, rectF.top, rectF.left, rectF.bottom, mPaint);
canvas.drawLine(rectF2.right, rectF2.top, rectF2.right, rectF2.bottom, mPaint);
canvas.drawLine(rectF.left, 0, rectF2.right, 0, mPaint);
canvas.drawLine(rectF.left, mHeight, rectF2.right, mHeight, mPaint);
/**
* 添加灰色图层
*/
mPaint.setColor(Color.parseColor("#99313133"));
RectF rectF3 = new RectF();
rectF3.left = 0;
rectF3.top = 0;
rectF3.right = rectF.left;
rectF3.bottom = mHeight;
canvas.drawRect(rectF3, mPaint);
RectF rectF4 = new RectF();
rectF4.left = rectF2.right;
rectF4.top = 0;
rectF4.right = mWidth;
rectF4.bottom = mHeight;
canvas.drawRect(rectF4, mPaint);
}
}
使用方法：直接在布局里面使用当前view,<xxx.ChoiceView />
//监听裁剪器滑动
coverView.setOnScrollBorderListener(new OnScrollBorderListener() {
@Override
public void OnScrollBorder(float start, float end) {
// 游标变更
int startTIme = (int) start;
float result = startTIme / (float) coverView.getWidth();
mCursor = (int) (result * mDuration);
startDurationTime = String.valueOf(start);
}
@Override
public void onScrollStateChange() {
}
});
这里实现原理，主要通过Paint绘制两个不同区域，一个是灰色图层区域，一个是选中封面的框的区域，通过滑动实时绘制改变选择的范围,这里有兴趣的话，可以了解下invalidView跟postInvalidView两者在线程绘制中的区别以及使用场景效率等。
注：可以在这个view的基础上进行延伸，设计改造成仿抖音裁剪视频片段的view。
有疑问可以底下留言，并点个喜欢，一起沟通下
网友评论