Android Studio导航抽屉（类似Gmail应用）

Question

我们正在开发一个安卓应用，想要添加的功能是 Gmail 应用拥有的效果。

用户可以选择要查看哪个账号（应用的其余部分将相应地表现）。

编辑：

我现在已经有了（可运行的）导航栏，但我想要的是标题中的圆形图标。我希望用户能够选择他们正在查看的用户。

- Tvde1

---

检查最新的编辑，如果有帮助，请不要忘记将其标记为已接受。 ;) - Mauker

嘿，抱歉打扰了，你是如何在右侧添加“1”的？ - Omer

@Omer 这是 Gmail 应用程序的屏幕截图。 - Tvde1

Answer 1

您可以使用com.android.support:design支持库中的NavigationView来实现您想要的效果。您可以在这里找到完整的教程，并可以从该教程的这里下载完整的源代码。您还可以参考这个不错的教程。

长话短说，该视图分为两个主要部分：标题和菜单部分，您需要在XML文件中定义它们各自的内容。

根据教程，头部是导航抽屉中的顶部部分，用于存放个人资料信息，例如头像、姓名和电子邮件等，需要在单独的布局文件中定义。菜单部分则是您希望显示在标题下方的菜单，我们在menus文件夹中定义它，就像定义溢出菜单一样。因此，NavigationView是Header View和Menu的容器，您将在滑动抽屉中使用它们。有了这些知识，您就可以像处理其他布局一样构建标题，并且菜单的定义方式与工具栏/操作栏菜单类似，例如：

navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/icon_home"
            android:title="@string/title_home"/>

        <item
            android:id="@+id/drawer_content"
            android:icon="@drawable/icon_content"
            android:title="@string/title_content"/>

        <item
            android:id="@+id/drawer_about"
            android:icon="@drawable/icon_about"
            android:title="@string/title_about"/>

        <item
            android:id="@+id/drawer_exit"
            android:icon="@drawable/icon_exit"
            android:title="@string/title_exit"/>

        </group>
</menu>

那么，在您的 Activity 中，您只需创建一个像教程中所示的布局，使用 DrawerLayout 以及 NavigationView。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical"
        >
        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar"/>
        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
        </FrameLayout>
 
    </LinearLayout>
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>

您还需要为想要在此NavigationView中显示的每个屏幕创建一些Fragments。完成后，您可以通过实现NavigationView.OnNavigationItemSelectedListener在您的Activity上处理选择事件，像这样：

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { 
    // Your Activity
        @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        Fragment fragment = null;

        switch(menuItem.getItemId()) {
            case R.id.drawer_home:
                fragment = new YourFragment();
                break;
            case R.id.drawer_content:
                fragment = new AnotherFragment();
                break;
            case R.id.drawer_about:
                fragment = new AboutFragment();
                break;
            case R.id.drawer_exit:
                // TODO - Prompt to exit.
                finish();
                break;
        }

        if (fragment == null) {
            fragment = new YourFragment();
        }

        drawerLayout.closeDrawers();

        FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.frame, fragment)
                    .commit();

        return true;
    }
}

关于您的修改，图标可以用ImageView来表示。至于在多个用户资料之间进行导航，则取决于您在应用程序中如何实现该逻辑，但作为一个“通用”的答案，您可以使用类似Spinner的东西来切换这些资料。

以下教程将帮助您完成此步骤：

• Android spinner (drop down list) example
• Android - Spinner
• Basic Spinner example (Stackoverflow question)
• Spinners (Android dev guide)

一旦您在标题上设置好了它，处理项目选择并相应更改用户资料。(最后一部分完全取决于您如何在应用程序中实现用户资料)。但只是作为一个开端，您可以查看android training site，更具体地说是这部分内容。

- Mauker

---

更完美的答案。继续前进 #Mauker - IntelliJ Amiya

@IntelliJAmiya 什么？你能解释一下你的意思吗？ - WarrenFaith

我曾经看过一篇博客文章，剖析了Android Studio 1.4中的NavigationView模板：http://androidessence.com/creating-a-material-design-navigation-drawer/ - AdamMc331

@Tvde1 这是另一个问题。请随意创建一个新问题，但它超出了本问题的范围。 - WarrenFaith

你必须在菜单头部使用“Spinner”。 - Mauker

Answer 2

你应该使用 NavigationView。

它提供了易于实现材料式导航抽屉的框架，通过菜单资源膨胀导航项。在 Navigation View 之前，我们需要使用 ListView 或 LinearLayout 与自定义适配器来制作材料式导航抽屉，但现在我们只需将 Navigation View 添加到 DrawerLayout 中，其他所有内容都将由 Navigation View 处理。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true">

     <!-- Your contents -->

     <android.support.design.widget.NavigationView
         android:id="@+id/navigation"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </android.support.v4.widget.DrawerLayout>

这个要求，您可以查看示例：

1. MaterialDrawer

2. 如何制作材料设计导航抽屉

3. 使用NavigationView

希望这可以帮到您。

- IntelliJ Amiya

Answer 3

我认为这个 MaterialDrawer 库是你正在寻找的。这个库有很多示例。你可以直接使用这个库，也可以阅读源代码并实现自己的抽屉。

- Zhaolong Zhong

Answer 4

您可以使用MaterialNavigation库来实现这个材料导航抽屉。有关实现的文章在这里。

您只需要导入该库，就完成了。请参见下面网站上的演示代码：

https://github.com/PatilShreyas/MaterialNavigationView-Android

- Shreyas Patil