DrawerLayout及自定义的实现_drawerlayout 自定义

DrawerLayout作为官方提供的抽屉式控件，能给我们的应用带来炫酷的效果。提升用户的体验。下面来看看通过DrawerLayout的效果。

DrawerLayout的使用

DrawerLayout的使用非常简单，只需要将DrawerLayout作为根布局即可。其中，子布局分别为主界面，做目录和右目录。左右目录通过设置控件的android:layout_gravity的值即可。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_frame_background">
    <FrameLayout
        android:id="@+id/fragment_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00ef00">
    </FrameLayout>
    <RelativeLayout
        android:id="@+id/left"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#00ff0000"
        android:tag="LEFT">
        <ListView
            android:id="@+id/left_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </ListView>
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/right"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#00000000"
        android:tag="RIGHT">
        <TextView
            android:id="@+id/right_textview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="个人登陆页面" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

到此，最基本额DrawerLayout的功能就实现了。但是作为基本的抽屉式控件，并不能满足我们需要炫酷的需求。
为了在划出边栏时能有动画特效，我们可以对DrawerLayout添加监听。
通过调用setDrawerListener(new DrawerLayout.DrawerListener())方法就可以对其添加滑动时的监听了。

drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                Log.d("HK","onDrawerSlide slideOffset="+slideOffset);
                View mContent = drawerLayout.getChildAt(0);
                View mRightContent = drawerLayout.getChildAt(2);
                View mMenu = drawerView;
                float scale = 1 - slideOffset;
                float rightScale = 0.8f + scale * 0.2f;
                if (drawerView.getTag().equals("LEFT")){
                    float leftScale = 1 - 0.3f * scale;

                    ViewHelper.setScaleX(mMenu, leftScale);
                    ViewHelper.setScaleY(mMenu, leftScale);
                    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));

                    ViewHelper.setTranslationX(mContent,
                            mMenu.getMeasuredWidth() * (1 - scale));
                    ViewHelper.setPivotX(mContent, 0);
                    ViewHelper.setPivotY(mContent,
                            mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                } else if(drawerView.getTag().equals("RIGHT")){
                    float rScale = 1 - 0.3f * scale;
                    ViewHelper.setScaleX(mRightContent,rScale);
                    ViewHelper.setScaleY(mRightContent,rScale);
                    ViewHelper.setAlpha(mRightContent,0.6f + 0.4f * (1 - scale));

                    ViewHelper.setTranslationX(mContent,
                            -mMenu.getMeasuredWidth() * slideOffset);
                    ViewHelper.setPivotX(mContent, mRightContent.getMeasuredWidth());
                    ViewHelper.setPivotY(mContent,
                            mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

通过对滑动的监听，进行相应的动画播放，可以达到提升交互的效果。

自定义的DrawerLayout

DrawerLayout 的本质也是一个VIEW，那么我们同样能够通过自定义View的方式来进行实现。
首先，在自定的时候我们需要考虑我们需要达到什么样的效果。
1、DrawerLayout是可以滑动的。
2、划出时有侧边栏放大，主页面变小的效果。
因此可以先决定我们可以先可以让我们自定义的View继承于一个HorizontalScrollView。接下来，作为自定义的View，去重写onMeasure，onTouchEvent，onDraw都是可能的，由于HorizontalScrollView是有一个ViewGroup 继承而来，因此必须去重写他的onLayout方法。
先来看看布局。

<?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.hk.slideview.DrawLayoutView">
    <com.hk.slideview.MyDrawLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/left"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:background="#00ff0000"
                android:tag="LEFT">
                <ListView
                    android:id="@+id/left_listview"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                </ListView>
            </RelativeLayout>

            <FrameLayout
                android:id="@+id/fragment_layout"
                android:layout_width="360dp"
                android:layout_height="match_parent"
                android:background="#00ef00">
            </FrameLayout>

            <RelativeLayout
                android:id="@+id/right"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#00000000"
                android:tag="RIGHT">
                <TextView
                    android:id="@+id/right_textview"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="个人登陆页面" />
            </RelativeLayout>
        </LinearLayout>

    </com.hk.slideview.MyDrawLayout>
</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

这里我们的布局也分为了3个部分，但是都放在了一个LinearLayout，这是因为HorizontalScrollView不允许多个子布局的存在。
三个子布局分别为左目录，主页面和右目录，比较简单。
下面来自定义我们的View。

public class MyDrawLayout extends HorizontalScrollView { 
 private int mLeftMenuWidth;
    private int mRightMenuWidth;
    private ViewGroup mLeftMenu;
    private ViewGroup mContent;
    private ViewGroup mRightMenu;
    private LinearLayout mLiearLayout;
    private boolean once;
    public MyDrawLayout(Context mContext) {

        super(mContext);
    }

    public MyDrawLayout(Context mContext, AttributeSet att) {
        super(mContext,att);
    }

    public MyDrawLayout(Context mContext,AttributeSet att,int defStyleAttr) {
        super(mContext,att,defStyleAttr);
    }
    ......
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

既然是自定义，必然少不了对控件的测量。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        if(!once) {
            mLiearLayout = (LinearLayout) getChildAt(0);
            mLeftMenu = (ViewGroup) mLiearLayout.getChildAt(0);
            mContent = (ViewGroup) mLiearLayout.getChildAt(1);
            mRightMenu = (ViewGroup) mLiearLayout.getChildAt(2);
            mLeftMenuWidth = mLeftMenu.getMeasuredWidth();
            mRightMenuWidth = mRightMenu.getMeasuredWidth();
            mContentWidth = mContent.getMeasuredWidth();
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

此处，分别测量出了3个子View的大小。并设置了View的大小。
在测量之后，就需要将这3个子View进行布局了。因为我们是直接继承的HorizontalScrollView,因此只需要在回调onLayout的时候写我们需要做的事情就好了。

 if (changed)
        {
            this.scrollTo(mLeftMenuWidth, 0);
            Log.d("HK","onLayout called scrollTo mLeftMenuWidth"+ mLeftMenuWidth);
            once = true;
        }
1
2
3
4
5
6

此处是在首次进入时，将主界面显示在中间。通过上面两部，就可以得到一个能够滑动的界面了。但是这是不满足我们要求的。那么接下来需要我们自己控制在滑动过程中执行的事情。很明显的，我们这时候需要的就是重写onTouchEvent事件了。

 public boolean onTouchEvent(MotionEvent event) {
       Log.d("HK","onInterceptTouchEvent called");
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                //相对于当前View滑动的距离,正为向左,负为向右
                int distance = getScrollX();
                Log.d("HK","onTouchEvent called distance "+distance);
                if(distance>=0&&distance<mLeftMenuWidth/2) {
                    this.smoothScrollTo(0,0);
                    Log.d("HK","onTouchEvent called smoothScrollTo 00 mLeftMenuWidth"+mLeftMenuWidth);
                } else if(distance>(mLeftMenuWidth+mRightMenuWidth/2)) {
                    this.smoothScrollTo(mLeftMenuWidth+mRightMenuWidth,0);
                    Log.d("HK","onTouchEvent called smoothScrollTo mLeftMenuWidth+mRightMenuWidth 0");
                } else {
                    this.smoothScrollTo(mLeftMenuWidth,0);
                }

                return true;


        }
          return super.onTouchEvent(event);
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

全部代码可在GIT下载。
GIT：https://github.com/everyhappy/DrawerLayoutDemo