Android 5.0 材料设计风格的 KitKat 导航抽屉
Posted
技术标签:
【中文标题】Android 5.0 材料设计风格的 KitKat 导航抽屉【英文标题】：Android 5.0 material design style navigation drawer for KitKat 【发布时间】：2014-12-16 02:17:57 【问题描述】：我看到 android 引入了新的导航抽屉图标、抽屉图标和返回箭头图标。我们如何在 Kitkat 支持的应用程序中使用它。查看 Google 最新版本的报亭应用程序，该应用程序具有最新的抽屉式导航图标和动画。我们如何实现它？
我尝试将 minSDK 设置为 19 并将 complileSDK 设置为 21，但它使用的是旧式图标。那是自己实现的吗？
【问题讨论】：
您的活动使用什么主题？ 现在，全息。想要切换到 Material 风格，但又想兼容 kitkat 使用 Appcompat 主题并检查下面的答案 Google 不断改变每个应用程序中的 Drawer 设计，他们在 Google IO 中所做的简单方式很简单，并且覆盖模式 mobilewebwizard.in/2015/01/… 【参考方案1】：您需要使用 appcompat v21 中的新工具栏以及此库中的新 ActionBarDrawerToggle。
将 gradle 依赖添加到你的 gradle 文件中：
compile 'com.android.support:appcompat-v7:21.0.0'
您的activity_main.xml 布局看起来像这样：
<!--I use android:fitsSystemWindows because I am changing the color of the statusbar as well-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_parent_view"
android:layout_
android:layout_
android:orientation="vertical"
android:fitsSystemWindows="true">
<include layout="@layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_
android:layout_>
<!-- Main layout -->
<FrameLayout
android:id="@+id/main_fragment_container"
android:layout_
android:layout_ />
<!-- Nav drawer -->
<fragment
android:id="@+id/fragment_drawer"
android:name="com.example.packagename.DrawerFragment"
android:layout_
android:layout_
android:layout_gravity="left|start" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
您的工具栏布局看起来像这样：
<?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"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_
android:layout_
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
您的活动必须扩展自：
ActionBarActivity
当您在活动中找到您的视图（抽屉和工具栏）时，将工具栏设置为支持操作栏并设置 setDrawerListener：
setSupportActionBar(mToolbar);
mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(mDrawerToggle);
之后你只需要处理菜单项和drawerToogle状态：
@Override
public boolean onCreateOptionsMenu(Menu menu)
MenuInflater inflater = new MenuInflater(this);
inflater.inflate(R.menu.menu_main,menu);
return true;
@Override
public boolean onOptionsItemSelected(MenuItem item)
if (mDrawerToggle.onOptionsItemSelected(item))
return true;
return super.onOptionsItemSelected(item);
@Override
protected void onPostCreate(Bundle savedInstanceState)
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
@Override
public void onConfigurationChanged(Configuration newConfig)
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
@Override
public void onBackPressed()
if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT))
mDrawerLayout.closeDrawers();
return;
super.onBackPressed();
实现与工具栏之前的相同，您可以免费获得箭头动画。没有头痛。更多信息请关注：
The documentation.
The ChrisBanes post
The official android blog post.
如果要在工具栏上方和状态栏下方显示抽屉，请参考this question。
编辑：使用支持设计库中的 NavigationView。使用教程在这里：http://antonioleiva.com/navigation-view/
【讨论】：
我有一个问题......当 Google 在 Material Spec 中建议 Drawer 应该位于 Actionbar/Toolbar 上方时，这个很棒的 ArrowDrawable 的目的是什么？ 说实话，我不知道。但是你可以在这个 google+ 帖子中找到一个很好的讨论：plus.google.com/102272971619910906878/posts/CQW5Wejx44g @MichałZ。实际上，对此有一个非常简单的解释：“纸上的墨水不会在纸张之间转移。” quote from Adam Powell (click)。您可能知道：相互移动的纸片是 Material Design 的核心概念之一。 Google 的应用程序有不同的导航抽屉：Play 商店有这个花哨的箭头绘图，报亭有移动操作栏的材料设计。 androidpolice.com/2014/10/30/… 非常好的答案！但是 ActionBarActivity 应该被编辑为 AppCompatActivity。【参考方案2】：答案不再有用。仅出于历史目的将其留在这里，因为发布 Android 的时间没有实现:)
现在有很多库可以做到这一点。
选择 1 - https://github.com/neokree/MaterialNavigationDrawer
其他
https://github.com/HeinrichReimer/material-drawer https://github.com/kanytu/android-material-drawer-template https://github.com/balysv/material-menu https://github.com/ikimuhendis/LDrawer https://github.com/Zlate87/material-navigation-drawer-example【讨论】：
我强烈建议首先推荐 Reimer 的项目，而不是 neokree 的。前者正确地将导航抽屉放在任务栏后面，包括所有必要的源并能够构建项目，后者在所有方面都失败了。虽然 Reimer's 目前还没有在 5.1 上运行并且仍然包含错误。 暂且不提，Reimer 的代码还不够成熟，可能想要处理太多仍需要调试的事情，这并不能使其成为一个教学示例。 github.com/kanytu/android-material-drawer-template 是一个更好的例子，但它不再维护，而是支持他的最新版本 (github.com/kanytu/Android-studio-material-template)，它实际上是 Android Studio 的模板！恕我直言，从那里开始要好得多。 第一选择是有问题的 - 必须扩展 ActionBarActivity 以外的类是 PITA，因为那样你就不能有一个通用的活动基类【参考方案3】：如果你想要真正的具有材料设计风格的导航抽屉（定义here）我已经实现了一个自定义库，可以做到这一点。 你可以找到它here
【讨论】：
我可以用eclipse而不是android studio ..吗？因为我需要这个导航抽屉 可以，但是你必须手动导入所有的依赖和代码。 它似乎有很多问题，您是否在新克隆上测试过构建？从我的立场来看，项目目录分为多个级别，您至少需要将其添加到您的示例 settings.gradle：project(':MaterialNavigationDrawerModule').projectDir = new File('../MaterialNavigationDrawerModule')。然后它尝试导入一个不存在的import it.neokree.example.backpattern.BackPatternCustom;。仍有 93 个未解决的问题。很高兴提供一个库......如果它是可靠的。【参考方案4】：
支持顶部评论以及新生成的 main_content 布局。我只是用 DrawerLayout 覆盖包含的内容布局。请记住，您的抽屉布局必须具有此 layout_behavior：appbar_scrolling_view_behavior
顶部容器的布局 https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/activity_recycler.xml#L17
包含的内容布局 https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/content_recycler.xml#L9
【讨论】：
以上是关于Android 5.0 材料设计风格的 KitKat 导航抽屉的主要内容，如果未能解决你的问题，请参考以下文章