PlumbTextView
PlumbTextView是一個(gè)豎排列的文本控件。你可以很容易使用它定義多種豎排文本風(fēng)格萍肆。
Feature
- 將文本豎直排列切省；
- 可以設(shè)置文本的列距和字距您旁；
- 可以添加一個(gè)正則表達(dá)式去分割文本靴寂。PlumbTextView會(huì)在正則表達(dá)式所包含的字符處換列磷蜀，并且其中的字符不會(huì)顯示在PlumbTextView中；
- 可以在每一列文本的坐標(biāo)添加一跟豎線(xiàn)榨汤；
- 可以為文本設(shè)置字體風(fēng)格和第三方字體。
Screenshot
Gradle Dependency
compile 'cc.sayaki.widget:plumb-textview:1.0.1'
Usage
你可以很容易的使用PlumbTextView怎茫，就像使用TextView那樣收壕。只需要在xml或者Java代碼中設(shè)置你想要的屬性效果就行了妓灌。
<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
接下來(lái)講講PlumbTextView的實(shí)現(xiàn)思路圃验。
思路很簡(jiǎn)單掉伏，主要就是在繪制完一個(gè)字符之后，將下次繪制的位置垂直向下移動(dòng)一個(gè)字符的高度（包括字符本身的高度和兩個(gè)字符之間的字距）澳窑。只是垂直繪制文字很簡(jiǎn)單斧散，不過(guò)處理?yè)Q列是一個(gè)比較麻煩的地方。
PlumbTextView有兩種換列情況：
- 單列文本超過(guò)了PlumbTextView可以顯示的內(nèi)容高度摊聋；
- 提供了正則表達(dá)式鸡捐，PlumbTextView會(huì)在正則表達(dá)式中所包含的字符處換列。
首先測(cè)量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;
}
}
根據(jù)換列規(guī)則拆分文本
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;
// 有的文本拆分過(guò)后可能仍然大于控件可顯示的高度麻裁，需要再拆分
for (; i < getDesiredHeight(s) / contentHeight; i++) {
formatTexts.add(s.substring(i * count, (i + 1) * count));
}
// 最后一列文本不滿(mǎn)一列
if (getDesiredHeight(s) % contentHeight != 0) {
formatTexts.add(s.substring(i * count, s.length()));
}
} else {
formatTexts.add(s);
}
}
測(cè)量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方法中箍镜，因此為了避免多次測(cè)量造成拆分后的文本重復(fù)，在每次拆分之前先清空f(shuō)ormatTexts煎源。
現(xiàn)在已經(jīng)獲得了按列拆分好的文本了色迂，要繪制就變得簡(jiǎn)單了。
@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++) {
// 向下移動(dòng)繪制點(diǎn)
y = j == 0 ? charHeight - letterSpacing + getPaddingTop() : y + charHeight;
canvas.drawText(formatTexts.get(i), j, j + 1, x, y, textPaint);
}
if (leftLine) {
// 在每列文本之后繪制豎線(xiàn)
canvas.drawLine(x - leftLinePadding, getPaddingTop(),
x - leftLinePadding, y + letterSpacing, leftLinePaint);
}
}
}
大致的流程就是這樣手销，還是比較清晰的歇僧。順便說(shuō)一點(diǎn)，繪制的文本要想有個(gè)不錯(cuò)的效果原献，應(yīng)該去研究一些TextPaint這個(gè)類(lèi)哦馏慨，不然可能出現(xiàn)一些文字周?chē)瞻走^(guò)多，或者文字本身繪制的不完整姑隅。
好了写隶，文藝氣質(zhì)滿(mǎn)滿(mǎn)的豎排文本控件的介紹就到這里了吧，大家喜歡的話(huà)請(qǐng)去我的GitHub star哦 > <
