viewPager2 + TabLayout 实现 动态 调整tab和fragment数量

viewPager2 + TabLayout 实现 动态 调整tab和fragment数量

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.xxx_layout)
        initView()
        requestData()
    }

    private fun requestData() {
      // xxx...请求数据

       initTabs()
    }

    private fun initView() {

    }

    private var tabDatas: List<TestBean>? = null
    private var mMediator: TabLayoutMediator? = null
    private val mAdapter by lazy {
        Viewpager2Adapter(this)
    }

    private fun initTabs(tabData: List<TestBean>?) {
        if (tabData.isNullOrEmpty()) {
         // 自定义 空布局
            empty_layout?.visibility = if (tabLayout?.tabCount == 0) View.VISIBLE else View.GONE
            return
        }

        this.tabDatas = tabData
        // 确定 tab页数量

        if (viewpager?.adapter == null) {
            viewpager?.adapter = mAdapter
            viewpager.offscreenPageLimit = 1
            tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {

                override fun onTabSelected(tab: TabLayout.Tab?) {
                    tab?.customView?.apply {
                        //自定义 选中的tab要进行的操作 比如样式变化等等
                       // time_tv?.isSelected = true
                       // state_tv?.isSelected = true
                    }
                }

                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    tab?.customView?.apply {
                       //自定义 未选中的tab要进行的操作 比如样式变化等等
                       // time_tv?.isSelected = false
                       // state_tv?.isSelected = false
                    }
                }

                override fun onTabReselected(tab: TabLayout.Tab?) {

                }
            })
        }
        // 简单实现  待优化
        mAdapter.clearAllFragment()
        // 添加  frament
        for (i in tabData.indices) {
            // 添加自定的frament
            mAdapter.addFragment(xxxFragment.newInstance(xxx))
        }

        mMediator?.detach()
        // 配置 与 tablayout 建立连接
        mMediator = TabLayoutMediator(tabLayout, viewpager, object : TabLayoutMediator.TabConfigurationStrategy {
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
                val tabContent = tabData[position]
                if (tab.customView != null) {
                    // 动态改变 tab 内容
                   // tab.customView?.viewId?.text = "自定义内容"
                   // tab.customView?.viewId?.text = "自定义内容"
                } else {
                    // 添加自定义 tab 布局
                    val tabView = LayoutInflater.from(this@xxxActivity).inflate(R.layout.xxx_layout, tabLayout, false)
                    // 自定义tab内容
                    //tabView.time_tv.text = "自定义内容"
                    //tabView.state_tv.text = "自定义内容"
                    tab.customView = tabView

                }
            }
        })
        // 绑定 viewpager2 和 tablayout
        mMediator?.attach()
        // 刷新
        viewpager?.adapter?.notifyDataSetChanged()

    }


    override fun onDestroy() {
        super.onDestroy()
        // 解除绑定
        mMediator?.detach()
    }
import java.util.ArrayList;
import java.util.List;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;


import androidx.viewpager2.adapter.FragmentStateAdapter;
// viewPager2的adapter 本质上是RecyclerView 的Adapter

// viewPager2 的 适配器
public class Viewpager2Adapter extends FragmentStateAdapter {
    private List<Fragment> fragments;

    public Viewpager2Adapter(@NonNull AppCompatActivity activity) {
        super(activity);
        if (fragments == null) {
            fragments = new ArrayList<>();
        }
    }

    public void addFragment(Fragment fragment) {
        if (fragments != null) {
            fragments.add(fragment);
        }
    }

    public void deleteFragment(Fragment fragment) {
        if (fragments != null) {
            fragments.remove(fragment);
        }
    }

    public void clearAllFragment() {
        if (fragments != null) {
            fragments.clear();
            notifyDataSetChanged();
        }
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }


}
  <com.google.android.material.tabs.TabLayout
       android:id="@+id/tabLayout"
       android:layout_width="match_parent"
       android:layout_height="@dimen/d_48"
       android:layout_marginTop="@dimen/dp_10"
       android:paddingLeft="@dimen/d_12"
       android:paddingRight="@dimen/d_12"
       app:tabIndicatorHeight="0dp"
       app:tabMode="scrollable"
       app:tabRippleColor="@android:color/transparent" />



    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#f5f5f5"/>

 

实现 ViewPager2+TabLayout+Fragment 实现页面切换,需要以下步骤: 1. 在 XML 布局文件中定义 ViewPager2 TabLayout,并将它们嵌套在一个父布局中。 ```xml <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabGravity="center"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/tab_layout" app:layout_constraintBottom_toBottomOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` 2. 创建 Fragment,并实现 ViewPager2 的适配器。 ```kotlin class MyFragmentAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) { private val fragmentList = listOf( FirstFragment(), SecondFragment(), ThirdFragment() ) override fun getItemCount() = fragmentList.size override fun createFragment(position: Int) = fragmentList[position] } ``` 3. 在 Activity 或 Fragment 中,初始化 ViewPager2 TabLayout,并将适配器设置ViewPager2。 ```kotlin val viewPager: ViewPager2 = findViewById(R.id.view_pager) val tabLayout: TabLayout = findViewById(R.id.tab_layout) val adapter = MyFragmentAdapter(this) viewPager.adapter = adapter TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = "Tab ${position + 1}" }.attach() ``` 这样就可以实现 ViewPager2+TabLayout+Fragment 实现页面切换了。注意,TabLayoutMediator 是用来关联 TabLayout ViewPager2 的,它的第一个参数是 TabLayout,第二个参数是 ViewPager2,第三个参数是一个回调函数,用来设置 TabLayout 的标签文本。在最后一行调用 attach() 方法即可完成关联。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值