文艺气质的竖排文本控件来啦
2017-02-22 17:46 381 0
PlumbTextView
PlumbTextView是一个竖排列的文本控件。你可以很容易使用它定义多种竖排文本风格。
Feature
-
将文本竖直排列；
-
可以设置文本的列距和字距；
-
可以添加一个正则表达式去分割文本。PlumbTextView会在正则表达式所包含的字符处换列，并且其中的字符不会显示在PlumbTextView中；
-
可以在每一列文本的坐标添加一跟竖线；
-
可以为文本设置字体风格和第三方字体。
Screenshot
Gradle Dependency
compile 'cc.sayaki.widget:plumb-textview:1.0.1'
Usage
你可以很容易的使用PlumbTextView，就像使用TextView那样。只需要在xml或者Java代码中设置你想要的属性效果就行了。
<cc.sayaki.widget.PlumbTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingTop="30dp"
sayaki:columnSpacing="20dp"
sayaki:leftLine="true"
sayaki:leftLineColor="@color/colorAccent"
sayaki:leftLinePadding="4dp"
sayaki:letterSpacing="6dp"
sayaki:regex="\[，。？！\]"
sayaki:text="@string/text"
sayaki:textColor="@color/colorAccent"
sayaki:textSize="16sp"
sayaki:textStyle="bold|italic" />
Thinking
接下来讲讲PlumbTextView的实现思路。
思路很简单，主要就是在绘制完一个字符之后，将下次绘制的位置垂直向下移动一个字符的高度（包括字符本身的高度和两个字符之间的字距）。只是垂直绘制文字很简单，不过处理换列是一个比较麻烦的地方。
PlumbTextView有两种换列情况：
-
单列文本超过了PlumbTextView可以显示的内容高度；
-
提供了正则表达式，PlumbTextView会在正则表达式中所包含的字符处换列。
首先测量PlumbTextView自身的高度
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
if (!TextUtils.isEmpty(regex)) {
height = 0;
String\[\] texts = text.toString().split(regex);
for (String s : texts) {
height = Math.max(height, getDesiredHeight(s));
}
height += letterSpacing;
} else {
height = getDesiredHeight(text.toString());
}
if (height > heightSize) {
height = heightSize;
}
}
根据换列规则拆分文本
if (!TextUtils.isEmpty(regex)) {
String\[\] texts = text.toString().split(regex);
for (String s : texts) {
getFormatTexts(s);
}
} else {
getFormatTexts(text.toString());
}
// 获取拆分后的文本
private void getFormatTexts(String s) {
int contentHeight = height - getPaddingTop() - getPaddingBottom();
if (getDesiredHeight(s) > contentHeight) {
int count = contentHeight / charHeight;
int i = 0;
// 有的文本拆分过后可能仍然大于控件可显示的高度，需要再拆分
for (; i < getDesiredHeight(s) / contentHeight; i++) {
formatTexts.add(s.substring(i * count, (i + 1) * count));
}
// 最后一列文本不满一列
if (getDesiredHeight(s) % contentHeight != 0) {
formatTexts.add(s.substring(i * count, s.length()));
}
} else {
formatTexts.add(s);
}
}
测量PlumbTextView的宽度
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
if (!TextUtils.isEmpty(regex)) {
width = columnWidth * formatTexts.size();
} else {
width = columnWidth * (getDesiredHeight(text.toString())
/ (height - getPaddingTop() - getPaddingBottom()) + 1);
}
if (width > widthSize) {
width = widthSize;
}
}
上述操作均在onMeasure方法中，因此为了避免多次测量造成拆分后的文本重复，在每次拆分之前先清空formatTexts。
现在已经获得了按列拆分好的文本了，要绘制就变得简单了。
@Override
protected void onDraw(Canvas canvas) {
float x = width - getPaddingLeft() - getPaddingRight();
float y = getPaddingTop();
for (int i = 0; i < formatTexts.size(); i++) {
// 换列
x = i == 0 ? width - columnWidth + columnSpacing : x - columnWidth;
// 绘制每一列文本
for (int j = 0; j < formatTexts.get(i).length(); j++) {
// 向下移动绘制点
y = j == 0 ? charHeight - letterSpacing + getPaddingTop() : y + charHeight;
canvas.drawText(formatTexts.get(i), j, j + 1, x, y, textPaint);
}
if (leftLine) {
// 在每列文本之后绘制竖线
canvas.drawLine(x - leftLinePadding, getPaddingTop(),
x - leftLinePadding, y + letterSpacing, leftLinePaint);
}
}
}
大致的流程就是这样，还是比较清晰的。顺便说一点，绘制的文本要想有个不错的效果，应该去研究一些TextPaint这个类哦，不然可能出现一些文字周围空白过多，或者文字本身绘制的不完整。
好了，文艺气质满满的竖排文本控件的介绍就到这里了吧，大家喜欢的话请去我的GitHub star哦 > <
