DrawerLayout及自定义的实现

来源：互联网发布：c语言编程简单的小游戏编辑：程序博客网时间：2024/04/29 22:02

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>

到此，最基本额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);                }            }

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

自定义的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>

这里我们的布局也分为了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);    }    ......}

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

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);    }

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

 if (changed)        {            this.scrollTo(mLeftMenuWidth, 0);            Log.d("HK","onLayout called scrollTo mLeftMenuWidth"+ mLeftMenuWidth);            once = true;        }

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

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

1 0