抖音最近很火，可以说是app界的方向标。各种模仿也是层出不穷，最近项目有一个需求，需要做视频截取，两边拖动，选取中间的视频部分。
效果如下：
image.png
实现思路：通过自定义view 根据手指onTouch 坐标动态刷新ondraw 绘制刷新的视图，回调对应的区域阀值。
- 自定义拖动视图SeekView
public class VideoSliceSeekBar extends View {
enum SelectThumb {
//没有选中滑块
SELECT_THUMB_NONE,
//选中左边滑块
SELECT_THUMB_LEFT,
//选中右边滑块
SELECT_THUMB_RIGHT,
}
public VideoSliceSeekBar(Context context) {
this(context, null);
}
public VideoSliceSeekBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public VideoSliceSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initValue();
}
上面定义了对应滑动的枚举，左边滑动view 右边以及另外的区域
private void initValue() {
paintThumb.setAntiAlias(true);
paintThumb.setFilterBitmap(true);
int resSweepLeft = R.drawable.ic_produce_cut_left;
thumbSliceLeft = BitmapFactory.decodeResource(getResources(), resSweepLeft);
int resSweepRight = R.drawable.ic_produce_cut_right;
thumbSliceRight = BitmapFactory.decodeResource(getResources(), resSweepRight);
int resFrame = R.drawable.ic_produce_cut_frame;
thumbFrame = BitmapFactory.decodeResource(getResources(), resFrame);
topBottomPadding = DensityUtil.dp2px(getContext(), 6);
progress = ObjectAnimator.ofFloat(this, "progress", 0).setDuration(400);
progress.setInterpolator(new LinearInterpolator());
}
初始化画笔，设置左右两块拖动的bitmap 以及跟随视频进度播放的帧 。
- 2.根据布局的摆放计算缩放比例：
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (!init) {
KLog.d(".." + getMeasuredWidth() + ".." + getWidth() + ".." + getLeft());
init = true;
//计算滑块缩放比例
float ratio = (float) (getMeasuredHeight() - topBottomPadding * 2) / thumbSliceLeft.getHeight();
Matrix matrix = new Matrix();
matrix.postScale(ratio, ratio);
//计算指针缩放比例
float frameRatio = (float) getMeasuredHeight() / thumbFrame.getHeight();
Matrix frameMatrix = new Matrix();
frameMatrix.postScale(frameRatio, frameRatio);
thumbSliceLeft = Bitmap.createBitmap(thumbSliceLeft, 0, 0, thumbSliceLeft.getWidth(), thumbSliceLeft.getHeight(), matrix, false);
thumbSliceRight = Bitmap.createBitmap(thumbSliceRight, 0, 0, thumbSliceRight.getWidth(), thumbSliceRight.getHeight(), matrix, false);
thumbFrame = Bitmap.createBitmap(thumbFrame, 0, 0, thumbFrame.getWidth(), thumbFrame.getHeight(), frameMatrix, false);
thumbSliceWidth = thumbSliceLeft.getWidth();
KLog.d("..." + thumbSliceWidth);
}
}
下面是重点环节：
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!blocked) {
int mx = (int) event.getX();
KLog.d("..." + mx);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
actionDownX = mx;
isDispatch = false;
if (mx >= thumbSliceLeftX - touchThumbPadding && mx <= thumbSliceLeftX + thumbSliceWidth + touchThumbPadding) {
selectedThumb = SelectThumb.SELECT_THUMB_LEFT;
isDispatch = true;
if (listener != null) {
listener.onSeekStart();
}
} else if (mx >= thumbSliceRightX - touchThumbPadding && mx <= thumbSliceRightX + thumbSliceWidth + touchThumbPadding) {
selectedThumb = SelectThumb.SELECT_THUMB_RIGHT;
isDispatch = true;
if (listener != null) {
listener.onSeekStart();
}
} else {
selectedThumb = SelectThumb.SELECT_THUMB_NONE;
}
break;
case MotionEvent.ACTION_MOVE:
if (selectedThumb == SelectThumb.SELECT_THUMB_LEFT || selectedThumb == SelectThumb.SELECT_THUMB_RIGHT) {
if (adjustSliceXY(mx)) {
invalidate();
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
isDispatch = false;
if (adjustSliceXY(mx)) {
invalidate();
}
selectedThumb = SelectThumb.SELECT_THUMB_NONE;
if (listener != null) {
listener.onSeekEnd();
}
break;
}
}
return isDispatch;
}
上面根据手指按下ACTION_DOWN 根据当前按下的距离去区分当前是触摸左边 还是右边滑块，在ACTION_MOVE 刷新绘制，回调x y轴坐标
- 根据手指触摸位置回调对应位置 给视频播放器刷新
private boolean adjustSliceXY(int actionX) {
//防止触控立刻移动
if (!isBlocked && Math.abs(actionX - actionDownX) < 5) {
return false;
}
boolean isMoving = false;
actionX = actionX - thumbSliceWidth / 2;
if (selectedThumb == SelectThumb.SELECT_THUMB_LEFT) {
int minLeft = getPaddingLeft();
int maxRight = thumbSliceRightX - thumbSliceWidth - minLeftToRightDistance;
if (actionX < minLeft && thumbSliceLeftX != minLeft) {
thumbSliceLeftX = minLeft;
isMoving = true;
} else if (actionX >= minLeft && actionX <= maxRight) {
thumbSliceLeftX = actionX;
isMoving = true;
} else if (actionX > maxRight && thumbSliceLeftX != maxRight) {
thumbSliceLeftX = maxRight;
isMoving = true;
}
} else if (selectedThumb == SelectThumb.SELECT_THUMB_RIGHT) {
int minLeft = thumbSliceLeftX + thumbSliceWidth + minLeftToRightDistance;
int maxRight = getWidth() - thumbSliceWidth - getPaddingRight();
if (actionX < minLeft && thumbSliceRightX != minLeft) {
thumbSliceRightX = minLeft;
isMoving = true;
} else if (actionX >= minLeft && actionX <= maxRight) {
thumbSliceRightX = actionX;
isMoving = true;
} else if (actionX > maxRight && thumbSliceRightX != maxRight) {
thumbSliceRightX = maxRight;
isMoving = true;
}
}
if (isMoving) {
if (listener != null) {
KLog.d("..." + thumbSliceLeftX);
listener.seekBarValueChanged(thumbSliceLeftX - thumbSliceLeftInitX,
thumbSliceRightX - thumbSliceLeftInitX - thumbSliceWidth, selectedThumb);
}
}
return isMoving;
}
实时刷新控件视图，画布对应绘制。
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int resPaddingColor = android.R.color.white;
paintThumb.setColor(getResources().getColor(resPaddingColor));
//上下两条线
int topBottomHeight = 5;
canvas.drawRect(thumbSliceLeftX + thumbSliceLeft.getWidth(), topBottomPadding, thumbSliceRightX, topBottomHeight + topBottomPadding, paintThumb);
canvas.drawRect(thumbSliceLeftX + thumbSliceLeft.getWidth(), thumbSliceLeft.getHeight() - topBottomHeight + topBottomPadding, thumbSliceRightX, thumbSliceLeft.getHeight() + topBottomPadding, paintThumb);
//左右两块透明区域
int resBackground = android.R.color.black;
paintThumb.setColor(getResources().getColor(resBackground));
paintThumb.setAlpha((int) (255 * 0.3));
canvas.drawRect(0, topBottomPadding, thumbSliceRightX + thumbSliceWidth, thumbSliceLeft.getHeight() + topBottomPadding, paintThumb);
canvas.drawRect(thumbSliceRightX, topBottomPadding, getWidth(), thumbSliceLeft.getHeight() + topBottomPadding, paintThumb);
//绘制图片
paintThumb.setAlpha(255);
canvas.drawBitmap(thumbSliceLeft, thumbSliceLeftX, topBottomPadding, paintThumb);
canvas.drawBitmap(thumbSliceRight, thumbSliceRightX, topBottomPadding, paintThumb);
//绘制进度条
if (needFrameProgress) {
float distance = frameProgress * getContentWidth();
canvas.drawBitmap(thumbFrame, distance + getPaddingLeft() + thumbSliceWidth - thumbFrame.getWidth() / 2f, 0, paintThumb);
}
}
上面绘制左右拖动按钮的bitamp 根据拖动的距离去绘制视图。
