TabLayout中重疊片段的問題

Question

我有一個帶有兩個片段的TabLayout，其中兩個片段顯示了一個RecyclerView（一部電影和另一部電視節目）。 TabLayout工作得很好但是當我點擊一部電影的圖像時問題就出現了。 電影中的點擊應該對電影細節片段進行交易。 但是當發生這種情況時，帶有TabLayout的ListFragment會出現在新的ListFragment下面，因此會顯示其中的兩個。

我的ActivityMain，我調用事務的代碼以及我設置頁面適配器的位置：

override fun onMovieClicked(iDMovie: Int) {

        val movieDetails = MovieDetailsFragment.newInstance(iDMovie)
        supportFragmentManager.
           beginTransaction().
           replace(R.id.main_container, movieDetails).
           addToBackStack(null).
           commit()
    }

private fun setStatePageAdapter() {

        val fragmentAdapter = MyPagerAdapter(supportFragmentManager)
        viewPager.adapter = fragmentAdapter

        tabLayout.setupWithViewPager(viewPager)

    }

我的PageAdapterClass：

class MyPagerAdapter(fm: FragmentManager): FragmentPagerAdapter(fm) {

   override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> {
                ListFilmFragment()
            }
            else -> {
                return TVShowsFragmentList()
            }
        }
    }

    override fun getCount(): Int {
        return 2
    }

    override fun getPageTitle(position: Int): CharSequence {
        return when (position) {
            0 -> "Películas"
            else -> {
                return "Series"
            }
        }
    }
}

布局：活動主要：

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


<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?actionBarSize"
        app:tabGravity="fill"
        app:tabIndicatorHeight="4dp"
        app:tabBackground="@color/black"
        app:tabMode="fixed"
        app:tabTextColor="@color/white"
        app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_height="match_parent"
        android:layout_width="match_parent">

</android.support.v4.view.ViewPager>

觀察：使用FrameLayout而不是Coordinator也不起作用。

我得到的結果如下：FragmentDetails與filmListFragment重疊，並且它們中的兩個同時顯示。 但只有細節片段必須顯示。

Answer 1

您可以通過兩種方式解決問題

第一：您可以隱藏您的ViewPager和TabLayout，以便為您的片段充氣。 所以改變你的MovieClicked方法，如下所示

override fun onMovieClicked(iDMovie: Int) {

   viewPager.visibiliy=View.Gone;
   tabLayout.visibility=View.Gone
    val movieDetails = MovieDetailsFragment.newInstance(iDMovie)
    supportFragmentManager.
       beginTransaction().
       replace(R.id.main_container, movieDetails).
       addToBackStack(null).
       commit()
}

Seconde：你可以改變你的片段XML Root元素 1 - 為每個片段設置一個背景android:background="yourColor"隱藏在布局后面。 將2套OnClick屬性設置為true以使應用程序接收當前布局onClickListeners而不是布局后面的android:onClick=true

你的Xml必須如下所示

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:onClick="true"
    android:background="#ffffff"<!--White Color for example-->
>


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

如果你有幾個有問題的片段布局你可以設置樣式並將片段樣式更改為你的樣式所以在style.xml聲明一個樣式

<style name="fragmentsRootElementStyle">
    <item name="android:onClick">true</item>
    <item name="android:background">#ffffff</item>
</style>

並為片段布局設置樣式 root如下所示

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

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