将navigationView与tabLayout一起使用

Question

所以我最近一直在努力更新我的应用程序以使用新的材料设计支持库.我的应用程序有一个主要活动,其中包含drawerLayout和导航视图.app的主要内容通过片段显示在frameLayout中.但是,我现在正在尝试将材质选项卡添加到导航抽屉的一个片段中.但是,我不确定如何实现这一点,同时保持我的片段在导航抽屉功能.我想要实现的一个很好的例子如下所示:

在这个应用程序(谷歌播放音乐)中,只有一些导航抽屉的项目有标签而有些则没有.所以我的问题是,我将如何实现这一点？(不寻找代码,只是概述我的布局应该如何组织)

回顾/澄清:我有一个主要布局,其中包含frameLayout(用于我的应用程序的内容),以及一个navigationView(用于导航不同的项目片段).然后我有一个监听器,用项目的相应片段替换主布局的frameLayout.现在,我需要为这些片段中的一个添加制表符(在4个其他片段之间导航).我也使用工具栏,我将其作为单独的布局包含在内.

任何建议表示赞赏.如果我的描述有点令人困惑,我很抱歉; 我会澄清任何必要的细节.

Answer 1

好吧,假设您的NavigationView有两个选项,第一个显示带有选项卡的片段(选项卡布局),第二个显示带有工具栏的片段.那你有两个选择:

1. 您可以使用仅具有框架布局的主布局,并将其替换为您想要的所有内容
2. 您可以使用协调器布局的主布局 - >应用栏 - >工具栏 - >选项卡布局和用于放置内容的框架布局

我更喜欢第二个选项,以避免总是配置工具栏,所以这就是我曾经做过的事情:

<!-- layout_main -->
<android.support.v4.widget.DrawerLayout
    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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar                    
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone"
                app:tabGravity="fill"
                app:tabMode="fixed" />

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

    <!-- The NavigationView -->
    <fragment
        android:id="@+id/navigation_fragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:name="some.path.to.the.NavigationViewFragment"
        tools:layout="@layout/fragment_navigation_view" />

</android.support.v4.widget.DrawerLayout>

如您所见,我将TabLayout的可见性更改为"已消失",以便带有制表符的片段注意设置为可见.带有选项卡的片段在布局中只有ViewPager:

<!-- fragment_with_tabs -->
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

现在带有选项卡的片段使用每个页面的片段初始化ViewPager:

@Override 
public onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    // The getChildFragmentManager() is Very important! Because fragments inside fragments are
    // not supported with the tipical fragmentManager, it requires NestedFragments and those
    // uses a childFragmentManager(). In other case a strange behaviour occurs
    ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
    adapter.addFragment(new TabOneFragment(), "Tab 1");
    adapter.addFragment(new TabTwoFragment(), "Tab 2");
    viewPager.setAdapter(adapter);

    tabLayout = (TabLayout) getActivity().findViewById(R.id.tab_layout);
    tabLayout.setVisibility(View.VISIBLE);
    tabLayout.setupWithViewPager(viewPager);
}

最后在你的TabFragments中做任何你想做的事情,这对我来说很好,我希望这对你也有用.对于代码语法的一些问题,我很抱歉,我使用Kotlin而不是Java开发android.

Answer 2

我不能推荐 Yiyo 建议的内容。如果您打算拥有具有不同布局的片段，则应该让片段在 XML 中自定义这些布局。这就是为什么工具栏的引入对于 Android 开发如此重要。将来，您甚至可能有更多每个 Fragment 之间不同的要求。其中一些可能不需要工具栏，其中一些可能需要工具栏上方的另一个视图，其中一些将有一个 RecyclerView，您希望 CoordinatorLayout 和 AppBar 可以访问它，以便滚动行为正常工作。

我建议您仅将 FrameLayout 作为 DrawerLayout 的内容（如 Yiyo 在第 1 点中提到的）。在这里，您将从 NavigationView 的回调中加载每个 Fragment。

<android.support.v4.widget.DrawerLayout 
    ...
    android:fitsSystemWindows="true"
    >

    <FrameLayout
        android:id="@+id/drawer_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
        ...
        />

</android.support.v4.widget.DrawerLayout>

在每个片段的 XML 中，如果该片段需要，您将放置一个工具栏。在选项卡式 Fragment 的 XML 中，您将放置 TabLayout，如果您愿意，还可以放置 CoordinatorLayout 和 AppBarLayout。从每个具有工具栏的片段中，您将把工具栏设置为操作栏：

Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
activity.setSupportActionBar(toolbar);

这里的所有都是它的。当然，您不想在每个片段中重复自己，因此您可以，例如，将此代码放入 DrawerFragment 中，并使用工具栏将其子类化为片段。您还需要将 Toolbar XML 配置放入单个文件中，并将其包含在 Fragment 的 XML 中<include layout="@layout/toolbar" />。或者您可能想从某些片段中删除工具栏，或更改其颜色、主题等。