DrawerLayout+ToolBar官方API实现仿网易V4.4.4导航抽屉

最新推荐文章于 2021-01-26 22:15:08 发布

铁木

最新推荐文章于 2021-01-26 22:15:08 发布

阅读量1.7k

点赞数 1

分类专栏： Android组件文章标签： toolbar 仿网易V4-4 导航抽屉

本文链接：https://blog.csdn.net/bighulk/article/details/45264273

版权

Android组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网易V4.4.4 的导航抽屉长啥样，我想在此无需多说，没见过的自己去体验吧。
当时吸引我的是左边滑动，箭头图标变菜单图标动画，这个非常不错。殊不知，Android5.0以上官方提供的API便可轻松实现。5.0以下，需要添加android-support-v7-appcompat包支持。这个在SDk V7目录下。

直接先看看实现运行效果图吧：（有网易效果了吧）

这里写图片描述

下面谈谈实现要点：

先利用DrawerLayout创建导航抽屉，这个可以参考我上一篇博文：DrawerLayout 官方创建导航抽屉示例。
在我上一篇博文利用DrawerLayout创建导航抽屉的基础上，稍加修改便可实现。（不清楚的，可先上篇创建看看）

下面谈谈在利用DrawerLayout创建导航抽屉的基础上，具体修改如下:

1. ActionBar改用ToolBar

1.1、在原来基础上，修改activity_main.xml，增加Toolbar这个控件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 增加Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/PopupMenuStyle" />

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

        <!-- The main content view -->

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <!-- The navigation drawer -->

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#ffffff"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:scrollbars="none" />

        <TextView
            android:id="@+id/right_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="#ffffff"
            android:gravity="center"
            android:textColor="#444444"
            android:text="@string/right_drawer_info"
            android:textSize="30sp" >
        </TextView>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

1.2、添加主题风格

先在values/styles.xml添加：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>
    <!-- 主要是这个基础风格 -->
    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- Actionbar color -->
        <item name="colorPrimary">#0077d9</item>
        <!-- Status bar color -->
        <item name="colorPrimaryDark">#5577d9</item>
        <!-- Window color -->
        <item name="android:windowBackground">@color/dim_foreground_material_light</item>
    </style>

    <style name="PopupMenuStyle" parent="Theme.AppCompat.Light"></style>

</resources>

上面创建一个基础风格，为了方便，以后要添加专属于values-v21的属性的话，可以在继承这个基础风格上，添加。

再在values-v21/styles.xml添加：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="AppTheme.Base">

        <!-- Navigation bar color -->
        <item name="android:navigationBarColor">@color/accent_material_light</item>
    </style>

</resources>

上面这个，主要是可以添加一些5.0可以显示的效果。

1.3、在MainActivity.java，初始化Toolbar：

public class MainActivity extends ActionBarActivity {
    ……

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

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

2. v4.app.ActionBarDrawerToggle改用v7.app.ActionBarDrawerToggle

2.1、换用v7.app.ActionBarDrawerToggle，实例化ActionBarDrawerToggle，传入Toolbar

public class MainActivity extends ActionBarActivity {
    ……

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ……
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
                R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View drawerView) {
                if (drawerView == mDrawerList) {
                    isDirection_left = false;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = false;
                }
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {

                if (drawerView == mDrawerList) {
                    isDirection_left = true;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = true;
                }
                getSupportActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

        };

2.2、将原来的getActionBar()的地方全部换成getSupportActionBar()，比如：

public class MainActivity extends ActionBarActivity {
        ……
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        // ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon

完成到这里，左边的抽屉便可以实现类似网易V4.4.4的滑动效果了

下面主要是实现overflow menu，也就是右边菜单的效果，及增加右边抽屉。

3.1、修改menu/main.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <!-- 这是Toolbar上的搜索Button -->
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"/>

    <!-- 这是Toolbar上的个人信息Button -->
    <item
        android:id="@+id/action_person"
        android:icon="@drawable/ic_action_person"
        android:title="@string/action_persion"
        app:showAsAction="ifRoom"/>

      <!-- 这是Toolbar上的overflow  menu -->
    <item
        android:id="@+id/action_overflow"
        android:icon="@drawable/ic_action_overflow"
        android:title="@string/action_search"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/action_about"
                android:icon="@drawable/ic_action_about"
                android:showAsAction="always|withText"
                android:title="@string/action_about"/>
            <item
                android:id="@+id/action_settings"
                android:icon="@drawable/ic_action_settings"
                android:showAsAction="always|withText"
                android:title="@string/action_settings"/>
        </menu>
    </item>

</menu>

上面overflow menu部分，是为了实现icon+文字的效果，如果只需要显示文字，那直接去掉外面嵌套的自定义的action_overflow即可。

4、实现左右滑动抽屉

4.1、修改layout/activity_main.xml,增加作为右边抽屉显示的View，下面是直接简单用textview作为显示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    ……     
    <!-- 增加右边抽屉显示 -->
        <TextView
            android:id="@+id/right_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="#ffffff"
            android:gravity="center"
            android:textColor="#444444"
            android:text="@string/right_drawer_info"
            android:textSize="30sp" >
        </TextView>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

4.2、处理好Toolbar上点击左边按键，个人信息按键，用以控制显示左右抽屉：

在监听抽屉打开或者关闭回调部分，记录好左边还是右边打开的标志位：

// ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
                R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View drawerView) {
                if (drawerView == mDrawerList) {
                    isDirection_left = false;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = false;
                }
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {

                if (drawerView == mDrawerList) {
                    isDirection_left = true;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = true;
                }
                getSupportActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

        };

设置好Toolbar监听，监听左边Button点击事件，以便处理相关抽屉打开或关闭：

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // catch here title and home icon click
                if (isDirection_right) {
                    mDrawerLayout.closeDrawer(mPersonLayout);
                } else {
                    if (!isDirection_left) {
                        mDrawerLayout.openDrawer(mDrawerList);
                    } else {
                        mDrawerLayout.closeDrawer(mDrawerList);
                    }
                }

            }
        });

在onOptionsItemSelected回调函数中，处理属于个人信息Button点击事件，也就是控制右边抽屉的Button点击事件，以便处理相关抽屉打开或关闭：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // The action bar home/up action should open or close the drawer.
        // ActionBarDrawerToggle will take care of this.

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action buttons
        switch (item.getItemId()) {

        ……
        case R.id.action_person:
            if (isDirection_left) {
                mDrawerLayout.closeDrawer(mDrawerList);
            } else {
                if (!isDirection_right) {
                    mDrawerLayout.openDrawer(mPersonLayout);
                } else {
                    mDrawerLayout.closeDrawer(mPersonLayout);
                }
            }
            break;
        default:
            break;
        }
        return super.onOptionsItemSelected(item);
    }

这样便可以实现左右抽屉自然滑动切换了。

上面只要是一些具体修改细节，详细Demo工程共享如下：http://download.csdn.net/detail/bighulk/8629899

铁木

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DrawerLayout+ToolBar官方API实现仿网易V4.4.4导航抽屉

网易V4.4.4 的导航抽屉长啥样，我想在此无需多说，没见过的自己去体验吧。当时吸引我的是左边滑动，箭头图标变菜单图标动画，这个非常不错。殊不知，Android5.0以上官方提供的API便可轻松实现。5.0以下，需要添加android-support-v7-appcompat包支持。这个在SDk V7目录下。直接先看看实现运行效果图吧：（有网易效果了吧）下面谈谈实现要点：先利用
复制链接

扫一扫