FragmentTransaction replace与show hide实现Tab分页

原创已于 2022-09-05 17:18:52 修改 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #kotlin #开发语言

于 2022-08-10 17:46:15 首次发布

android 同时被 2 个专栏收录

103 篇文章

订阅专栏

kotlin

4 篇文章

订阅专栏

这篇博客探讨了在不适用TabLayout+ViewPager2的情况下，如何利用FragmentTransaction实现垂直Tab分页。通过replace和show/hide两种方式，详细解释了它们的实现原理和注意事项，包括如何处理Fragment的切换与回退状态，并提到了防止fragment复用的方法。

常规的tab分页是通过Tablayout + ViewPager2实现
但是Tablayout 继承 HorizontalScrollView 只能实现横向布局
在垂直tab 并且需求简单的场景下就可以使用FragmentTransaction
左侧tab采用两个linearLayout实现点击则可进行fragment切换

FragmentTransaction使用注意
每次在使用FragmentTransaction的时候都需要重新获取，每一个FragmentTransaction只能够commit（）一次。

如果需要通过返回键让fragment回复到之前的一个状态则使用 fransaction.addToBackStack(null)
这个方法，在commit（）之前使用，能够保留commit之前的状态，在使用返回键时，能够回到之前的状态。

在这里插入图片描述

replace实现

极端情况会出现fragment复用的情况
每次切换都是一个新的fragment


class MainActivity : AppCompatActivity() {
    private lateinit var feedBackView: LinearLayout
    private lateinit var feedBackListView: LinearLayout
    private var fragmentManager: FragmentManager = supportFragmentManager
    private lateinit var textView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val tabTitle = arrayListOf<String>("反馈记录", "我要反馈")
        val fragments = arrayOfNulls<Fragment>(tabTitle.size)
        fragments[0] = C()
        fragments[1] = D()
        feedBackView = findViewById(R.id.feedback)
        feedBackListView = findViewById(R.id.feedback_list)
        textView = findViewById(R.id.time)
        var fransaction: FragmentTransaction = fragmentManager.beginTransaction()
        fransaction.replace(R.id.fragment_feedback, fragments[1]!!)
        fransaction.addToBackStack(null)
        fransaction.commit()
        feedBackView.setOnClickListener(object : View.OnClickListener{
           override fun onClick(v: View?) {
               var fransaction: FragmentTransaction = fragmentManager.beginTransaction()
               textView.text = TimeProcessTool.getShowTime(1660113646495 - 25*60*60*1000)
               fransaction.replace(R.id.fragment_feedback, fragments[1]!!)
               fransaction.addToBackStack(null)
               fransaction.commit()


           }
       })

        feedBackListView.setOnClickListener(object : View.OnClickListener{
            override fun onClick(v: View?) {
                var fransaction: FragmentTransaction = fragmentManager.beginTransaction()

                fransaction.replace(R.id.fragment_feedback, fragments[0]!!)
                fransaction.addToBackStack(null)
                fransaction.commit()


            }

        })
    }

}

show hide方式实现

根据tag值去存取fragment可以杜绝复用问题
并且切换不会重新声明新的fragment

rivate fun bindFragment() {
        showType = 1
        var fransaction: FragmentTransaction = fragmentManager.beginTransaction()
        if (fragmentManager.findFragmentByTag("FeedBackFragment") != null) {
            fragments[0] = fragmentManager.findFragmentByTag("FeedBackFragment")!!
        } else {
            fragments[0] = FeedBackFragment()
            fransaction.add(R.id.fragment_feedback, fragments[0]!!, "FeedBackFragment")
        }
        if (fragmentManager.findFragmentByTag("FeedBackListFragment") != null) {
            fragments[1] = fragmentManager.findFragmentByTag("FeedBackListFragment")!!
        } else {
            fragments[1] = FeedBackListFragment()
            fransaction.add(R.id.fragment_feedback, fragments[1]!!, "FeedBackListFragment")
        }
        fransaction.show(fragments[0]!!)
        fransaction.hide(fragments[1]!!)
        fransaction.commit()
    }
 feedBackView.setOnClickListener(object : View.OnClickListener{
           override fun onClick(v: View?) {
               var fransaction: FragmentTransaction = fragmentManager.beginTransaction()
               textView.text = TimeProcessTool.getShowTime(1660113646495 - 25*60*60*1000)
               fransaction.show(fragments[0]!!)
                fransaction.hide(fragments[1]!!)
               fransaction.commit()


           }
       })

        feedBackListView.setOnClickListener(object : View.OnClickListener{
            override fun onClick(v: View?) {
                var fransaction: FragmentTransaction = fragmentManager.beginTransaction()
               fransaction.show(fragments[1]!!)
                fransaction.hide(fragments[0]!!)
                fransaction.commit()


            }

        })
    }

xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#52000000"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/feedback"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginTop="20dp"
                android:background="#FF6666" />

            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我要反馈" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/feedback_list"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginTop="20dp"
                android:background="#FF6666" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="反馈列表" />
        </LinearLayout>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/fragment_feedback"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" />
</LinearLayout>