TextView只提供設(shè)置行距的方法踢步,沒有提供段落間距的方法癣亚,但是提供了一個 SpannableString 類來給TextView設(shè)置各種效果,
如圖:
其中一個給文字替換為圖片的效果給我?guī)砹遂`感获印,
我可以用一個圖片(最后換成一個寬1px述雾,指定高度的透明長方形,xml中畫出來的)來模擬段落間距。
注意畫出來的高度兼丰,不能使用 用尺子直接量的值玻孟,而要比這個高度要小。
為什么呢鳍征,我也不清楚黍翎,不過我還是要上個圖,我估計應(yīng)該是兩行文字之間的line gap的原因蟆技。
后臺給我們返回的json中段落區(qū)分符是“\n”玩敏,我們先把"\n"替換為"\n\r"
“\n”用來換行,“\r”就是那個將要被替換的字符了(為什么要用\r呢质礼,陰差陽錯啦旺聚,后來發(fā)現(xiàn)\r挺合適的,也不會重復(fù))眶蕉;最后就是用SpannableString來處理文字了砰粹。
/**
* 設(shè)置TextView段落間距
*
* @param context 上下文
* @param tv 給誰設(shè)置段距,就傳誰
* @param content 文字內(nèi)容
* @param paragraphSpacing 請輸入段落間距(單位dp)
* @param lineSpacingExtra xml中設(shè)置的的行距(單位dp)
*/
public static void setParagraphSpacing(Context context, TextView tv, String content, int paragraphSpacing, int lineSpacingExtra) {
if (!content.contains("\n")) {
tv.setText(content);
return;
}
content = content.replace("\n", "\n\r");
int previousIndex = content.indexOf("\n\r");
//記錄每個段落開始的index,第一段沒有碱璃,從第二段開始
List<Integer> nextParagraphBeginIndexes = new ArrayList<>();
nextParagraphBeginIndexes.add(previousIndex);
while (previousIndex != -1) {
int nextIndex = content.indexOf("\n\r", previousIndex + 2);
previousIndex = nextIndex;
if (previousIndex != -1) {
nextParagraphBeginIndexes.add(previousIndex);
}
}
//獲取行高(包含文字高度和行距)
float lineHeight = tv.getLineHeight();
//把\r替換成透明長方形(寬:1px弄痹,高:字高+段距)
SpannableString spanString = new SpannableString(content);
Drawable d = ContextCompat.getDrawable(context, R.drawable.paragraph_space);
float density = context.getResources().getDisplayMetrics().density;
//int強轉(zhuǎn)部分為:行高 - 行距 + 段距
d.setBounds(0, 0, 1, (int) ((lineHeight - lineSpacingExtra * density) / 1.2 + (paragraphSpacing - lineSpacingExtra) * density));
for (int index : nextParagraphBeginIndexes) {
// \r在String中占一個index
spanString.setSpan(new ImageSpan(d), index + 1, index + 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
tv.setText(spanString);
}
那個透明的長方形很簡單,隨手一畫就有了嵌器。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/transparent"/>
</shape>
下邊這個就是替換后的效果肛真,只不過這時候為了展示替換效果,那個長方形還是用了個orange色爽航。