自定义拖拽View

作者: 程序员阿兵 | 来源:发表于2020-06-14 16:51 被阅读0次

Android自定义View实例教程~自定义可拖拽评价进度条「完
Flutter 仿QQ消息拖拽(贝塞尔曲线实现)
图片查看器ImageViewer：轻松实现微信朋友圈、今日头条、
自定义拖拽View
手势解锁（Quartz2D）
ios开发(三) 自定义tableview样式 Swift
强大的自定义ViewGroup神器-ViewDragHelper
自定义表单（一）--拖拽（JS版本）
自定义表单（二）--拖拽（HTML版本）
自定义表单（完）--（html5版本）

封装简单拖拽视图view，效果如下：

image.png

实现思路：

通过箭头的滑动事件坐标动态变化改变容器的高度

/**
 * @author 桂雁彬
 * @date 2020/6/14.
 * GitHub:
 * email：yanbing.gui@zymobi.com
 * description：
 */
public class ScrollBarView extends AppCompatImageView {
    private ViewGroup mParent;
    private int boardHeight;

    public ScrollBarView(Context context) {
        this(context, null);
    }

    public ScrollBarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScrollBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        boardHeight = SizeTool.getBoardHeight(context);
    }

    int lastX = 0;
    int lastY = 0;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //记录触摸点的坐标
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_MOVE:
                //计算偏移量
                int officeX = rawX - lastX;
                int officeY = rawY - lastY;
                Log.d("==tag==","officeY:"+officeY);
                Log.d("==tag==","rawY:"+rawY);

                Log.d("==tag==","lastY:"+lastY);

                Log.d("==tag==","mParentBot:"+mParent.getBottom());
                Log.d("==tag==","boardHeight:"+boardHeight);

                if (Math.abs(officeY) >= Math.abs(officeX)) {
                    if (officeY > 0 && mParent.getBottom() > boardHeight * 0.8f) {
                        return false;
                    }

                    if (officeY < 0 && mParent.getBottom() < boardHeight * 0.2f) {
                        return false;
                    }
                    if (mCallback != null) {
                        mCallback.onOffset(officeY);
                    }
                }
                //重新设置初始值
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_UP:
                //处理输入的离开动作
                break;
            default:
                break;
        }
        return true;
    }

    public void setScrollView(ViewGroup flContainer) {
        mParent = flContainer;
    }

    private OnOffsetCallback mCallback;

    public void setCallback(OnOffsetCallback callback) {
        this.mCallback = callback;
    }

    public interface OnOffsetCallback {
        void onOffset(int offset);
    }
    
}

上面在箭头ImageView 的OnTouch 事件中通过Y坐标的滑动偏移量在满足父容器距离底部最大最小区间内回调滑动距离。

父容器代码：

public class AnswerDetailView extends FrameLayout {
    private static final int TYPE_TOP = 0x1;
    private static final int TYPE_HTML = 0x2;
    private RecyclerView rvDetail;
    private ScrollBarView barScrollView;
    private OnOffsetListener mListener;


    public interface OnOffsetListener {
        void onOffset(int offset);
        void onBigImage(String path);
    }

    public AnswerDetailView(@NonNull Context context) {
        this(context, null);
    }

    public AnswerDetailView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AnswerDetailView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();
    }

    private void initView() {
        View.inflate(getContext(), R.layout.view_answer_detail, this);
        barScrollView = findViewById(R.id.bar_scroll);
        addListener();
    }

    private void addListener() {
        barScrollView.setScrollView(this);
        barScrollView.setCallback(new ScrollBarView.OnOffsetCallback() {
            @Override
            public void onOffset(int offset) {
                if (mListener != null) {
                    mListener.onOffset(offset);
                }
            }
        });


    }

    public void setListener(OnOffsetListener listener) {
        this.mListener = listener;
    }


}

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:background="@drawable/ic_board_drag_bar_bg">
        <View
            android:layout_width="match_parent"
            android:background="#FF0000"
            android:layout_height="match_parent"/>

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
                <TextView
                    android:layout_width="match_parent"
                    android:text="这是一个滚动view"
                    android:gravity="center"
                    android:layout_height="@dimen/default_dp_40"/>
            </LinearLayout>

        </androidx.core.widget.NestedScrollView>


        <com.tal.mystudy.view.ScrollBarView
            android:id="@+id/bar_scroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_board_drag_bar" />
    </FrameLayout>

</FrameLayout>

父容器就是我们承载的布局。

外部实现滑动监听：

/**
 * @author 桂雁彬
 * @date 2020/6/14.
 * GitHub:
 * email：yanbing.gui@zymobi.com
 * description：
 */
public class DragImageActivity extends Activity {
    private LinearLayout llBoardParent;
    private AnswerDetailView viewAnswer;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_drage);
        llBoardParent = findViewById(R.id.ll_board_parent);
        llBoardParent.removeAllViews();
        
        int boardHeight = SizeTool.getBoardHeight(this);
        viewAnswer = new AnswerDetailView(this);
        ViewGroup.LayoutParams topParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
        topParams.height = boardHeight / 2;
        llBoardParent.addView(viewAnswer, topParams);
        viewAnswer.setListener(new AnswerDetailView.OnOffsetListener() {
            @Override
            public void onOffset(int offset) {
                ViewGroup.LayoutParams topParams1 = viewAnswer.getLayoutParams();
                topParams1.height += offset;
                viewAnswer.setLayoutParams(topParams1);
            }

            @Override
            public void onBigImage(String path) {

            }
        });


    }


}

外部实现的逻辑很简单：根据ImageView 箭头滑动的距离动态改变父容器的高度就可以达到次效果！

Android自定义View实例教程~自定义可拖拽评价进度条「完
Android自定义评View实例教程~自定义可拖拽进度条「完全自定义」实际效果，我们可以通过拖拽来设置进度，也...
Flutter 仿QQ消息拖拽(贝塞尔曲线实现)
Flutter 仿qq消息拖拽效果通过自定义view实现,效果如下如果要实现最终的效果,首先绘制拖拽连接处的线(...
图片查看器ImageViewer：轻松实现微信朋友圈、今日头条、
ImageViewer 关于图片浏览器，支持图片手势缩放、拖拽等操作，自定义View的模式显示，自定义图片加载方...
自定义拖拽View
封装简单拖拽视图view，效果如下：实现思路：通过箭头的滑动事件坐标动态变化改变容器的高度上面在箭头Imag...
手势解锁（Quartz2D）
1、实现 1.自定义解锁视图LockView 2.布局解锁视图，在控制器的view中，拖拽一个view控件，然后修...
ios开发(三) 自定义tableview样式 Swift
自定义tableview有很多种方式，这里介绍一种拖拽Table View Controller加建立xib文件的...
强大的自定义ViewGroup神器-ViewDragHelper
概述在自定义ViewGroup时，有很多效果是要求ViewGroup里的View实现拖拽效果，这样我们一般是重写...
自定义表单（一）--拖拽（JS版本）
系列文章自定义表单（一）--拖拽（JS版本）自定义表单（二）--拖拽（HTML版本）自定义表单（完）--（html...
自定义表单（二）--拖拽（HTML版本）
系列文章自定义表单（一）--拖拽（JS版本）自定义表单（二）--拖拽（HTML版本）自定义表单（完）--（html...
自定义表单（完）--（html5版本）
系列文章自定义表单（一）--拖拽（JS版本）自定义表单（二）--拖拽（HTML版本）自定义表单（完）--（html...