如何像我们在 Google+、Reddit、Quora 应用程序中那样在底部导航菜单的项目中编写 ViewPager？

Question

我正在尝试通过使用 Fragments 作为 BottomNavigationMenu 的项目来实现这样的布局，在这些 Fragment 中，我正在使用 ViewPager。

但我遇到了这样的布局错误。

这是代码

getSupportFragmentManager().beginTransaction().add(R.id.fragment_frame, searchPropertyFragment).commit();
    bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            int id = item.getItemId();
            switch (id){
                case R.id.bottom_menu_properties:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new SearchPropertyFragment).commit();
                    break;
                case R.id.bottom_menu_chat:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new ChatFragment).commit();
                    break;
                case R.id.bottom_menu_profile:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new ProfileFragment).commit();
                    break;
                case R.id.bottom_menu_notifications:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new NotificationFragment).commit();
                    break;
            }
            return true;
        }
    });

这是SearchPropertyFragment

里面的viewPager代码

titlesList.clear();
fragmentsList.clear();
titlesList.add("Featured");
titlesList.add("Yours");
titlesList.add("Following");
fragmentsList.add(new FeaturedFragment());
fragmentsList.add(new YoursFragment());
fragmentsList.add(new FollowingFragment());
pagerAdapter = new PagerAdapter(getActivity().getSupportFragmentManager(), 
titlesList, fragmentsList);
viewpager.setAdapter(pagerAdapter);
tabs.setupWithViewPager(viewpager);

获得此布局的正确方法是什么。

Answer 1

在 DrawerLayout 中使用 FrameLayout 和 BottomNavigationView 其中 FrameLayout 是包含 ViewPager.

片段的容器

这是DrawerLayout的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

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

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

            <!--This is where the fragment will be placed-->

        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/navigationItemBackground"
            app:itemIconTint="@color/navigationItemIcon"
            app:itemTextColor="@color/navigationItemtext"
            app:menu="@menu/potential_tenant_menu"
            android:layout_alignParentStart="true" />

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

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

这是将放置在 FrameLayout 中的片段

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <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"
            app:layout_collapseMode="pin"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

如何像我们在 Google+、Reddit、Quora 应用程序中那样在底部导航菜单的项目中编写 ViewPager？

How to code ViewPagers inside Items of BottomNavigationMenu as we have in Google+, Reddit, Quora app?

android

android-layout

android-fragments

bottomnavigationview