文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android自定义超级炫酷的ViewPage指示器

2024-04-02 19:55

关注

思路

其实主要的内容就是自定义一个带颜色渐变的一个TextView,需要定义两个画笔,一个负责绘制未选中颜色,一个负责绘制选中时的颜色,各自绘制各自的区域就能绘制出一个带颜色渐变的TextView

然后外部再包装一层LinearLayout,水平排放每个tab,再监听Viewpage的滑动,根据滑动百分比来改变TextView的选中以及未选中区域的大小三,代码实现

难点

绘制渐变色的TextView其实最重要的还是计算基线的位置,基线位置计算出来,那么就能调用drawText()方法去绘制我们的文本了,基线计算方式参考文末

代码实现渐变TextView

@RequiresApi(Build.VERSION_CODES.Q)
class CustomTextView : AppCompatTextView {
    
    private var mUnSelectPaint: Paint? = null
    
    private var mSelectPaint: Paint? = null
    
    var mScrollProcess = 0f
    
    var mScrollToLeft = true
    
    var mTextScale = 0.7f
    
    private var mSelectColor = Color.parseColor("#8966FF")
    private var mUnSelectColor = Color.parseColor("#DBC0FF")
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)
    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attributeSet,
        defStyleAttr
    ) {
        //初始化画笔
        mUnSelectPaint = Paint()
        mUnSelectPaint?.apply {
            color = mUnSelectColor
            textSize = this@CustomTextView.textSize
            isAntiAlias = true
            isDither = true
        }
        mSelectPaint = Paint()
        mSelectPaint?.apply {
            color = mSelectColor
            textSize = this@CustomTextView.textSize
            isAntiAlias = true
            isDither = true
        }
    }
    
    override fun onDraw(canvas: Canvas?) {
        val x = width * mScrollProcess
        if (mScrollToLeft) {
            drawText(canvas!!, mUnSelectPaint!!, x, width.toFloat())
            drawText(canvas!!, mSelectPaint!!, 0f, x)
        } else {
            drawText(canvas!!, mUnSelectPaint!!, 0f, width - x)
            drawText(canvas!!, mSelectPaint!!, width - x, width.toFloat())
        }
    }
    
    private fun drawText(canvas: Canvas, paint: Paint, startX: Float, endX: Float) {
        paint.textSize = textSize * mTextScale
        //保存画布,剪切画布(设置画布显示区域)
        canvas.save()
        canvas.clipRect(startX, 0f, endX, height.toFloat())
        //获取文字矩形区域
        var bounds = Rect()
        paint.getTextBounds(text, 0, text.length, bounds)
        //获取文字的度量指标
        val fontMetrics = paint.fontMetrics
        //计算基线到中心点位置
        val dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom
        //计算基线
        val baseLine = height / 2 + dy
        //绘制文字
        canvas.drawText(
            text.toString(),
            (width / 2 - bounds.width() / 2).toFloat(),
            baseLine,
            paint
        )
        canvas.restore()
    }
    
    fun setColor(selectColor: Int, unSelectColor: Int) {
        mSelectColor = selectColor
        mUnSelectColor = unSelectColor
        mSelectPaint?.color = selectColor
        mUnSelectPaint?.color = unSelectColor
        invalidate()
    }
}

1,在构造方法中初始化两支画笔,分别用于绘制未选中区域和选中区域

2,在onDraw()方法中根据滑动百分计算出绘制区域的宽度

3,判断滑动方向

4,开始绘制文本

5,效果如下,对算法不理解的需要自行去搜索getTextBounds(),getFontMetrics()这两个方法的作用及其属性变量的作用,到这里,一个渐变色的TextView就出来了,最后容我埋下一个bug

代码实现指示器

@RequiresApi(Build.VERSION_CODES.Q)
class MyIndicator : LinearLayout, ViewPager.OnPageChangeListener {
    var mTextScale = 0.7f
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)
    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attributeSet,
        defStyleAttr
    )
    
    fun addTabs(texts: List<String>) {
        texts.forEach {
            addTab(it)
        }
        //选中第一个
        val customTextView = getChildAt(0) as CustomTextView
        customTextView.mScrollToLeft = false
        customTextView.mScrollProcess = 1f
        customTextView.mTextScale = 1f
        customTextView.invalidate()
    }
    
    fun addTab(text: String) {
        val layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)
        layoutParams.weight = 1f
        val customTextView = CustomTextView(context)
        customTextView.textSize = 21f
        customTextView.gravity = Gravity.CENTER
        customTextView.text = text
        customTextView.mScrollProcess = 0f
        customTextView.mTextScale = 0.7f
        customTextView.layoutParams = layoutParams
        addView(customTextView)
    }
    
    fun relationViewPage(viewPage: ViewPager) {
        viewPage.addOnPageChangeListener(this)
    }
    
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        if (positionOffset > 0) {
            val tabView = getChildAt(position) as CustomTextView
            tabView.mScrollToLeft = false
            tabView.mScrollProcess = 1 - positionOffset
            tabView.mTextScale = if ((1 - positionOffset) > mTextScale) 1 - positionOffset else mTextScale
            tabView.invalidate()
            val rightTabView = getChildAt(position + 1) as CustomTextView
            rightTabView.mScrollToLeft = true
            rightTabView.mScrollProcess = positionOffset
            rightTabView.mTextScale = if (positionOffset > mTextScale) positionOffset else mTextScale
            rightTabView.invalidate()
        }
    }
    
    override fun onPageSelected(position: Int) {
    }
    
    override fun onPageScrollStateChanged(state: Int) {
    }
}

1,循环添加多个颜色渐变的CustomTextView,默认选中第一个

2,关联ViewPage,给ViewPage设置一个OnPageChangeListener监听器,监听其滑动距离,根据滑动百分比计算出CustomTextView的滑动比例,CustomTextView的文字缩放比例

3,效果如下,如有不理解的版代码过去自行改改参数就理解其中奥秘了,动起来

基线计算方式

在自定义View的过程中canvas.drawText(mText,0,y,mPaint);很容易出现字体不能完全漏出的问题,y的值其实不是距离画布的距离,这个y是基准线的距离,所以在绘制的过程中一定要求得正确的基准线。所以在draw的过程中首先要计算好基准线的y

Paint.FontMetricsInt fontMetrics = p.getFontMetricsInt();

p.descent,  //底部文本的最低点距离基准线的y值(正数)

p.ascent,  //顶部文本的最高点距离及基准线的y值(负数)

到此这篇关于Android自定义超级炫酷的ViewPage指示器的文章就介绍到这了,更多相关Android ViewPage内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯