最近產(chǎn)品汪和運(yùn)營商討下來決定要做商品促銷活動(dòng)脆荷，然后設(shè)計(jì)妹子給到最終的效果圖张肾。
第一感覺就是 so so easy 嘛，加個(gè)標(biāo)簽晌砾，費(fèi)不了什么事兒。第一印象記得 Spanable 可以更改對(duì)應(yīng)文字的顏色和背景养匈，設(shè)置設(shè)置點(diǎn)擊事件哼勇。
接著，發(fā)現(xiàn)了一個(gè)問題呕乎，上面說到的 Spanable 只能實(shí)現(xiàn)全色的背景积担，不能實(shí)現(xiàn)這種邊框的背景♀剩看來這種方案是行不通的帝璧。
第一感覺不奏效，那么就要分析下這種效果湿刽，我想到以下兩種方案聋溜。
第一種方案就是是否可以直接給 TextView 設(shè)置指定的留白呢？就是前面的標(biāo)簽是一個(gè)控件叭爱，TextView 留白便簽控件寬度+margin值撮躁。這個(gè)方案需要解決的問題是，這里是否有相關(guān)的 Api 可以直接設(shè)置每行留白的距離买雾，另外首行標(biāo)簽和文字居中對(duì)齊問題把曼，畢竟設(shè)計(jì)師都是像素眼，沒有按要求對(duì)齊漓穿，行距不對(duì)都可能無法驗(yàn)收签赃。
第二種方案就是取巧，將 title 的 TextView 拆分為兩個(gè) TextView条舔，第一行直接就是線性水平布局梨水，第二行再是一個(gè)獨(dú)立的TextView。這里需要解決的問題是僚饭，我怎么獲取 TextView 第一行顯示的文字震叮，然后截取剩余的文字單獨(dú)顯示在第二行。這種方法實(shí)現(xiàn)似乎沒有第一種優(yōu)雅鳍鸵，但是可以輕松避開第一行標(biāo)簽和 title 文字居中對(duì)齊的問題苇瓣。
在否定一種方案和提出新的兩種方案后，可以看看后兩種方案到底可以怎么實(shí)現(xiàn)偿乖。
第一種方案：
這里需要使用到 SpannableString 這個(gè)類击罪，接著就是主角 LeadingMarginSpan 這個(gè)類。
A paragraph style affecting the leading margin. There can be multiple leading
margin spans on a single paragraph; they will be rendered in order, each
adding its margin to the ones before it. The leading margin is on the right
for lines in a right-to-left paragraph.
LeadingMarginSpans should be attached from the first character to the last
character of a single paragraph.
一句話贪薪，它可以給 TextView 每行設(shè)置指定的頭間距媳禁，找到相關(guān) API 之后，接著計(jì)算出標(biāo)簽的整體寬度画切。
LeadingMarginSpan.Standard what = new LeadingMarginSpan.Standard(width, 0);
spannableString.setSpan(what, 0, spannableString.length(), SpannableString.SPAN_INCLUSIVE_INCLUSIVE);
LeadingMarginSpan 是接口竣稽，內(nèi)部的 Standard 看名字就知道是它的標(biāo)準(zhǔn)實(shí)現(xiàn)，它有兩個(gè)構(gòu)造方法，Standard(int every) 和 Standard(int first, int rest) 丧枪，這個(gè)就是指定 TextView 每行的縮進(jìn)值的光涂，一個(gè)參數(shù)的就是給每一行都設(shè)置同樣的值，最后當(dāng)然就是調(diào)用兩個(gè)參數(shù)的方法拧烦，兩個(gè)參數(shù)的就是指定第一行和其他行的縮進(jìn)值忘闻。
接著看下 SpannableString 的 setSpan() 的方法，這里需要設(shè)置四個(gè)參數(shù)恋博，第一個(gè)就是我們創(chuàng)建出來的 LeadingMarginSpan 齐佳，第二個(gè)和第三個(gè)其實(shí)就是第一個(gè)對(duì)象的作用范圍，第四個(gè)參數(shù)控制范圍的邊界包含情況债沮。我們這里不是給具體第幾個(gè)到第幾個(gè)的字設(shè)置屬性炼吴，所以后面的 start、end 以及邊界限制隨便寫都會(huì)生效的疫衩。
對(duì)于第四個(gè)參數(shù)硅蹦，就是對(duì)上下邊界是否包含自己的限定，這里你只需要認(rèn)識(shí)這兩個(gè)單詞就好闷煤，「EXCLUSIVE」 就是不包含童芹，「INCLUSIVE 」就是包含。所以這里就有四種情況鲤拿，當(dāng)然這個(gè)不是這次的重點(diǎn)假褪。
第二種方案：
這里需要使用到 Layout 個(gè)類， TextView 使用它管理文字顯示近顷。
A base class that manages text layout in visual elements on
the screen.
For text that will be edited, use a {@link DynamicLayout},
which will be updated as the text changes.
For text that will not change, use a {@link StaticLayout}.
通過這個(gè) Layout生音，我們就可以獲取到 TextView 每行的內(nèi)容，然后就可以決定第二行是否顯示及其內(nèi)容窒升。
Layout layout = first.getLayout();
int lineEnd = layout.getLineEnd(0);
上面的 lineEnd 就是第一行文字顯示的數(shù)量缀遍，拿到之后，就可以判斷下异剥，如果和總長度相等瑟由，那就說明第一行就可以顯示完全絮重，第二行根據(jù)具體情況冤寿，控制顯示與否。如果小于總長度青伤，那么久截取出剩余文字督怜，用于第二行 TextView 顯示。
到這里狠角，兩種方案實(shí)現(xiàn)完畢号杠，接著再聊一個(gè)問題，那就是測量時(shí)機(jī)，這里的需求總是出現(xiàn)在列表頁面姨蟋，這就涉及到一個(gè)計(jì)算時(shí)機(jī)問題屉凯，這里我的解決方案是添加一個(gè) addOnPreDrawListener 的方式，這個(gè)方法是每次繪制之前都會(huì)調(diào)用眼溶，比較符合列表的刷新悠砚。
最終效果：
貼下詳細(xì)的代碼：
//方案一：將文字查分為兩個(gè)兩個(gè)TextView 顯示
public static void calculateTag1(TextView first, TextView second, final String text) {
ViewTreeObserver observer = first.getViewTreeObserver();
observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
Layout layout = first.getLayout();
int lineEnd = layout.getLineEnd(0);
String substring = text.substring(0, lineEnd);
String substring1 = text.substring(lineEnd, text.length());
Log.i("TAG", "onGlobalLayout:"+ "+end:" + lineEnd);
Log.i("TAG", "onGlobalLayout: 第一行的內(nèi)容：：" + substring);
Log.i("TAG", "onGlobalLayout: 第二行的內(nèi)容：：" + substring1);
if (TextUtils.isEmpty(substring1)) {
second.setVisibility(View.GONE);
second.setText(null);
} else {
second.setVisibility(View.VISIBLE);
second.setText(substring1);
}
first.getViewTreeObserver().removeOnPreDrawListener(
this);
return false;
}
});
}
//方案二：動(dòng)態(tài)設(shè)置縮進(jìn)距離的方式
public static void calculateTag2(TextView tag, TextView title, final String text) {
ViewTreeObserver observer = tag.getViewTreeObserver();
observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
SpannableString spannableString = new SpannableString(text);
//這里沒有獲取margin的值，而是直接寫死的
LeadingMarginSpan.Standard what = new LeadingMarginSpan.Standard(tag.getWidth() + dip2px(tag.getContext(), 10), 0);
spannableString.setSpan(what, 0, spannableString.length(), SpannableString.SPAN_INCLUSIVE_INCLUSIVE);
title.setText(spannableString);
tag.getViewTreeObserver().removeOnPreDrawListener(
this);
return false;
}
});
}
public static int dip2px(Context context, double dpValue) {
float density = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * density + 0.5);
}
PS：SpannableStringBuilder 闊以用于快速給 TextView 設(shè)置Span堂飞，最后看了下某東的效果灌旧，它的標(biāo)簽不是一個(gè)獨(dú)立的控件，看樣子或許是使用的 ImageSpan 來實(shí)現(xiàn)绰筛。但是 ImageSpan 默認(rèn)不是居中對(duì)齊枢泰，解決方案可以看看。
