Android自定义View具体自定义控件

自定义View 视频截取控件

2020-01-17  本文已影响0人  程序员阿兵

抖音最近很火,可以说是app界的方向标。各种模仿也是层出不穷,最近项目有一个需求,需要做视频截取,两边拖动,选取中间的视频部分。

效果如下:


image.png

实现思路:通过自定义view 根据手指onTouch 坐标动态刷新ondraw 绘制刷新的视图,回调对应的区域阀值。

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 以及跟随视频进度播放的帧 。

    @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 根据拖动的距离去绘制视图。

整体的实现思路就是这样,其实并不能,根据手指的触摸坐标不断刷新invalidate,在onDraw去不断更新画布。

上一篇 下一篇

猜你喜欢

热点阅读