Android Studio 导航抽屉，如 Gmail 应用

Posted 2023-03-31

技术标签:

【中文标题】Android Studio 导航抽屉，如 Gmail 应用【英文标题】：Android Studio navigation drawer like Gmail app 【发布时间】：2016-04-18 13:01:48 【问题描述】：

我们正在制作一个 android 应用程序，并且我们想要添加一些东西。 Gmail 应用的作用是什么。

您可以选择要查看的帐户（应用程序的其余部分将相应地进行操作）。

编辑：

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

【问题讨论】：

检查最新的编辑，如果有帮助不要忘记将其标记为已接受。 ;) 嘿，不好意思打扰了，你是怎么把右边的“1”加进去的？ @Omer 这是 Gmail 应用程序的屏幕截图。 【参考方案1】：

使用com.android.support:design支持库中的NavigationView可以达到你想要的效果。

您可以找到关于 here 的完整教程。您可以从该教程here下载完整的源代码。

还有你可以关注的here's another nice tutorial。

但长话短说，该视图分为两个主要部分，一个标题和一个菜单部分，每个部分都必须在 XML 上定义。

从那个教程开始：

标题视图

这个视图基本上是导航的顶部抽屉，里面有头像、姓名、邮箱等。你需要要在单独的布局文件中定义它，我们将在请稍等。

菜单

这是您要在标题下方显示的菜单，我们定义 menus 文件夹中的菜单，就像您为溢出定义菜单一样菜单。所以基本上 NavigationView 是 Header View 的容器和您将在滑动抽屉中使用的菜单。所以现在您了解 NavigationView 我们可以开始构建我们的导航抽屉。

考虑到这一点，请像处理任何其他布局一样构建您的页眉。菜单的定义有点像工具栏/操作栏菜单。例如：

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_
    android:layout_
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical"
        >
        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar"/>
        <FrameLayout
            android:id="@+id/frame"
            android:layout_
            android:layout_>
 
        </FrameLayout>
 
    </LinearLayout>
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>

您还必须为要使用此NavigationView 显示的每个屏幕创建一些Fragments。完成此操作后，您可以在 Activity 上通过实现 NavigationView.OnNavigationItemSelectedListener 来处理选择事件，如下所示：

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 (*** question) Spinners (Android dev guide)

在标题上设置好之后，处理项目选择并相应地更改用户配置文件。（最后一部分完全取决于您如何在应用程序上实现用户配置文件）。但作为一个开始，您可以查看android training site，更具体地说，this part。

【讨论】：

更完美的答案。继续前进#Mauker @IntelliJAmiya 什么？你能解释一下你的意思吗？我曾经看过一篇博文，剖析了 Android Studio 1.4 中的 NavigationView 模板：androidessence.com/creating-a-material-design-navigation-drawer 感谢您的帮助！它已被应用。 @Tvde1 这是另一个问题。随意创建一个新的，但这超出了这个问题的范围。【参考方案2】：

你应该使用 NavigationView

它提供了易于实现材质导航的框架抽屉通过菜单膨胀导航项目资源。在导航视图之前，我们很难制作材料使用带有自定义适配器的列表视图或线性布局的导航抽屉，但是现在我们只需要在 DrawerLayout 中添加 Navigation View，其他一切都将由 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_
     android:layout_
     android:fitsSystemWindows="true">

     <!-- Your contents -->

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

对于这个要求你可以检查样本

MaterialDrawer

How To Make Material Design Navigation Drawer

Playing with NavigationView

希望这会有所帮助。

【讨论】：

【参考方案3】：

我认为MaterialDrawer 就是您要找的。这个库有很多例子。您可以直接使用这个库，也可以阅读源代码并实现自己的抽屉。

【讨论】：

【参考方案4】：

您可以使用 MaterialNavigation 库来实现此材质导航抽屉。关于实现的文章是here。

您只需导入该库即可。请参阅以下站点上的演示代码：。