思路

其实主要的内容就是自定义一个带颜色渐变的一个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,开始绘制文本

  • 设置画笔的文字大小(文字大小 * 缩放比例)
  • 保存画布,并根据计算出来的绘制区域的开始坐标和结束坐标剪切画布,这是整个绘制核心,一旦剪切等下调用darwText()方法就只会绘制剪切的这部分
  • 获取文字矩形区域,通过调用paint.getTextBounds()这个方法就能拿到我们绘制文本的区域
  • 获取文字的度量指标,计算出基线的位置
  • 调用画布的drawText()去绘制我们的文本

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
    )
    /**
     * 添加多个tab
     */
    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()
    }
    /**
     * 添加tab
     */
    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)
    }
    /**
     * 关联ViewPage
     */
    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()
        }
    }
    /**
     * 选中某个item回调
     */
    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内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Android自定义超级炫酷的ViewPage指示器的更多相关文章

  1. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  4. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  5. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  6. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  7. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  8. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  9. 使用 Swift 语言编写 Android 应用入门

    Swift标准库可以编译安卓armv7的内核,这使得可以在安卓移动设备上执行Swift语句代码。做梦,虽然Swift编译器可以胜任在安卓设备上编译Swift代码并运行。这需要的不仅仅是用Swift标准库编写一个APP,更多的是你需要一些框架来搭建你的应用用户界面,以上这些Swift标准库不能提供。简单来说,构建在安卓设备上使用的Swiftstdlib需要libiconv和libicu。通过命令行执行以下命令:gitclonegit@github.com:SwiftAndroid/libiconv-libi

  10. Android – 调用GONE然后VISIBLE使视图显示在错误的位置

    我有两个视图,A和B,视图A在视图B上方.当我以编程方式将视图A设置为GONE时,它将消失,并且它正下方的视图将转到视图A的位置.但是,当我再次将相同的视图设置为VISIBLE时,它会在视图B上显示.我不希望这样.我希望视图B回到原来的位置,这是我认为会发生的事情.我怎样才能做到这一点?编辑–代码}这里是XML:解决方法您可以尝试将两个视图放在RelativeLayout中并相对于彼此设置它们的位置.

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部