Android Toolbar+DrawerLayout使用细节

最新推荐文章于 2022-08-10 16:33:01 发布

hcldh

最新推荐文章于 2022-08-10 16:33:01 发布

阅读量1.2k

点赞数

分类专栏： Android 文章标签： Toolbar DrawerLayout

本文链接：https://blog.youkuaiyun.com/u013148378/article/details/51981470

版权

Android 专栏收录该内容

18 篇文章

订阅专栏

1.Toolbar

Toolbar 是Android 5.0后对针对Actionbar的不足进行改进所提出来的，当然大家也可以继续使用自定义的Title但是有些效果还是直接使用现成的轮子比较好，而且对于AndroidUI统一也是有好处的。

1.1Toolbar的使用

Toolbar只需要引用v7包的基础上在布局界面使用<Toolbar/>类似于控件一样使用就可以了。

涉及到样式问题，这里有两种显示方式要注意：

1. 如果要替换ActionBar，需要将主题设置为没有ActionBar的主题，然后调用setSupportActionBar(toolbar)（需要继承ActionBarActivity）就可以了。
2. 你也可以不使用上面的方法，而是直接使用Toolbar
直接在onCreate方法中添加以下代码即可，并且这种方法也可实现ActionBar和Toolbar共存。

这里建议使用第一种，以下以第一种方式讲解：

compileSdkVersion 22（为了让item显示图片，好像只能22,22以上就显示不出来了..）

compile 'com.android.support:appcompat-v7:22.0.0'

首先是布局界面：

<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:fitsSystemWindows="true"
    android:background="@color/colorPrimaryDark"
    android:minHeight="?attr/actionBarSize"
    />

编写菜单布局：

<?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">

    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_launcher"
        android:title="搜索"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/ic_launcher"
        android:title="通知"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:icon="@mipmap/ic_launcher"
        android:title="设置"
        app:showAsAction="withText" />

    <item
        android:id="@+id/action_about"
        android:orderInCategory="101"
        android:icon="@mipmap/ic_launcher"
        android:title="关于"
        app:showAsAction="withText" />
</menu>

注意事项：

orderInCategory 标识排放的顺序；

app:showAsAction 用来标识menu的显示方式，主要有三个选择：

1.always，总是显示在界面上

2.never ，不出现在界面上，只出现在右边三个点之中

3.ifroom ，如果界面放不下就自动放到右边三个点中

接着在Activity中设置应用：

toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("");
toolbar.setLogo(R.mipmap.base_common_default_icon_big);
setSupportActionBar(toolbar);
//menu选项监听函数，包括三点中和外面的
<pre name="code" class="java"> @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        if (id == R.id.action_zone) {
            Toast.makeText(MainActivity.this, "hahah", Toast.LENGTH_SHORT).show();
        }

        return super.onOptionsItemSelected(item);
    }

<pre name="code" class="java">   /**
    **收到overflow中的item显示图片
    **/
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (NoSuchMethodException e) {
                    e.printStackTrace();
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

注意点：

默认的收到overflow中的选项是只能显示文字的，为了显示图片需要重写这个函数onMenuOpened（）。

1.2 Theme相关

<resources>

    <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="colorControlNormal">@android:color/white</item>
        <!--溢出菜单样式-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>-->
        <!-- 溢出菜单文字颜色-->
        <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
    </style>

    <!--溢出菜单样式(背景，大小等） -->
    <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item><!--弹窗是否叠加在三个点之上 -->
        <item name="android:dropDownWidth">wrap_content</item><!--弹窗宽度 -->
        <item name="android:paddingRight">5dp</item>
        <item name="android:popupBackground">@android:color/darker_gray</item><!--弹窗背景色 -->
        <item name="android:dropDownVerticalOffset">2dip</item>
        <item name="android:dropDownHorizontalOffset">0dip</item>
    </style>

    <!--溢出菜单文字样式(大小，颜色）-->
    <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
        <item name="android:textColor">@color/overflowTextColor</item>
        <item name="android:textSize">15sp</item>
    </style>

    <!-- 左边的侧滑箭头指示   是否翻转，颜色-->
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>
</resources>

2.侧滑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/toolbar" />

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

        <!--左边侧滑菜单-->
        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:background="#009688"
            android:layout_gravity="start">
            <!--左边侧滑菜单内容-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左边，，，"/>
        </LinearLayout>

        <!--右边侧滑菜单-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#009688"
            android:layout_gravity="end">
            <!--右边侧滑菜单内容-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右边。。。"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

activity中绑定；

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);

        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, 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();
        mDrawerLayout.setDrawerListener(mDrawerToggle);

theme：见上面详细

 <!-- 侧滑箭头 -->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

<!-- 左边的侧滑箭头指示   是否翻转，颜色-->
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>