由于应公司开发要求，有一个颜色渐变带缩放的指示器，虽然网上很多大佬开源的指示器开源库，但如果一直都是使用别人造的轮子，那么对于自身的能力是毫无提升作用的，即使是参考别人的，然后自己动手写一遍那对于自身来说也是一种升华
目录
思路难点代码实现渐变文本视图代码实现指示器基线计算方式
思路
其实主要的内容就是自定义一个带颜色渐变的一个文本视图，需要定义两个画笔，一个负责绘制未选中颜色，一个负责绘制选中时的颜色，各自绘制各自的区域就能绘制出一个带颜色渐变的文本视图
然后外部再包装一层线性布局，水平排放每个选项卡，再监听视图页面的滑动，根据滑动百分比来改变文本视图的选中以及未选中区域的大小三，代码实现
难点
绘制渐变色的文本视图其实最重要的还是计算基线的位置，基线位置计算出来，那么就能调用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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。