ViewDragHelper简介

最新推荐文章于 2024-03-25 15:35:13 发布

佳亮

最新推荐文章于 2024-03-25 15:35:13 发布

阅读量700

点赞数

分类专栏： android 文章标签：布局谷歌控件

本文链接：https://blog.csdn.net/zahngjialiang/article/details/51814937

版权

android 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1，概述

简单地来说，ViewDragHelper是一个实现滑动布局的辅助类。比如Google在support库中提供的DrawerLayout布局，就是用ViewDragHelper来实现的。
虽然现在有现成的滑动布局可以供我们使用，但是只有掌握ViewDragHelper的用法，我们才能够更加灵活地自定义我们需要的控件。
通常，ViewDragHelper用在一个自定义的ViewGroup中。在自定义控件的过程中，除了实现callback的一些方法外，也要重写该ViewGroup的一些方法。

2，ViewGroup需要重写的方法

加载布局

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mMenuView=getChildAt(0);
        mMainView=getChildAt(1);
    }

在本实例中，有两个子布局。一个是菜单布局，一个是主布局。

2.获取布局控件的大小

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth=mMenuView.getMeasuredWidth();
    }

在该方法中，可以获得一些控件的大小。该方法不一定需要重写。如果需要获得控件大小的话，该方法需要重写，否则不需要重写。在本例中是不需要获取某个控件的大小，这里只是举例说明该方法的用法。
3.事件拦截

    /**
     * 将事件传递给ViewDragHelper。
     * @param ev
     * @return
     */

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return mViewDragHelper.shouldInterceptTouchEvent(ev);

    }


    /**
     * 返回true表示：事件不再继续向下传递，到本ViewGroup为止。
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mViewDragHelper.processTouchEvent(event);
        return true;
    }

这两个方法必须要重写。

4.滑动时视图的绘制方法

   /**
    * 
    *Scroller的核心方法，系统在绘制View的时候会在draw（）方法中调用该方法。
    *如果在继续滚动，mViewDragHelper.continueSettling(true)返回值为true，视图进行更新。*/

    @Override
    public void computeScroll() {
      if(mViewDragHelper.continueSettling(true)){
          ViewCompat.postInvalidateOnAnimation(this);
      }
    }

3，ViewDragHelper.Callback常用方法介绍

 @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return mMainView==child;
        }

该方法表示什么时候开始检测事件，返回true表示开始检测滑动事件。更直观的理解就是，返回哪个View，哪个View就可以滑动。在本例中，只需要主布局mMainView可以滑动。

 @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            /**
             * dx描述的是速度
             */
            Log.i("liang","left is"+left);
            Log.i("liang","dx is"+dx);
            if(left<0){
                left=0;//使其不能向左滑动
            }
            return left;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {
            return 0;
        }

这是两个实现滑动的具体方法。如果是水平滑动，则需要重写第一个方法。如果是垂直滑动，则需要重写第二个方法。
这两个方法返回0表示不能滑动。left和top这两个参数分别表示在水平方向和垂直方向上滑动的距离（严格的来说是x和y方向上的坐标）。
在本例中，我们是水平滑动的，因此需要重写clampViewPositionHorizontal(View child, int left, int dx)方法。而clampViewPositionVertical(View child, int top, int dy)我们返回0或者不去重写。
在第一个方法中，如果我们只返回left，那么主布局便可以左右滑动，这样显然不是我们需要的，一般情况下侧滑只需要右滑动即可。left<0表示向左滑动，因此一旦检测出用户有向右滑动的手势，那么我们就直接返回0，不去响应滑动事件。

@Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            if(mMainView.getLeft()<300){
                mViewDragHelper.smoothSlideViewTo(mMainView,0,0);
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }else{
                mViewDragHelper.smoothSlideViewTo(mMainView, 500, 0);
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }
        }

该方法实现手指离开屏幕后实现的操作。

滑动后，如果主布局距离左侧少于300个像素，则通过mViewDragHelper.smoothSlideViewTo(mMainView,0,0)使主布局停留在起始的位置。即左上角的坐标仍为（0，0）。

如果距离左侧的像素大于300，则使主布局左上角停留在坐标为（500，0）的位置上。即主布局距离左侧有500个像素，这样，菜单布局就显示出来了。
ViewCompat.postInvalidateOnAnimation(DragViewGroup.this)是用来刷新视图的。每次主布局的坐标改变后，该方法通知ＵＩ线程刷新画面。

除了这几个方法之外，onViewCaptured(),onViewDragStateChanged(),onViewPositionChanged()等方法。有兴趣的读者可以自行查看其用法。

4，源码

自定义的ViewCroup：DragViewGroup

public class DragViewGroup extends FrameLayout {
    private ViewDragHelper mViewDragHelper;
    private View mMenuView,mMainView;
    private int mWidth;
    private Context context;

    public DragViewGroup(Context context) {
        super(context);
        this.context=context;
        initView();
    }

    public DragViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        initView();
    }

    public DragViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        initView();
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mMenuView=getChildAt(0);
        mMainView=getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth=mMenuView.getMeasuredWidth();
    }

    /**
     * 将事件传递给ViewDragHelper。
     * @param ev
     * @return
     */

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return mViewDragHelper.shouldInterceptTouchEvent(ev);

    }


    /**
     * 返回true表示：事件不再继续向下传递，到本ViewGroup为止。
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mViewDragHelper.processTouchEvent(event);
        return true;
    }

    private void initView(){
        mViewDragHelper=ViewDragHelper.create(this,callback);
    }

    private ViewDragHelper.Callback callback=new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return mMainView==child;
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            /**
             * dx描述的是速度
             */
            Log.i("liang","left is"+left);
            Log.i("liang","dx is"+dx);
            if(left<0){
                left=0;//使其不能向左滑动
            }
            return left;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {
            return 0;
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            if(mMainView.getLeft()<300){
                mViewDragHelper.smoothSlideViewTo(mMainView,0,0);
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }else{
                mViewDragHelper.smoothSlideViewTo(mMainView, 500, 0);
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }
        }

        @Override
        public void onViewDragStateChanged(int state) {
            super.onViewDragStateChanged(state);

        }
    };


   /**
    *
    *Scroller的核心方法，系统在绘制View的时候会在draw（）方法中调用该方法。
    *如果在继续滚动，mViewDragHelper.continueSettling(true)返回值为true，视图进行更新。*/

    @Override
    public void computeScroll() {
      if(mViewDragHelper.continueSettling(true)){
          ViewCompat.postInvalidateOnAnimation(this);
      }
    }
}

2.布局文件：activity_main

包含两个子布局，menuLayout和mainLayout

<widget.DragViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


<RelativeLayout
    android:id="@+id/mennuLyout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rl1"
            >

            <ImageView
                android:id="@+id/id_img1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img1"
                android:text="第一个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >

            <ImageView
                android:id="@+id/id_img2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img2"
                android:text="第二个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img3"
                android:text="第三个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_4" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img4"
                android:text="第四个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img5"
                android:text="第五个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img6"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img6"
                android:text="第一个Item"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>



    <RelativeLayout
        android:id="@+id/mainLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="centerCrop"
           android:src="@drawable/zhangdi"
           />

    </RelativeLayout>


</widget.DragViewGroup>

3.效果图
滑动之前的效果。主界面仅仅是一张图片

滑动后，菜单布局显示出来了

佳亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ViewDragHelper简介

1，概述简单地来说，ViewDragHelper是一个实现滑动布局的辅助类。比如Google在support库中提供的DrawerLayout布局，就是用ViewDragHelper来实现的。虽然现在有现成的滑动布局可以供我们使用，但是只有掌握ViewDragHelper的用法，我们才能够更加灵活地自定义我们需要的控件。通常，ViewDragHelper用在一个自定义的ViewGroup中。
复制链接

扫一扫