android 滑动取值_Android View篇之调整字体大小滑杆的实现

小伙伴们大家好呀，这次介绍一个稍微有点意思的View，在很多阅读类、新闻类的APP上都标配的字体大小调整功能。100多行代码就可以实现，来看看效果吧！

思路分析

1、刻度线代表着每个字体的大小取值，是不是SeekBar就是这样的功能呀，改一下刻度浮标的样式即可。

2、刻度条上面的标注的文本代表着字体大小的说明，假设用一个LinearLayout包着3个TextView的方法很难实现文本跟刻度对齐，只能画出来了。

开始写代码

我们以SeekBar作为基础，对它进行重写onDraw()的方法，在这之前先来初始化一下基本属性。

/**

* 字体大小调整滑杆

* Created by ChenRui on 2017/10/13 0013 12:50.

*/

public class RaeSeekBar extends AppCompatSeekBar {

// 刻度说明文本，数组数量跟刻度数量一致，跟mTextSize的长度要一致

private String[] mTickMarkTitles = new String[]{

"A",

"标准",

"",

"",

"A"

};

// 刻度代表的字体大小

private int[] mTextSize = new int[]{

16,

18,

24,

26,

28

};

// 刻度文本画笔

private final Paint mTickMarkTitlePaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

// 刻度文本字体大小

private float mTickMarkTitleTextSize = 18;

// 刻度文本跟刻度之间的间隔

private float mOffsetY = 40;

// 刻度线的高度

private int mLineHeight = 10;

// 保存位置大小信息

private final Rect mRect = new Rect();

// ...省略一些其他构造函数

public RaeSeekBar(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

protected void init() {

// 初始化刻度文本字体大小

mTickMarkTitleTextSize = getSize(mTickMarkTitleTextSize);

// 刻度文本跟刻度之间的间隔

mOffsetY = getSize(mOffsetY);

// 刻度线的高度

mLineHeight = getSize(mLineHeight);

// 刻度文字的对齐方式为居中对齐

mTickMarkTitlePaint.setTextAlign(Paint.Align.CENTER);

// 刻度文字的字体颜色

mTickMarkTitlePaint.setColor(ContextCompat.getColor(getContext(), R.color.ph1));

// 设置最大刻度值为字体大小数组的长度

setMax(mTextSize.length);

// 设置当前的刻度

setProgress(1);

}

}

测量布局

因为要在原来的SeekBar的基础 上添加文本，那就应该在原来的SeekBar的 高度上再增加最大刻度的文字的高度就是控件布局的高度。

@Override

protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

// 原来的布局大小

int wm = MeasureSpec.getMode(widthMeasureSpec);

int hm = MeasureSpec.getMode(heightMeasureSpec);

int w = getMeasuredWidth();

int h = getMeasuredHeight();

// 以最大的字体为基础，加上刻度字体大小

h += getSize(mTextSize[mTextSize.length - 1]);

// 加上与刻度之间的间距大小

h += mOffsetY;

// 保存测量结果

setMeasuredDimension(MeasureSpec.makeMeasureSpec(w, wm), MeasureSpec.makeMeasureSpec(h, hm));

}

重绘

总结一下画的思路，这样可以比较好理解代码的实现。整个过程一共需要我们画3部分：

直线

刻度线

刻度文本

当然还有个滑动块，这个我们可以使用SeekBar自带的效果，即可以自定义样式，又能偷下懒。下面来一个个解析画的具体步骤。

1、画直线

我们先理解成外部是一个矩形，直线位于中间，左右两边的间距为滑块的一半。通过研究发现getPaddingLeft() getPaddingRight() 正好就是这个一半值。

2、刻度线

很容易看得出来，刻度线实际是把直线进行等分，等分的多少取决于setMax()的取值，也相当于mTextSize.length，这样我们通过画直线就能轻松实现了。

3、刻度文本

最重要的是确定文本所在的(x,y) 坐标值即可，不难发现文本的坐标是跟随刻度线的位置变化的，所以在画刻度线的时候就可以一起把文本也画出来了。

4、滑块位置

系统滑块的位置其实是跟分割线的位置一样的。等分直线，处于分割线中心。

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 刻度长度

int maxLength = getMax();

int width = getWidth();

int height = getHeight();

int h2 = height / 2; // 居中

// 画刻度背景

mRect.left = getPaddingLeft();

mRect.right = width - getPaddingRight();

mRect.top = h2 - getSize(1); // 居中

mRect.bottom = mRect.top + getSize(1.5f); // 1.5f为直线的高度

// 直线的长度

int lineWidth = mRect.width();

// 画直线

canvas.drawRect(mRect, mTickMarkTitlePaint);

// 遍历刻度，画分割线和刻度文本

for (int i = 0; i <= maxLength; i++) {

// 刻度的起始间隔 = 左间距 + (线条的宽度 * 当前刻度位置 / 刻度长度)

int thumbPos = getPaddingLeft() + (lineWidth * i / maxLength);

// 画分割线

mRect.top = h2 - mLineHeight / 2;

mRect.bottom = h2 + mLineHeight / 2;

mRect.left = thumbPos;

mRect.right = thumbPos + getSize(1.5f); // 直线的宽度为1.5

canvas.drawRect(mRect, mTickMarkTitlePaint);

// 画刻度文本

String title = mTickMarkTitles[i % mTickMarkTitles.length]; // 拿到刻度文本

mTickMarkTitlePaint.getTextBounds(title, 0, title.length(), mRect); // 计算刻度文本的大小以及位置

mTickMarkTitlePaint.setTextSize(getSize(mTextSize[i])); // 设置刻度文字大小

// 画文本

canvas.drawText(title, thumbPos, getSize(mTextSize[mTextSize.length - 1]), mTickMarkTitlePaint);

}

}

画好了是不是等不及了来实际应用一下呢？

具体应用示例

布局文件

android:id="@+id/seekBar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@android:color/transparent"

android:progressDrawable="@android:color/transparent"

android:theme="@style/Widget.AppCompat.SeekBar"

android:thumb="@drawable/seekbar_thumb_material_anim_font_setting" />

thumb滑块图片

滑块回调监听

mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekBar seekBar, int value, boolean b) {

// 获取滑块所在位置对应的字体大小

int size = mSeekBar.getRawTextSize(value);

mMessage.setTextSize(size);

}

//... 省略其他方法

});

源码

好啦，本篇文章到这里结束了。忍不住想试试的，可以参考源代码来做，在博客园Android开源客户端项目中，喜欢的给个Star~~

源码主要类：