Android，将底部导航与选项卡相结合( Activity 与 fragment )

Question

hell 社区，

我是 Android 的新手，我找不到这个问题的好答案:

我想使用底部导航，一些元素也应该使用标签。

现在我的问题是最常见(最好)的实现方式是什么？

我很困惑是否应该为此导航使用 Activity 或 fragment 。

底部导航和选项卡都使用 fragment 是一种好方法，还是底部导航使用 Activity 而选项卡只使用 fragment 的最佳方法？

最好的问候

Answer 1

最好的方法是对两者都使用 Fragment。如果您为从底部导航可访问的每个屏幕使用 Activity，则必须在每个屏幕中放置一个 BottomNavigationView 并复制大量代码，以及调整之间的转换这些 Activity 。

Activity 应被视为应用程序的入口点:当单击启动器中的应用程序图标时，Manifest 中定义的主要 Activity 将启动。对于其他任何内容(UI 的部分、导航流程的部分...)，您可以使用 Fragment。

这是一个示例 Activity 和 Fragments 组织来解决您的问题:

MainActivity
     |--- TopLevelFragment1
     |--- TopLevelFragment2
     |           |--- TabFragment1
     |           |--- TabFragment2
     |           |--- TabFragment3
     |
     |--- TopLevelFragment3
     |--- TopLevelFragment4

正如您在上面的架构中看到的，一个 Activity 可以托 pipe fragment ， fragment 也可以有嵌套的 fragment (也称为“子 fragment ”)。TopLevelFragmentN 是在 BottomNavigationView 中选择项目时显示的 fragment 。 TabFragmentN 是从 TopLevelFragment2 中选择 Tab 时显示的 fragment 。

让我们深入了解实现。我没有测试以下代码，这些只是提供指导。以下是该 Activity 的示例代码:

main_activity.xml

<CoordinatorLayout android:id="@+id/coordinator_layout">
  <FrameLayout android:id="@+id/fragment_host"><!-- TopLevelFragments will be displayed here --></FrameLayout>
  <BottomNavigationView android:id="@+id/bottom_nav"/>
</CoordinatorLayout>

主 Activity .java

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        // Retrieve a reference to the BottomNavigationView and listen for click events.
        BottomNavigationView bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav);
        bottomNav.setOnNavigationItemSelectedListener(item -> {
            // Depending on the clicked item, change the displayed TopLevelFragment.
            switch(item.getItemId()) {
                case R.id.top_level_1:
                    showTopLevelFragment(new TopLevelFragment1());
                    return true;
                case R.id.top_level_2:
                    // Do the same with other TopLevelFragments
                    return true;
                default:
                    return false;
            }
        }

        // Show the first TopLevelFragment by default.
        showTopLevelFragment(new TopLevelFragment1());
    }

    private void showTopLevelFragment(Fragment fragment) {
        // Use the fragment manager to dynamically change the fragment displayed in the FrameLayout.
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_host, fragment)
            .commit();
    }
}

请引用documentation了解如何在 BottomNavigationView 中定义项目。

现在，让我们关注包含选项卡的 TopLevelFragment2。将 TabLayout 与 ViewPager 一起使用是一种常见的模式，这样您就可以通过向左或向右滑动来从一个选项卡移动到另一个选项卡。

top_level_fragment_2.xml

<ConstraintLayout android:id="@+id/constraint_layout">    
    <AppBarLayout android:id="@+id/appbar_layout">
        <Toolbar android:id="@+id/toolbar"/>
        <TabLayout android:id="@+id/tab_layout"/>
    </AppBarLayout>
    <ViewPager android:id="@+id/tab_pager"/>
</ConstraintLayout>

TopLevelFragment2.java

public class TopLevelFragment2 extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.top_level_fragment_2, container, false);
    }

    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        MyTabPagerAdapter tabPager = new MyTabPagerAdapter(getFragmentManager());

        ViewPager viewPager = getView().findViewById(R.id.tab_pager);
        viewPager.setAdapter(tabPager);

        // Display a tab for each Fragment displayed in ViewPager.
        TabLayout tabLayout = getView.findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);
    }

    static class MyTabPagerAdapter extends FragmentPagerAdapter {
        MyTabPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return 3; // One for each tab, 3 in our example.
        }

        @Override
        public Fragment getItem(int position) {
            switch(position) {
                case 0:
                    return new TabFragment1();
                case 1:
                    // Return a new instance of the fragment associated with the tab at position 1
                default:
                    throw new IllegalArgumentException();
            }
        }
    }
}

完成这些步骤后，您所要做的就是编写其他 fragment 的代码。