导航抽屉片段和标签布局片段重叠

Question

导航抽屉片段和tablayout片段相互重叠，因为当我们打开导航抽屉片段时，我们也看到了tablayout片段的内容，所以我在下面添加了一个屏幕截图，你能帮我解决这个问题吗？我提到了xml文件在下面，请解决我的问题

activity_main.xml

 `<?xml version="1.0" encoding="utf-8"?>
  <androidx.drawerlayout.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/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">


<include layout="@layout/app_bar" />

<com.google.android.material.navigation.NavigationView
    android:id="@+id/naviview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/navi_header"
    app:menu="@menu/menu_item" />


  </androidx.drawerlayout.widget.DrawerLayout>`

app_bar.xml

`<androidx.coordinatorlayout.widget.CoordinatorLayout 
 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">


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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay" />


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabBackground="@color/colorPrimaryDark"
        app:tabGravity="fill"
        app:tabInlineLabel="true"
        app:tabMode="fixed"
        app:tabTextColor="@color/white"/>


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

<androidx.viewpager.widget.ViewPager
    android:id="@+id/pageviewer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/tablayout"
    />

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


 </androidx.coordinatorlayout.widget.CoordinatorLayout>

`

Mainactivity.kt

class MainActivity : AppCompatActivity() {
lateinit var toggle: ActionBarDrawerToggle

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    toolbar()

    toggle = ActionBarDrawerToggle(this, drawerlayout, R.string.open, 
  R.string.close)
    drawerlayout.addDrawerListener(toggle)
    toggle.syncState()



    naviview.setNavigationItemSelectedListener {

        when (it.itemId) {
            R.id.add_book -> {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.framelayout, Addbook())
                    .addToBackStack("Addbook")
                    .commit()
                supportActionBar?.title = "Addbooks"
                drawerlayout.closeDrawers()
            }
            R.id.add_bookset -> {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.framelayout, Addbooksets())
                    .addToBackStack("Addbooksets")
                    .commit()
                supportActionBar?.title = "Addbooksets"
                drawerlayout.closeDrawers()
            }
            R.id.add_tools -> {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.framelayout, AddTools())
                    .addToBackStack("AddTools")
                    .commit()
                supportActionBar?.title = "AddTools"
                drawerlayout.closeDrawers()
            }
            R.id.About_App -> {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.framelayout, Aboutus())
                    .addToBackStack("Aboutus")
                    .commit()
                supportActionBar?.title = "About us"
                drawerlayout.closeDrawers()
            }
            R.id.contact_us -> {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.framelayout, Contactus())
                    .addToBackStack("Contactus")
                    .commit()
                supportActionBar?.title = "Contact us"
                drawerlayout.closeDrawers()
            }
            R.id.share_app -> Toast.makeText(this, " Share app 
    selected", Toast.LENGTH_SHORT)
                .show()
            R.id.logout -> Toast.makeText(this, "Logout selected", 
     Toast.LENGTH_SHORT).show()
        }
        true
    }
    setfragments()
 }

 private fun setfragments() {
     val adapter = viewpageadapter(supportFragmentManager)
    adapter.addfragment(Books(), "Books")
    adapter.addfragment(BookSets(), "BookSets")
    adapter.addfragment(Tools(), "Tools")
    pageviewer.adapter = adapter
    tablayout.setupWithViewPager(pageviewer)

  }

   fun toolbar() {
    var toolbar: Toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)
    supportActionBar?.title="BookQueen"
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
  }

   override fun onOptionsItemSelected(item: MenuItem): Boolean {
    if (toggle.onOptionsItemSelected(item)) {
        return true
    }
    return super.onOptionsItemSelected(item)
   }
   }

viewpageadapter.kt

class viewpageadapter(supportfragmentmanger:FragmentManager):
 FragmentPagerAdapter(supportfragmentmanger,
BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
private val fragmentlist= ArrayList<Fragment>()
private val fragmenttitlelist= ArrayList<String>()

override fun getItem(position: Int): Fragment {
    return fragmentlist[position]
}

override fun getCount(): Int {
   return fragmentlist.size
}

override fun getPageTitle(position: Int): CharSequence? {
    return fragmenttitlelist[position]
}

fun addfragment(fragment: Fragment,title:String){
    fragmentlist.add(fragment)
    fragmenttitlelist.add(title)
}
}

Answer 1

老实说，我不明白您为什么要编写这样的代码。涉及选项卡布局和抽屉的一般模式是让抽屉片段包含选项卡布局及其片段作为子片段。因此，您需要在这里做的是将标签栏布局和 viewpager 与app_bar.xml 分开，并将它们写在自己的 xml 中，因为它们应该在自己的片段中。同样在该片段内，将 viewpager 保持在 tablayout 下方，并在选择适当的抽屉选项时替换这个新创建的片段。