ToolBar+DrawerLayout实现MD设计效果

最新推荐文章于 2025-02-10 19:15:28 发布

康贝勒

最新推荐文章于 2025-02-10 19:15:28 发布

阅读量764

点赞数

CC 4.0 BY-SA版权

分类专栏： Android UI与控件

版权申明：未经作者同意，禁止转载。

本文链接：https://blog.youkuaiyun.com/u012552275/article/details/52511371

Android UI与控件专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何使用ToolBar和DrawerLayout实现Material Design效果，包括创建公共ToolBar、集成DrawerLayout及相应菜单项，提供代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录学习中遇到的点点滴滴并将此分享给大家

先看图

这里写图片描述

在这篇文章里，我介绍了ToolBar的基本使用方法，并实现了一个难看的视图http://blog.youkuaiyun.com/u012552275/article/details/52431660

今次我将实现ToolBar+DrawerLayout实现Material Design设计效果

在项目中，我们的toolbar基本都是使用公用的，它遵循了APP布局优化。

我们写一个公用的toolbar，在主布局使用 include 加载布局。代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize" />

在主布局中引用

<include
    android:id="@+id/toolbar"
    layout="@layout/public_toolbar"/>

为布局风格统一，color修改一下颜色

<resources>
    <color name="colorPrimary">@color/material_deep_teal_200</color>
    <color name="colorPrimaryDark">@color/material_deep_teal_500</color>
    <color name="overflowTextColor">#9e9e9e</color>
</resources>

接着在style里修改

<style name="AppTheme" parent="@style/AppBaseTheme">
</style>

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 状态栏和标题栏颜色-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!-- 标题颜色-->
    <item name="android:textColorPrimary">@android:color/white</item>

    <!-- 箭头 -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <!-- 溢出菜单文字颜色-->
    <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
    <!-- 菜单项点击selector-->
    <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item>

</style>
<!-- 左边的箭头指示-->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>


</style>

到此，一个简单的ToolBar就完成了，接下来，我们加入Drawerlayout（当前Activity应该继承AppCompatActivity，试了一下，继承Activity没有某些方法）

接下来要在主布局加入DrawerLayout，如果没使用过DrawerLayout，请自行百度，网上介绍很多很全面很详细，这里不再复述

请看布局：

<?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=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/public_toolbar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar">
        <!--主布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff" >

        </LinearLayout>
        <!--侧滑菜单左-->
        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#009688">

        </LinearLayout>
        <!--侧滑菜单右-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="#009688">

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

类里的代码：

package com.mymap.toolbar;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity
{
    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setLogo(R.mipmap.ic_launcher);
        mToolbar.setTitle("主标题");
        mToolbar.setSubtitle("副标题");
        setSupportActionBar(mToolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);//设置监听器
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        switch (item.getItemId())
        {
            case R.id.action_zone:
                return toggleDrawerLayout();
            case R.id.action_weather:
                break;
            case R.id.action_offline:
                break;
            case R.id.action_theme:
                break;
            case R.id.action_search:
                break;
            case R.id.action_scan:
                break;
            case R.id.action_setting:
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    protected boolean toggleDrawerLayout(){
        //如果左边的已打开，则关闭左边的，不进行后续操作
        if (mDrawerLayout.isDrawerOpen(Gravity.START)) {
            mDrawerLayout.closeDrawer(Gravity.START);
            return true;
        }
        //如果左边的没打开，右边的打开了关闭，关闭了打开
        if (mDrawerLayout.isDrawerOpen(Gravity.END)) {
            mDrawerLayout.closeDrawer(Gravity.END);
        } else {
            mDrawerLayout.openDrawer(Gravity.END);
        }
        return true;
    }


}

这里我们加入了一个菜单的布局，在res目录下新建文件夹mune.xml，新建xxxx.xml，：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">

    <item
        android:id="@+id/action_zone"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="90"
        android:title="头像"
        app:showAsAction="ifRoom"/>


    <item
        android:id="@+id/action_weather"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="天气"
        app:showAsAction="never"/>

    <item
        android:id="@+id/action_offline"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="离线"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_theme"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="夜间模式"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="搜索"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_scan"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="扫一扫"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_setting"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="设置"
        app:showAsAction="never"/>
</menu>

onOptionsItemSelected这个方法是事件监听，我在类里写得很清楚，不做解释

其中