侧滑菜单——方式二（使用ViewDragHelper）

在此例子中DragViewGroup继承于LinearLayout

第一步初始化ViewDragHelper，在构造方法中进行

//通过静态工厂方法创建
viewDragHelper=ViewDragHelper.create(this,callback);//this指parentView，在这里就是自定义ViewGroup；callback是使用ViewDragHelper的核心

第二步拦截事件，此步骤必不可少

@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //事件拦截给viewDragHelper
        return viewDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //将触摸事件传递给viewDragHelper，此操作必不可少
        viewDragHelper.processTouchEvent(event);
        return true;
    }

第三步处理computScroll方法，和使用Scroller一样，因为ViewDragHelper内部就是使用了Scroller来实现的
这里一般情况下可以套用以下模板

@Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)){
            ViewCompat.postInvalidateOnAnimation(this);//刷新带有动画
        }
    }

ViewCompat.postInvalidateOnAnimation(this)相当于使用scroller的时候必须要调用invalidate刷新页面，并且不断循环调用

第四步也是最关键的一步，处理回调Callback,在他的内部有很多方法，我们重写可以实现很多效果

首先会重写tryCaptureView方法，此方法可以指定哪个View可以被拖动
重写clampViewPositionHorizontal、clampViewPositionVertical方法可以实现水平和垂直的滑动，默认返回为0,可以限制滑动区域
重写onViewCaptured方法可以实现手指触摸到View时的效果
重写onViewReleased方法可以实现手指离开屏幕时的一些功能
重写onViewPositionChanged方法在事件位置变化时可以实现一些动态效果
重写onViewDragStateChanged方法在拖拽状态变化时调用

private ViewDragHelper.Callback callback=new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return content==child;//判断是否滑动的子View是内容区域
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {//水平滑动，left表示垂直方向上的位置，dx表示较前次的偏移量
            return left;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {//垂直滑动，top表示垂直方向上的位置，dy表示较前次的偏移量
            return super.clampViewPositionVertical(child, top, dy);//默认为0
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {//手指离开屏幕
            super.onViewReleased(releasedChild, xvel, yvel);
            //手指抬起后缓慢移动到指定位置
            if(content.getLeft()<menu.getWidth()/2){
                //关闭菜单
                //相当于scroller的startScroll方法
                viewDragHelper.smoothSlideViewTo(content,0,0);
                //刷新带有动画
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }else{
                //打开菜单
                //相当于scroller的startScroll方法
                viewDragHelper.smoothSlideViewTo(content,menu.getWidth(),0);
                //刷新带有动画
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }
        }
    };

在onFinishInflate方法中按顺序定义定义menu，content
在onSizeChanged方法中获取子View的宽

最终效果就能实现抽屉式的侧滑菜单

slide.gif

完整代码如下

public class DragViewGroup extends LinearLayout {
    private ViewDragHelper viewDragHelper;
    private ViewGroup menu,content;//菜单和内容
    private int mScreenWidth;
    //dp
    private int menuRightMargin;

    private boolean once;

    private ViewDragHelper.Callback callback=new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return content==child;//判断是否滑动的子View是内容区域
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {//水平滑动
            return Math.min(Math.max(0,left),mScreenWidth-menuRightMargin);//限制滑动区域在屏幕左边距到menu右边距
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {//垂直滑动
            return super.clampViewPositionVertical(child, top, dy);//默认为0
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {//手指离开屏幕
            super.onViewReleased(releasedChild, xvel, yvel);
            //手指抬起后缓慢移动到指定位置
            if(content.getLeft()<menu.getWidth()/2){
                //关闭菜单
                //相当于scroller的startScroll方法
                viewDragHelper.smoothSlideViewTo(content,0,0);
                //刷新带有动画
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }else{
                //打开菜单
                //相当于scroller的startScroll方法
                viewDragHelper.smoothSlideViewTo(content,menu.getWidth(),0);
                //刷新带有动画
                ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
            }
        }
    };

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

    public DragViewGroup(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public DragViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化viewDragHelper
        viewDragHelper=ViewDragHelper.create(this,callback);

        WindowManager wm= (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics=new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth=outMetrics.widthPixels;

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DragViewGroup);
        menuRightMargin= (int) ta.getDimension(R.styleable.DragViewGroup_menuRightMargin,TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,getResources().getDisplayMetrics()));
        ta.recycle();
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        menu= (ViewGroup) getChildAt(0);
        content= (ViewGroup) getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        menu.getLayoutParams().width=mScreenWidth-menuRightMargin;
        content.getLayoutParams().width=mScreenWidth;

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        content.layout(0,0,content.getWidth(),content.getHeight());
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return viewDragHelper.shouldInterceptTouchEvent(ev);//事件拦截给viewDragHelper
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //将触摸事件传递给viewDragHelper，此操作必不可少
        viewDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)){
            ViewCompat.postInvalidateOnAnimation(this);//刷新带有动画
        }
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LinearLayout.LayoutParams(getContext(),attrs);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

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

            <ImageView
                android: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/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:text="第1个item"
                android:layout_toRightOf="@id/img1"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android: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/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:text="第2个item"
                android:layout_toRightOf="@id/img2"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android: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/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:text="第3个item"
                android:layout_toRightOf="@id/img3"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android: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/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:text="第4个item"
                android:layout_toRightOf="@id/img4"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android: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/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:textColor="#ffffff"
                android:text="第5个item"
                android:layout_toRightOf="@id/img5"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.scrollerdemo.MainActivity">


    <com.scrollerdemo.DragViewGroup 
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:menuRightMargin="100dp">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:gravity="center"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="helloworld"
                android:textSize="30sp"/>
        </LinearLayout>
    </com.scrollerdemo.DragViewGroup>

    
</RelativeLayout>

自定义属性

<declare-styleable name="DragViewGroup">
        <attr name="menuRightMargin" format="dimension"/>
    </declare-styleable>

继续进阶，为侧滑菜单增加动画效果

只需要在callback内部重写onViewPositionChanged方法
代码如下

@Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            float scale = left * 1f / menu.getWidth();//0 ~ 1
            float contentScale = 1 - scale * 0.2f;//1 ~ 0.8
            float menuScale = 0.7f + scale * 0.3f;//0.7 ~ 1
            float menuAlpha = 0.6f + scale * 0.4f;//0.6 ~ 1
            float menuTransX = 0.3f - 0.3f * scale;//0.3 ~ 0

            //content
            ViewHelper.setPivotX(content, 0);
            ViewHelper.setPivotY(content, content.getHeight() / 2);
            ViewHelper.setScaleX(content, contentScale);
            ViewHelper.setScaleY(content, contentScale);
            //menu
            ViewHelper.setTranslationX(menu, -menuTransX * menu.getWidth());
            ViewHelper.setAlpha(menu, menuAlpha);
            ViewHelper.setScaleX(menu, menuScale);
            ViewHelper.setScaleY(menu, menuScale);
        }

效果如下

slideanim.gif

最后编辑于：2018.04.17 14:48:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343

侧滑菜单——方式二（使用ViewDragHelper）

推荐阅读更多精彩内容