欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TabLayout-ViewPager-Fragment笔记

程序员文章站 2023-12-24 19:38:51
...

参考https://juejin.im/post/5864eb13570c3500695dcd1a

TabLayout-ViewPager-Fragment用法

  1. 布局

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" />
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp">
    </androidx.viewpager.widget.ViewPager>
    
  2. 给ViewPager提供FragmentPagerAdapter即可

    viewPager.adapter = MyFragmentPagerAdapter(supportFragmentManager)
    
  3. 实现类:FragmentPagerAdapter;这里直接在Activity里创建内部类:

    inner class MyFragmentPagerAdapter(fm: FragmentManager) :
        FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
        override fun getItem(position: Int): Fragment {
            return fragments[position]
        }
        override fun getCount(): Int {
            return fragments.size
        }
        //可选,tabLayout默认会调用
        override fun getPageTitle(position: Int): CharSequence? {
            return "fragment$position"
        }
    }
    
  4. TabLayout关联viewPager

    //关联viewPager;如果TabLayout写在ViewPager布局里,则可以省略这句
    tabLayout.setupWithViewPager(viewPager)
    //设置指示器颜色,默认颜色为colorAccent
    tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorPrimary))
    
  5. TabLayout其他功能

    app:tabBackground 设置TabLayout的背景

    app:tabGravity=“center|fill” 设置tabLayout里tabs的对齐方式,fill-均分布局,center-向中间靠拢

    app:tabIndicatorColor 设置指示器的颜色(默认情况下指示器的颜色为colorAccent)

    app:tabIndicatorHeight 设置指示器的高度,Material Design 规范建议是2dp

    app:tabMode=“fixed|scrollable” 设置Tabs的显示模式,scrollable-可滚动的tabs

    app:tabPadding 设置tab padding

    app:tabSelectedTextColor 设置Tab选中后,文字显示的颜色

    app:tabTextColor 设置Tab未选中,文字显示的颜色

    //可以修改tab图标和文字等
    var tab: TabLayout.Tab? = tabLayout.getTabAt(position)
    tab?.text = "xxx"
    tab?.setIcon(R.drawable.xxx)
    
  6. tab也可直接写在xml中,TabLayout嵌套TabItem

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable" >
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="个性推荐"
            android:icon="@drawable/xxx" />
    </com.google.android.material.tabs.TabLayout>
    

关于PagerAdapter

四个必须实现的方法

inner class MyPagerAdapter : PagerAdapter() {
    //这个object与destroyItem方法的object、instantiateItem的返回值相同
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view == `object`
    }
    //返回要切换的页面个数
    override fun getCount(): Int {
        return viewList.size
    }
    //释放资源
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.remove(viewList[position])
    }
    //container就是ViewPager
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        container.addView(viewList[position])
        return viewList[position]
    }
}

ViewPager方法

//设置缓存个数
viewPager.offscreenPageLimit = 4
//跳到指定页面
viewPager.currentItem = 3
//监听
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrollStateChanged(state: Int) {
    }
    override fun onPageScrolled(position: Int,
         positionOffset: Float, positionOffsetPixels: Int) {
    }
    override fun onPageSelected(position: Int) {
    }
})
相关标签: TabLayout

上一篇:

下一篇: