DrawerLayout与ToolBar之双宿双飞

来源:互联网 发布:win10深度系统优化 编辑:程序博客网 时间:2024/05/22 09:03

  最近因为项目需求需要实现侧滑功能,一开始决定使用SlideMenu的,可是研究Material Design时发现了谷歌自身推出了DrawerLayout,所以决定使用谷歌的东西来实现。

一、侧滑菜单在Toolbar下方情况

  首先看下效果图是不是你所需要的,如下图:
Paste_Image.png

  1、首先需要添加v7包的依赖

dependencies {    ...//其他代码    compile 'com.android.support:appcompat-v7:23.3.0'}

  2、创建一个toolbar.xml作为布局文件toolbar继承自View,因此可以像其他标准控件一样直接早主布局文件中添加Toolbar,但是为了提高Toolbar的重用效率,可以在layout中创建一个custom_toolbar.xml代码如下:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="?attr/colorPrimary"    android:minHeight="?attr/actionBarSize"    android:orientation="vertical"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"></android.support.v7.widget.Toolbar>

  3、创建DrawerLayout布局文件
在主布局中添加drawerlayout和toolbar,代码如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">        <include layout="@layout/custom_toolbar"/>           <android.support.v4.widget.DrawerLayout        android:id="@+id/drawerLayout"        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"/>        <!-- 左侧侧滑部分 -->        <ListView            android:id="@+id/leftListView"            android:layout_width="240dp"            android:layout_height="match_parent"            android:layout_gravity="start"            android:background="@color/colorPrimary"/>    </android.support.v4.widget.DrawerLayout></LinearLayout>

DrawerLayout标签中有两个子控件,一个是左边侧滑菜单View,一个是主界面。另外需要在左边菜单起始位置设置为android:layout_gravity=”start”。如果你设置了右侧侧滑菜单,也需要添加android:layout_gravity=”end”。
  3、你可能对toolbar里面的返回按钮很感兴趣,切换效果特绚。客官、别急,容我来告诉你是个啥。这同样是design里面的一个类ActionBarDrawerToggle。只需要你配置了你就能体验它的炫丽。不了解的直接查看官方文档(请自备梯子)。使用方法我们在代码中为你讲述。这里我们来设置该返回键的样式,谷歌为我们提供了几种样式。

<resources>    <style name="AppTheme"parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <item name="android:textColorPrimary">@android:color/white</item>        <!-- 返回键样式 -->        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>    </style>    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">        <item name="color">@android:color/white</item>    </style></resources>

  4、源代码

public class MainActivity extends AppCompatActivity {    @Bind(R.id.content)    FrameLayout mContent;    @Bind(R.id.leftListView)    ListView mLeftListView;    @Bind(R.id.drawerLayout)    DrawerLayout mDrawerLayout;    @Bind(R.id.toolbar)    Toolbar mToolbar;    private ActionBarDrawerToggle mDrawerToggle;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        mToolbar.setTitle("测试");        setSupportActionBar(mToolbar);        getSupportActionBar().setHomeButtonEnabled(true);        //设置返回键可用        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        //创建返回键,并实现打开关/闭监听        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);            }            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);            }        };        mDrawerToggle.syncState();        //将DrawerLayout与DrawerToggle绑定        mDrawerLayout.addDrawerListener(mDrawerToggle);        mDrawerLayout.setScrimColor(Color.TRANSPARENT);       //去除侧边阴影        String[] aee = {"测试1", "测试2"};         ArrayAdapter arrayAdapter = new  ArrayAdapter(this, android.R.layout.simple_list_item_1, aee);        mLeftListView.setAdapter(arrayAdapter);    }}

代码中我添加了setScrimColor方法,这个方法是修改侧滑菜单滑出时背景颜色。

二、侧滑菜单遮盖Toolbar情况

  效果图如下:

Paste_Image.png
  侧滑菜单遮盖toolbar。其实只需要修改主布局文件就可以实现。drawerlayout作为根布局标签就OK,代码如下:

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawerLayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!--内容+toolbar-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <include layout="@layout/custom_toolbar"/>        <!-- 内容部分 -->        <FrameLayout            android:id="@+id/content"            android:layout_width="match_parent"            android:layout_height="match_parent"/>    </LinearLayout>    <!-- 左侧侧滑部分 -->    <ListView        android:id="@+id/leftListView"        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="@color/colorPrimary"        android:clickable="true"/></android.support.v4.widget.DrawerLayout>

注意:在侧滑布局上必须要加上android:clickable=”true”,不然侧滑菜单将无法使用。

如有问题欢迎留言。

源码下载

0 0
原创粉丝点击