文艺气质的竖排文本控件来啦

PlumbTextView

PlumbTextView是一个竖排列的文本控件。你可以很容易使用它定义多种竖排文本风格。

Feature

1. 将文本竖直排列；
2. 可以设置文本的列距和字距；
3. 可以添加一个正则表达式去分割文本。PlumbTextView会在正则表达式所包含的字符处换列，并且其中的字符不会显示在PlumbTextView中；
4. 可以在每一列文本的坐标添加一跟竖线；
5. 可以为文本设置字体风格和第三方字体。

Screenshot

plumb_textview.gif

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有两种换列情况：

1. 单列文本超过了PlumbTextView可以显示的内容高度；
2. 提供了正则表达式，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哦 > <