Android：MagicIndicator的使用

一、核心信息

版本：1.7.0（第三方维护最终稳定版，官方最高 1.4.2）
包名：net.lucode.hackware.magicindicator
支持：ViewPager + ViewPager2
作用：顶部 Tab 指示器、滑动导航、文字动画、底部横线 / 圆角背景

二、依赖（必须正确）

1. app/build.gradle

gradle

arduino 复制代码

implementation 'com.github.hackware1993:MagicIndicator:1.7.0'

2. 项目根目录 build.gradle 必须加仓库

gradle

rust 复制代码

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

三、XML 布局（通用）

xml

ini 复制代码

<net.lucode.hackware.magicindicator.MagicIndicator
    android:id="@+id/magic_indicator"
    android:layout_width="match_parent"
    android:layout_height="48dp"/>

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

四、最核心使用步骤（必背）

步骤 1：创建标题列表 + Fragment 列表

kotlin

scss 复制代码

val titles = listOf("首页", "旅拍", "视频", "我的")

val fragments = listOf(
    HomeFragment(),
    VideoFragment(),
    TravelFragment(),
    MineFragment()
)

步骤 2：给 ViewPager2 设置适配器

kotlin

kotlin 复制代码

viewPager2.adapter = object : FragmentStateAdapter(this) {
    override fun getItemCount() = fragments.size
    override fun createFragment(position: Int) = fragments[position]
}

步骤 3：初始化 MagicIndicator（最关键）

kotlin

kotlin 复制代码

val magicIndicator = findViewById<MagicIndicator>(R.id.magic_indicator)

// 1. 创建导航器
val navigator = CommonNavigator(this)
navigator.isAdjustMode = true // 自动居中，非常重要

// 2. 设置适配器
navigator.adapter = object : CommonNavigatorAdapter() {
    override fun getCount(): Int = titles.size

    // 3. 设置文字样式
    override fun getTitleView(context: Context, index: Int): IPagerTitleView {
        return ScaleTransitionPagerTitleView(context).apply {
            text = titles[index]
            normalColor = Color.GRAY         // 未选中颜色
            selectedColor = Color.RED        // 选中颜色
            textSize = 15f
            minScale = 0.9f                  // 未选中缩放
        }
    }

    // 4. 设置指示器样式（底部横线 / 圆角背景 / 圆点）
    override fun getIndicator(): IPagerIndicator {
        return RoundRectPagerIndicator(context).apply {
            setColors(Color.RED)
            roundRadius = 14f    // 圆角
            rectHeight = 28f     // 背景高度
            rectWidth = 58f      // 背景宽度
        }
    }
}

// 5. 绑定
magicIndicator.navigator = navigator
magicIndicator.bindViewPager2(viewPager2)  // 1.7.0 支持 ViewPager2

五、1.7.0 支持 5 种最常用指示器

你可以随便替换 getIndicator() 里的代码：

1. 圆角矩形指示器（APP 最常用）

kotlin

ini 复制代码

RoundRectPagerIndicator(context).apply {
    setColors(Color.RED)
    roundRadius = 14f
    rectHeight = 28f
}

2. 底部直线指示器

kotlin

ini 复制代码

LinePagerIndicator(context).apply {
    setColors(Color.RED)
    lineHeight = 3f
    mode = LinePagerIndicator.MODE_EXACTLY
}

3. 圆点指示器

kotlin

ini 复制代码

CirclePagerIndicator(context).apply {
    setColors(Color.RED)
    radius = 4f
    space = 15f
}

4. 三角指示器

kotlin

scss 复制代码

TriangularPagerIndicator(context).apply {
    setColor(Color.RED)
}

5. 全屏背景指示器

kotlin

scss 复制代码

BackgroundPagerIndicator(context).apply {
    setColors(Color.parseColor("#F5F5F5"))
}

六、1.7.0 支持 4 种文字动画

替换 getTitleView 即可：

1. 颜色渐变（最稳）

kotlin

scss 复制代码

ColorTransitionPagerTitleView(context)

2. 缩放动画（最常用）

kotlin

scss 复制代码

ScaleTransitionPagerTitleView(context)

3. 翻转动画

kotlin

scss 复制代码

FlipPagerTitleView(context)

4. 渐变 + 缩放（效果最好）

kotlin

scss 复制代码

ScaleTransitionPagerTitleView(context)

七、1.7.0 新功能（非常好用）

1. 直接绑定 ViewPager2

kotlin

scss 复制代码

magicIndicator.bindViewPager2(viewPager2)

2. Tab 点击事件

kotlin

ini 复制代码

navigator.onTabClickListener = CommonNavigator.OnTabClickListener { index ->
    viewPager2.currentItem = index
}

3. 自动居中（isAdjustMode = true）

kotlin

ini 复制代码

navigator.isAdjustMode = true

标题少的时候会自动居中，非常美观。

八、完整可复制示例（你项目直接用）

kotlin

kotlin 复制代码

val titles = listOf("首页", "旅拍", "视频", "我的")
val fragments = listOf(HomeFragment(), VideoFragment(), TravelFragment(), MineFragment())

viewPager2.adapter = object : FragmentStateAdapter(this) {
    override fun getItemCount() = 4
    override fun createFragment(position: Int) = fragments[position]
}

val navigator = CommonNavigator(this)
navigator.isAdjustMode = true

navigator.adapter = object : CommonNavigatorAdapter() {
    override fun getCount() = titles.size

    override fun getTitleView(context: Context, index: Int): IPagerTitleView {
        return ScaleTransitionPagerTitleView(context).apply {
            text = titles[index]
            normalColor = Color.GRAY
            selectedColor = Color.RED
            textSize = 15f
        }
    }

    override fun getIndicator(): IPagerIndicator {
        return RoundRectPagerIndicator(context).apply {
            setColors(Color.RED)
            roundRadius = 14f
            rectHeight = 28f
        }
    }
}

magicIndicator.navigator = navigator
magicIndicator.bindViewPager2(viewPager2)

九、最重要的 3 句话（背会）

1.7.0 是目前最稳定版本，支持 ViewPager2
布局只需要 MagicIndicator + ViewPager2
核心：Navigator + Adapter + TitleView + Indicator