美文网首页
自定义视频选帧控件

自定义视频选帧控件

作者: 程序员阿兵 | 来源:发表于2020-01-17 14:13 被阅读0次

    项目中需要做一个拖动控件,推动框对应回调选取视频对应帧做封面,效果如下:

    image.png

    实现思路可以借助google ViewDragHelper类 :

      viewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
                @Override
                public boolean tryCaptureView(@NonNull View child, int pointerId) {
                    return dragView == child;
                }
    
                @Override
                public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
                   
                    return moveToLeft;
                }
            });
    
    • tryCaptureView :绑定拖动的子view
    • clampViewPositionHorizontal 水平滑动 子view拖动的距离。
    • 下面看具体实现思路:
    package com.example.seebar;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.ViewGroup;
    
    import androidx.annotation.NonNull;
    import androidx.constraintlayout.widget.ConstraintLayout;
    import androidx.customview.widget.ViewDragHelper;
    
    /**
     * @author 桂雁彬
     * @date 2019-12-18.
     * GitHub:
     * email:guiyanbing@100tal.com
     * description:
     */
    public class DragItemView extends ConstraintLayout {
        ViewDragHelper viewDragHelper;
        private View dragView;
    
        public DragItemView(Context context) {
            this(context, null);
        }
    
        public DragItemView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public DragItemView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initView();
        }
    
        private void initView() {
            viewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
                @Override
                public boolean tryCaptureView(@NonNull View child, int pointerId) {
                    return dragView == child;
                }
    
                @Override
                public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
                    int moveToLeft = left;
                    if (left < 0) {
                        moveToLeft = 0;
                    }
    
    
                    int maxMoveDistance = leftToRightDistance - child.getWidth();
                    if (left > maxMoveDistance) {
                        moveToLeft = maxMoveDistance;
                        Log.d("==tag==1","left:"+left);
    
                    }
                    if (callBack != null) {
                        callBack.onItemSelect((float) moveToLeft / maxMoveDistance);
                    }
    
                    Log.d("==tag==","left:"+left);
                    Log.d("==tag==","dx:"+dx);
                    Log.d("==tag==","leftToRightDistance:"+leftToRightDistance);
                    Log.d("==tag==","maxMoveDistance:"+maxMoveDistance);
                    Log.d("==tag==","child.getWidth():"+child.getWidth());
    
    
    
                    return moveToLeft;
                }
            });
        }
    
        private int leftToRightDistance;
    
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            leftToRightDistance = getRight() - getLeft();
        }
    
        public void setDragView(View view) {
            dragView = view;
        }
    
        public void setDragViewWidth(int width) {
            if (dragView != null) {
                ViewGroup.LayoutParams layoutParams = dragView.getLayoutParams();
                if (layoutParams != null) {
                    layoutParams.width = width;
                    dragView.setLayoutParams(layoutParams);
                }
            }
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return viewDragHelper.shouldInterceptTouchEvent(ev);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            viewDragHelper.processTouchEvent(event);
            return true;
        }
    
        public void setCallBack(ICallBack callBack) {
            this.callBack = callBack;
        }
    
        private ICallBack callBack;
    
        public interface ICallBack {
            void onItemSelect(float progress);
        }
    }
    

    上面在 clampViewPositionHorizontal 中根据滑动的距离拦截最终返回子view对应拖动的距离。

    实现思路就是这样简单。只需要传入需要拖动子 view 返回对应子view拖动距离就行。

    • 下面是子view 对应布局:
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        tools:ignore="ResourceName">
    
        <com.example.seebar.DragItemView
            android:id="@+id/viewSlice"
            android:layout_width="0dp"
            android:layout_height="54dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
    
            <View
                android:id="@+id/viewVideoSelect"
                android:layout_width="30dp"
                android:layout_height="0dp"
                android:background="@drawable/shape_produce_video_cover_select"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </com.example.seebar.DragItemView>
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    相关文章

      网友评论

          本文标题:自定义视频选帧控件

          本文链接:https://www.haomeiwen.com/subject/xxvczctx.html