由于应公司开发要求，有一个颜色渐变带缩放的指示器，虽然网上很多大佬开源的指示器开源库，但如果一直都是使用别人造的轮子，那么对于自身的能力是毫无提升作用的，即使是参考别人的，然后自己动手写一遍那对于自身来说也是一种升华

目录

思路难点代码实现渐变文本视图代码实现指示器基线计算方式

思路

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

然后外部再包装一层线性布局，水平排放每个选项卡，再监听视图页面的滑动，根据滑动百分比来改变文本视图的选中以及未选中区域的大小三，代码实现

难点

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

代码实现渐变TextView

@RequiresApi(Build .版本代码。问)

类自定义文本视图：AppCompatTextView {

/**

* 未选中画笔

*/

私有var mUnSelectPaint:油漆？=空

/**

* 选中画笔

*/

私有var mSelectPaint:油漆？=空

/**

* 滑动进度百分比

*/

var mScrollProcess=0f

/**

* 是否左边滑动

*/

var mScrollToLeft=true

/**

* 文字缩放比例

*/

var mTextScale=0.7f

/**

* 选中颜色以及未选中颜色

*/

private var mSelectColor=color。解析颜色(# 8966 ff)

private var mUnSelectColor=color。解析颜色(# DBC 0 ff))

构造函数(上下文：上下文):this(上下文，空)

构造函数(context:上下文，attributeSet: AttributeSet？):这个(上下文，属性集，0)

构造函数(context:上下文，attributeSet: AttributeSet？defStyleAttr: Int) : super(

语境，

属性集，

defStyleAttr

) {

//初始化画笔

mUnSelectPaint=Paint()

mUnSelectPaint？应用{

color=mUnSelectColor

text size=this @ custom textview。文本大小

isAntiAlias=true

isDither=true

}

mSelectPaint=Paint()

mSelectPaint？应用{

color=mSelectColor

text size=this @ custom textview。文本大小

isAntiAlias=true

isDither=true

}

}

/**

* 绘制内容

*/

覆盖fun onDraw(画布：画布？) {

val x=width * mScrollProcess

if (mScrollToLeft) {

绘图文本(画布！mUnSelectPaint！x，width.toFloat())

绘图文本(画布！mSelectPaint！0f，x)

}否则{

绘图文本(画布！mUnSelectPaint！0f，宽度- x)

绘图文本(画布！mSelectPaint！width - x，width.toFloat())

}

}

/**

* 绘制文字

*/

private fun drawText(Canvas:Canvas，paint: Paint，startX: Float，endX: Float) {

画画。文本大小=文本大小* mTextScale

//保存画布，剪切画布（设置画布显示区域)

canvas.save()

canvas.clipRect(startX，0f，endX，height.toFloat())

//获取文字矩形区域

var bounds=Rect()

paint.getTextBounds(text，0，text.length，Bounds)

//获取文字的度量指标

val字体规格=绘画。字体度量

//计算基线到中心点位置

val dy=(字体规格。底部字体度量。top)/2-字体规格。底部

//计算基线

英国压力单位基线=高度/2年

//绘制文字

canvas.drawText(

text.toString()，

(width/2 - bounds.width()/2).toFloat()，

基线，

颜料

)

canvas.restore()

}

/**

* 设置选中未选中颜色

*/

fun setColor(selectColor: Int，unSelectColor: Int) {

mSelectColor=selectColor

mUnSelectColor=取消颜色

mSelectPaint？颜色=选择颜色

mUnSelectPaint？颜色=取消颜色

无效()

}

}

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

2,在翁德劳方法中根据滑动百分计算出绘制区域的宽度

3,判断滑动方向

4,开始绘制文本

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

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

代码实现指示器

@RequiresApi(Build .版本代码。问)

我的指示器类：线性布局，视图页面.OnPageChangeListener {

var mTextScale=0.7f

构造函数(上下文：上下文):this(上下文，空)

构造函数(context:上下文，attributeSet: AttributeSet？):这个(上下文，属性集，0)

构造函数(context:上下文，attributeSet: AttributeSet？defStyleAttr: Int) : super(

语境，

属性集，

defStyleAttr

)

/**

* 添加多个标签

*/

趣味添加标签（文本：列表字符串){

texts.forEach {

添加标签(it)

}

//选中第一个

val custom textview=获取(0)处的子级作为自定义textview

自定义文本视图。mscrolltoleft=false

自定义文本视图。mscrollprocess=1f

customTextView.mTextScale=1f

customTextView.invalidate()

}

/**

* 添加标签

*/

fun addTab(text: String) {

val布局参数=布局参数(布局参数.WRAP_CONTENT，LayoutParams .MATCH_PARENT)

layoutParams.weight=1f

val自定义文本视图=自定义文本视图(上下文)

customTextView.textSize=21f

customTextView.gravity=Gravity .中心

customTextView.text=text

自定义文本视图。mscrollprocess=0f

customTextView.mTextScale=0.7f

自定义文本视图。布局参数=布局参数

添加视图（自定义文本视图)

}

/**

* 关联视图页面

*/

有趣的关系ViewPage(viewPage: ViewPager) {

视图页面。addonpagechangelistener(this)

}

/**

* 滑动回调

*/

override fun on pages rolled(position:Int，positionOffset: Float，positionOffsetPixels: Int) {

如果(位置偏移0) {

val选项卡视图=在(位置)获取子视图作为自定义文本视图

tabView.mScrollToLeft=false

tabView.mScrollProcess=1 -位置偏移

选项卡视图。mTextScale=if((1位偏移)mTextScale)1位偏移else mTextScale

tabView.invalidate()

val rightTabView=getChildAt(位置1)作为自定义文本视图

右标签视图。mscrolltoleft=true

右标签视图。mscrollprocess=位置偏移

右标签视图。mTextScale=if(位置偏移mTextScale)位置偏移else mTextScale

rightTabView.invalidate()

}

}

/**

* 选中某个项目回调

*/

覆盖所选页面上的乐趣(位置：Int){

}

/**

* 滑动状态改变回调

*/

覆盖fun onPageScrollStateChanged(state:Int){

}

}

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

2,关联视图页面，给视图页面设置一个OnPageChangeListener监听器，监听其滑动距离，根据滑动百分比计算出自定义文本视图的滑动比例，自定义文本视图的文字缩放比例

3.效果如下。不懂版本代码，过去自己改参数就懂玄机了。我们走吧。

基线计算方式

在自定义View的过程中，canvas.drawtext (mtext，0，y，MP aint)；很容易出现字体不能完全漏的问题。Y的值实际上不是离画布的距离，这个Y是离基线的距离，所以在画的过程中必须要求正确的基线。因此，在绘制的过程中，我们首先要计算基线的Y。

画画。FontMetricsInt font metrics=p . getfontmetricsint()；

P.descent，//底部文本最低点距基线的Y值(正数)

P.ascent，//顶部文本的最高点距离和基线的Y值(负值)

这就是这篇关于Android自定义超级酷的ViewPage指示器的文章。有关Android ViewPage的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。