26
2017
09

基于ViewDragHelper实现侧滑

ViewDragHelper 是一个非常强大的类 , 能够帮助我们这些新手处理复杂的手势问题。使用ViewDragHelper , 我们必须为其实现CallBack回调函数。
ViewDragHelper.Callback是连接ViewDragHelper与view之间的桥梁
这里写图片描述

上面这些方法,我们不必要完全实现。
tryCaptureView 方法 ,捕捉并确定我们要滑动的View

clampViewPositionHorizontal()
clampViewPositionVertical()
这两个方法是确定我们滑动时,View在水平 和 垂直方向上的移动。

getViewHOrizontalDragRange()
getViewVerticalDragRange()
这两个方法是确定我们在水平和垂直方向上滑动 范围

onEdgeTouched()
进行边界测定

onViewReleased()
当我们释放View时 , 要调用的。

本例 , 通过继承FrameLayout实现侧滑。 在重写后的控件中,我们只放两层界面 , 上面一层就是我们一开始看到的 , 下面的一层需要我们侧滑才能看到。

如下面的布局:

<?xml version="1.0" encoding="utf-8"?>
<com.ma.artifact.Ui.DragLayout 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:id="@+id/draglayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.ma.artifact.Activity.MainActivity">

    <LinearLayout  android:id="@+id/left" android:background="@drawable/pf2" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

        <include layout="@layout/left_head"/>

        <ListView  android:id="@+id/left_list" android:layout_width="match_parent" android:layout_height="match_parent">
        </ListView>
    </LinearLayout>

    <LinearLayout  android:orientation="vertical" android:background="@drawable/pf2" android:layout_width="match_parent" android:layout_height="match_parent">

        <LinearLayout  android:layout_weight="7" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp">

            <include layout="@layout/top_bar" android:fitsSystemWindows="true" android:clipToPadding="true" />

            <RelativeLayout  android:layout_width="match_parent" android:layout_height="match_parent">

                <ImageView  android:id="@+id/hidden" android:src="@drawable/icon_avatar" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />

                <android.support.v7.widget.RecyclerView  android:id="@+id/main_recyclerview" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="wrap_content">

                </android.support.v7.widget.RecyclerView>
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout  android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp">
            <RelativeLayout  android:layout_width="match_parent" android:layout_height="match_parent">
                <ImageButton  android:background="#00000000" android:layout_centerVertical="true" android:id="@+id/bottom_add" android:src = "@drawable/button" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>

</com.ma.artifact.Ui.DragLayout>

由于我界面里放的东西比较多, 可能结果不太清晰:这里我简化一下:

<com.ma.artifact.Ui.DragLayout 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:id="@+id/draglayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ma.artifact.Activity.MainActivity">

   <LinerLayout>
    下层界面
 </LinearLayout>

  <LinerLayout>
    上层界面
 </LinearLayout>

</com.ma.artifact.Ui.DragLayout>

实际界面的整体结构就如同上面一样 , 通过使用ViewDragHelper控制上层界面布局的移动,进而进行侧滑。

实现效果:
这里写图片描述

/** * Created by ma on 2017/9/11. * * 继承FrameLayout , 使用ViewDragHelper 实现侧滑 */

public class DragLayout extends FrameLayout implements CommonInterface {

    private View mainView;//上层界面
    private View leftView;//下层界面
    private ViewDragHelper dragHelper;
    private int re = 0;
    private int leftWidth = 0;
    private boolean close = true;

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

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

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

        this.Invalid();
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        leftView = getChildAt(0);
        mainView = getChildAt(1);

        leftWidth = leftView.getMeasuredWidth();

        mainView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
               closeLeft();
            }
        });
    }

    /** * 侧滑 */
    public void openLeft(){
        dragHelper.smoothSlideViewTo(mainView , leftView.getLeft() + leftWidth / 2 + 200, 0);
        ViewCompat.postInvalidateOnAnimation(DragLayout.this);
        close = false;
    }

    /** * 关闭侧滑 */
    public void closeLeft(){
        dragHelper.smoothSlideViewTo(mainView , 0 , 0);
        ViewCompat.postInvalidateOnAnimation(DragLayout.this);
        close = true;
    }

    public boolean isClose(){
        return this.close;
    }

    /** * 初始化变量 * */

    @Override
    public void Invalid() {

        ViewDragHelper.Callback back = new ViewDragHelper.Callback() {

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

            @Override
            public int clampViewPositionHorizontal(View child, int left, int dx) {
                int leftBound = getPaddingLeft();

                if(child == mainView){

                    left = Math.max(leftBound , left);

                }else{

                    re = left;
                    left = 0;
                }
                return left;
            }

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

            @Override
            public int getViewHorizontalDragRange(View child) {
                return getWidth();
            }

            @Override
            public int getViewVerticalDragRange(View child) {
                return getHeight();
            }

            @Override
            public void onEdgeTouched(int edgeFlags, int pointerId) {

                if(edgeFlags == ViewDragHelper.EDGE_LEFT){
                    dragHelper.captureChildView(mainView , pointerId);
                }
            }

            @Override
            public void onViewReleased(View releasedChild, float xvel, float yvel) {
                super.onViewReleased(releasedChild, xvel, yvel);
                leftWidth = leftView.getMeasuredWidth();
                if(releasedChild == mainView){

                    if(mainView.getLeft() <= leftWidth / 2  ){
                        closeLeft();
                    }else{
                        openLeft();
                    }

                }else{
                    if(re < 0){
                        closeLeft();
                    }

                    re = 0;
                }
            }
        };

        dragHelper = ViewDragHelper.create(this, 1.0f, back);
        dragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);

    }

    @Override
    public void InitView() {

    }

    @Override
    public void InitListen() {

    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

       return dragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        dragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {

        if(dragHelper.continueSettling(true)){
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
}

上一篇:下拉刷新和上拉加载的RecyclerView,可以设置EmptyView 下一篇:viewpager嵌套viewpager