<Android 基础（三十七）> 自定义ViewPagerIndicator

1. 简介

学习Android，自定义View不可避免，之前一直忽视这块内容，现在开始学，应该不算太晚。从常见的ViewPagerIndicator开始，当然，万能的Github上包罗万象，好用的indicator也是不胜枚举，旨在学习自定义View的一般操作过程。

---

2. 大致思路

做一个简单的ViewPagerIndicator，只支持平均大小的TextView，支持点，矩形和三角形。
1. 使用LinearLayout作为父类；
2. 定义indicator的颜色，高度和半径，当然也可以定义其他的属性；
3. 使用到Path，Paint，Canvas等图形绘制的内容；
4. 使用Kotlin

---

3. 实现

以圆形indicator为例

3.1 定义自定义属性

styles.xml

    <attr name="y_indicator_color" format="color"/>    <attr name="y_indicator_radius" format="dimension"/>    <declare-styleable name="YVPDotIndicator">        <attr name="y_indicator_color"/>        <attr name="y_indicator_radius"/>    </declare-styleable>

3.2 代码实现

通过设置ViewPager，然后从Adapter的getPageTitle方法获取TextView的显示内容，然后添加标签，然后绘制圆形指示器，通过ViewPager的滑动回调方法，设置圆形指示器的位置。

class YVPDotIndicator : LinearLayout {    private var mStartPos: Float = 0.0F//indicator开始位置    private var mWidthOffset: Int = 0//初始offset    private var mPaint: Paint? = null    private var mIndicatorColor = Color.parseColor("#FFFFFF")//indicator颜色    private var mIndicatorRadius = 2//圆形indicator半径    private var mVp: ViewPager? = null    private var pageListener = InterPageChangeListener()    private var mTabCount: Int? = 0    private var mTabWidth: Float? = 0.0F    private val defaultLayoutParams = LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f)    constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {        setWillNotDraw(false)        val dm = resources.displayMetrics        val a = context.theme.obtainStyledAttributes(attrs, R.styleable.YVPDotIndicator, defStyle, 0)        mIndicatorRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mIndicatorRadius.toFloat(), dm).toInt()        mIndicatorColor = a.getColor(R.styleable.YVPDotIndicator_y_indicator_color, Color.parseColor("#FFFFFF"))        mIndicatorRadius = a.getDimensionPixelSize(R.styleable.YVPDotIndicator_y_indicator_radius, 2)        a.recycle()        initPaint()    }    /**     * 设置ViewPager     */    fun setViewPager(vp: ViewPager) {        mVp = vp        if (vp.adapter == null) {            throw IllegalArgumentException()        }        notifyDataSetChanged()        mVp?.addOnPageChangeListener(pageListener)    }    fun notifyDataSetChanged() {        this.removeAllViews()        mTabCount = mVp?.adapter?.count        for (i in 0..mTabCount?.let { it - 1 } as Int) {            addTextTab(i, mVp?.adapter?.getPageTitle(i).toString())        }    }    fun addTextTab(position: Int, title: String) {        var tab = TextView(context)        tab.text = title        tab.gravity = Gravity.CENTER        tab.setSingleLine()        tab.isFocusable = true        tab.setOnClickListener { mVp?.currentItem = position }        this.addView(tab, position, defaultLayoutParams)    }    /**     * 初始化画笔     */    private fun initPaint() {        mPaint = Paint()        mPaint?.color = mIndicatorColor        mPaint?.isAntiAlias = true        mPaint?.style = Paint.Style.FILL    }    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {        super.onSizeChanged(w, h, oldw, oldh)        mTabWidth = (w / childCount).toFloat()        mStartPos = mTabWidth?.let { it/2 } as Float    }    override fun dispatchDraw(canvas: Canvas?) {        canvas?.save()        canvas?.translate(0.0F, height.toFloat())        canvas?.drawCircle(mStartPos + mWidthOffset, -mIndicatorRadius.toFloat(), mIndicatorRadius.toFloat(), mPaint)        canvas?.restore()        super.dispatchDraw(canvas)    }    inner class InterPageChangeListener: ViewPager.OnPageChangeListener {        override fun onPageScrollStateChanged(state: Int) {        }        override fun onPageSelected(position: Int) {        }        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {            val tabWidth = screenWidth / childCount            mWidthOffset = (tabWidth * position + tabWidth * positionOffset).toInt()            invalidate()        }    }    /**     * 获取屏幕宽度     * @return     */    private val screenWidth: Int        get() {            val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager            val displayMetrics = DisplayMetrics()            windowManager.defaultDisplay.getMetrics(displayMetrics)            return displayMetrics.widthPixels        }}

---

4. 其他Indicator

类似的矩形指示器和三角形指示器，均可按照上面的方式实现。

---

5. 具体效果

---

6. 示例源码

请移步Github———-YVPIndicator