MaterialDesign 之 DrawerLayout

Posted 2022-06-11 yanglanwan

DrawerLayout 基本使用 

我们先来看一下布局 

<android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/dl">
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout 
            android:layout_height="50dp"
            android:layout_width="match_parent"
            android:id="@+id/tb">
        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/vp">
        </android.support.v4.view.ViewPager>
    </LinearLayout>

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="horizontal"
        android:background="#ffccff">
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:text="aaa"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout> 

在 DrawerLayout 里包括两个子布局 第一个是主页布局 第二个是侧滑布局

注意：

第一个布局可以是任意布局 但必须设置成 全屏显示，

第二个布局可以任意宽度 但必须设置 android:layout_gravity="start" Start 表示从左边显示 End 表示从右边显示

然后重启一下是不是可以从左边滑出菜单来了，就是这么 easy

 

DrawerLayout 和 ToolBar 的绑定 

首先我们要在上面的布局里 DrawerLayout 上填加一个布局 ToolBar。 

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content">
    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout> 
 

第一步初始化 ToolBar 控件

toolbar = (Toolbar) findViewById(R.id.toolbar);

dl = (DrawerLayout) findViewById(R.id.dl);

setSupportActionBar(toolbar);

第二步显示箭头 

在这的时候就可以看到我们的图标了，

ActionBar actionBar = getSupportActionBar();

//设置当前的控件可用

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setHomeButtonEnabled(true);

actionBar.setDisplayShowTitleEnabled(true);

第三步 关联 DrawerLayout

//第一个参数 activity 第二个参数 drawlayout

//第三个参数 Toolbar 第四个和第五个是打开和关闭的文字 toggle = new ActionBarDrawerToggle(this, dl, toolbar,R.string.aa, R.string.bb);

//该方法会自动和 ToolBar 关联 toggle.syncState();

第四部设置监听（给我们的 DrawerLayout 设置监听）

 

dl.addDrawerListener(new DrawerLayout.DrawerListener()
        @Override public void onDrawerSlide (View drawerView,float slideOffset)
        toggle.onDrawerSlide(drawerView, slideOffset);
    

        @Override public void onDrawerOpened (View drawerView)
        toggle.onDrawerOpened(drawerView);
    

        @Override public void onDrawerClosed (View drawerView)
        toggle.onDrawerClosed(drawerView);
    

        @Override public void onDrawerStateChanged ( int newState)
        toggle.onDrawerStateChanged(newState);
    
    );

第五部 响应事件

@Override 

public boolean onOptionsItemSelected(MenuItem item) 
        return toggle.onOptionsItemSelected(item);