一步步走进Android MaterialDesign 之 DrawerLayout

DrawerLayout跟material design关系并不大,但是我们还是需要熟悉以下,因为后续navigation view就要依附于他。

先看看效果
这里写图片描述

这个就是最普通的drawerlayout的功能,我把他放在右边,是为了待会把navigationview放在左边进行对比

上代码说明使用方法

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize">

    </android.support.v7.widget.Toolbar>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </FrameLayout>
        <FrameLayout
            android:id="@+id/menu"
            android:background="@android:color/white"
            android:layout_gravity="right"
            android:layout_width="200dip"
            android:layout_height="match_parent">

        </FrameLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

有几点说明下:

1.我这边将style改成Theme.AppCompat.NoActionBar,直接使用ToolBar代替actionbar进行操作
2.注意drawerlayout中的layout顺序,菜单layout如果在正文layout之前先声明,那么最后菜单将拉不出来
3.菜单layout注意配置抽屉的方向点

最后,简单而又重点的看下ToolBar跟DrawerLayout是怎么配合实现汉堡式箭头

toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setBackgroundColor(getResources().getColor(R.color.blue_light));
        toolbar.setTitle("NavigationView的使用");
        toolbar.setSubtitle("这是二级标题");
        getSupportActionBar().setDefaultDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        drawer_layout=(DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle=new ActionBarDrawerToggle(this, drawer_layout, toolbar, R.string.open, R.string.close);
        toggle.syncState();
        drawer_layout.setDrawerListener(toggle);

依然说重点
ActionBarDrawerToggler在里面起了决定性的作用,这个实现了DrawerListener接口的对象完全改变了原来只有一个箭头那种枯燥单调的风格

虽然用了ToolBar去代替了传统ActionBar,这边要使用supportActionBar去处理一切关于actionbar的事宜,直接使用getActionBar会挂

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页