KDTabLayout 使用教程

项目介绍

KDTabLayout 是一个用 Kotlin 编写的自定义 TabLayout，参考自 MagicIndicator。它适配了 ViewPager2，可以用来创建酷炫的 Tab 效果。KDTabLayout 提供了丰富的自定义选项，包括 Tab 模式、滚动偏移、指示器样式等。

项目快速启动

添加依赖

首先，在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.github.XuQK:KDTabLayout:versionCode'
implementation 'androidx.viewpager2:viewpager2:versionCode'

布局文件

在布局文件中添加 KDTabLayout 和 ViewPager2：

<com.github.xuqk.kdtablayout.KDTabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

配置 Adapter

为 KDTabLayout 配置 Adapter，并与 ViewPager2 联动：

class MainActivity : AppCompatActivity() {

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

        val tabLayout = findViewById<KDTabLayout>(R.id.tabLayout)
        val viewPager2 = findViewById<ViewPager2>(R.id.viewPager2)

        viewPager2.adapter = MyPagerAdapter(this)

        tabLayout.setViewPager2(viewPager2)
    }
}

class MyPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment = MyFragment.newInstance(position)
}

应用案例和最佳实践

自定义 Tab

你可以继承 KDTab 类来创建自定义的 Tab：

class CustomTab(context: Context) : KDTab(context) {
    override fun onScrolling(selectedFraction: Float, selectedInLeft: Boolean) {
        // 自定义滚动效果
    }
}

自定义 Indicator

你可以创建自定义的 Indicator：

class CustomIndicator : KDTabIndicator {
    override fun createIndicator(): KDIndicator? {
        return KDRecIndicator(tab2).apply {
            indicatorHeight = 6f
            color = 0xffff5722.toInt()
            cornerRadius = 3f
            mode = KDRecIndicator.MODE_EXACT
            indicatorWidth = 16f
            startInterpolator = AccelerateInterpolator()
            endInterpolator = DecelerateInterpolator(2f)
        }
    }
}

典型生态项目

KDTabLayout 可以与 ViewPager2 结合使用，创建复杂的页面导航效果。以下是一些典型的生态项目：

1. 多标签新闻应用：使用 KDTabLayout 和 ViewPager2 实现新闻分类标签，每个标签对应一个新闻列表。
2. 电商应用：在商品详情页使用 KDTabLayout 和 ViewPager2 实现商品图片和描述的切换。
3. 社交应用：在个人主页使用 KDTabLayout 和 ViewPager2 实现动态、相册、关注等标签的切换。

通过这些应用案例，你可以看到 KDTabLayout 在实际项目中的灵活性和强大功能。