Android：带有选项卡布局的导航组件

Question

有人可以确认我们是否可以在Tab布局中使用Android的导航组件吗？

我现在的主要活动如下：

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
    <layout 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">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/Toolbar_Main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:text="@string/app_name"
            app:layout_scrollFlags="scroll|enterAlways"
            app:titleTextAppearance="@style/Locky.Toolbar.TitleText"
            app:titleTextColor="@color/colorAccent" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/TabLayout_Main"
            style="@style/Widget.MaterialComponents.TabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabIconTint="@color/state_color_tabitem"
            app:tabIndicatorColor="@color/colorAccent" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/ViewPager_Main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end|end"
        android:orientation="vertical">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/FAB_Account"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:visibility="invisible"
            app:srcCompat="@drawable/ic_account"
            style="@style/Locky.FloatingActionButton.Mini" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/FAB_Card"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:visibility="invisible"
            app:srcCompat="@drawable/ic_credit_card"
            style="@style/Locky.FloatingActionButton.Mini" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/FAB_Add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/fab_margin"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            app:srcCompat="@drawable/ic_add"
            style="@style/Locky.FloatingActionButton.Normal"/>

    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

MainActivity.kt

package com.th3pl4gu3.locky.ui.main

import android.content.res.Configuration
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AppCompatDelegate
import androidx.appcompat.app.AppCompatDelegate.MODE_NIGHT_YES
import androidx.databinding.DataBindingUtil
import androidx.viewpager.widget.ViewPager
import com.th3pl4gu3.locky.R
import com.th3pl4gu3.locky.databinding.ActivityMainBinding
import com.th3pl4gu3.locky.ui.main.utils.activateDarkStatusBar
import com.th3pl4gu3.locky.ui.main.utils.activateLightStatusBar
import com.th3pl4gu3.locky.ui.main.utils.toast


class MainActivity : AppCompatActivity() {

private lateinit var _binding: ActivityMainBinding
private val tabIcons = intArrayOf(
    R.drawable.ic_home,
    R.drawable.ic_account,
    R.drawable.ic_credit_card,
    R.drawable.ic_settings
)

private var isOpen = false

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    //Bind the activity view.
    _binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

    //Update status bar upon current theme
    darkModeVerification()

    //Set toolbar as acton bar
    setSupportActionBar(_binding.ToolbarMain)

    /**
     * Setup for Tab layout, View Pager Adapter and Tab components
     **/
    val sectionsPagerAdapter = SectionsPagerAdapter(supportFragmentManager)
    setupViewPagerFragments(sectionsPagerAdapter)

    _binding.ViewPagerMain.adapter = sectionsPagerAdapter
    _binding.TabLayoutMain.setupWithViewPager(_binding.ViewPagerMain)
    setupTabIcons()

    _binding.ViewPagerMain.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() {
        override fun onPageSelected(position: Int) {
            when(position){
                0 -> _binding.FABAdd.show()
                1 -> _binding.FABAdd.show()
                2 -> _binding.FABAdd.show()
                3 -> _binding.FABAdd.hide()
            }
        }
    })

    //Load expandable FABs and animations
    loadFABs()
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu_moreoptions_tab_main, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean = when (item.itemId) {
    R.id.Menu_Search -> {
        toast(getString(R.string.dev_feature_implementation_unknown, "Search"))
        true
    }

    else -> super.onOptionsItemSelected(item)
}

private fun loadFABs(){
    val fabOpen = AnimationUtils.loadAnimation(this, R.anim.anim_fab_open)
    val fabClose = AnimationUtils.loadAnimation(this, R.anim.anim_fab_close)
    val fabClockwise = AnimationUtils.loadAnimation(this, R.anim.anim_fab_rotate_clockwise)
    val fabAnticlockwise = AnimationUtils.loadAnimation(this, R.anim.anim_fab_rotate_anticlockwise)

    _binding.FABAdd.setOnClickListener {

        isOpen = if(isOpen){
            _binding.FABAdd.startAnimation(fabAnticlockwise)
            _binding.FABAccount.startAnimation(fabClose)
            _binding.FABCard.startAnimation(fabClose)
            false
        }else{
            _binding.FABAdd.startAnimation(fabClockwise)
            _binding.FABAccount.startAnimation(fabOpen)
            _binding.FABCard.startAnimation(fabOpen)

            true
        }

        _binding.FABAccount.setOnClickListener {
            toast(getString(R.string.dev_feature_implementation_unknown, "Account Creation"))
        }

        _binding.FABCard.setOnClickListener {
            toast(getString(R.string.dev_feature_implementation_unknown, "Card Creation"))
        }
    }
}

private fun darkModeVerification() = when (this.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
        Configuration.UI_MODE_NIGHT_YES -> window.activateDarkStatusBar()
        Configuration.UI_MODE_NIGHT_NO -> window.activateLightStatusBar(_binding.root)
        Configuration.UI_MODE_NIGHT_UNDEFINED -> window.activateLightStatusBar(_binding.root)
        else -> toast(getString(R.string.error_internal_code_1))
}

private fun setupViewPagerFragments(sectionsPagerAdapter: SectionsPagerAdapter) {
    sectionsPagerAdapter.addFragment(HomeFragment())
    sectionsPagerAdapter.addFragment(AccountFragment())
    sectionsPagerAdapter.addFragment(CardFragment())
    sectionsPagerAdapter.addFragment(SettingsFragment())
}

private fun setupTabIcons() = tabIcons.indices.forEach { x ->
    _binding.TabLayoutMain.getTabAt(x)!!.setIcon(tabIcons[x])
}
}

谁能解释一下我如何利用 Android 导航架构在片段之间移动而不是使用 ViewPager。

谢谢。

Answer 1

是的，可以将导航组件与 tablayout 一起使用。在这里实现 tablayout 和导航组件是你可以做的。

1. 您的主要活动只有用于 navHost 的 fragmentContainerView。

    <androidx.constraintlayout.widget.ConstraintLayout 
      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:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".activity.MainActivity">
   
      <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />
   
     </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 您有一个包含 tablayout 和 viewpager 的 home 片段。

    <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
   
      <com.google.android.material.appbar.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:theme="@style/Theme.myapp.AppBarOverlay">
   
          <androidx.appcompat.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              app:title="@string/app_name" />
   
          <com.google.android.material.tabs.TabLayout
              android:id="@+id/tabs"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/colorPrimary"/>
      </com.google.android.material.appbar.AppBarLayout>
   
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior" />
   
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
   

3. 现在 tablayout 通常最好放在 appbar 中，但默认情况下主 Activity 也有一个 app bar。所以我们可以在主活动中使用 NoAction 栏主题。但是现在每个片段都必须实现自己的操作栏。在 MainActivity 的 android manifest 中设置主题

    <activity android:name=".activity.MainActivity"
        android:theme="@style/Theme.myapp.NoActionBar">
   

4. 在主页片段中，您连接 tablayout 和 viewpager。我认为如果您遵循 tablayout 和 viewpager 的 android 文档，这些步骤应该很明显。 希望这会有所帮助，因为这对我来说并不那么简单。

Answer 2

viewpager解决方案可以参考：

• 浏览器 (https://developer.android.com/guide/navigation/navigation-swipe-view)
• viewpager2 (https://developer.android.com/guide/navigation/navigation-swipe-view-2)

假设您不想使用带有 tablayout 的视图寻呼机（这是我的情况）。这个好像没有内置功能(https://www.youtube.com/watch?v=Y0Cs2MQxyIs)

但是，每次选择选项卡时，您都可以执行这样的解决方法：

// In tab selected listener 
when(position) {
 0 -> {
    navController.popBackStack()
    navController.navigate(R.id.CashRegister)
 }
 1 -> {
   navController.popBackStack()
   navController.navigate(R.id.OECSettings)
 }
}