Android TextView實(shí)現(xiàn)點(diǎn)擊顯示全文與隱藏功能（附源碼）

更新時(shí)間：2017年03月04日 09:50:44 作者：Tim Qi

TextView用法很多，用到的地方更是普遍，所以學(xué)好TextView的使用很重要很重要很重要。下面這篇文章主要介紹了Android中TextView實(shí)現(xiàn)顯示全文與隱藏功能的相關(guān)資料，文中給出了詳細(xì)的示例代碼和源碼下載，需要的朋友可以參考下。

前言

相信大家在日常開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)遇到大段文本需要部分展示的場(chǎng)景，通常的做法是在隱藏的狀態(tài)下文本末尾加上「顯示全文」，在展開(kāi)的狀態(tài)下文本末尾加上「隱藏」來(lái)控制文本的展示狀態(tài)。這個(gè)交互可能有很多種實(shí)現(xiàn)方法，本文則以一個(gè)簡(jiǎn)單的 TextView 來(lái)實(shí)現(xiàn)這些交互，封裝后的 CollapsiableTextView 僅增加了不到 70 個(gè)額外的方法數(shù)。

參數(shù)定義

如上圖效果，我們需要使用到幾個(gè)可配置的參數(shù)：

<declare-styleablename="CollapsibleTextView">
 <attrname="suffixColor"format="color"/>
 <attrname="collapsedLines"format="integer"/>
 <attrname="collapsedText"format="string"/>
 <attrname="expandedText"format="string"/>
 <attrname="suffixTrigger"format="boolean"/>
</declare-styleable>

這幾個(gè)參數(shù)分別表示

后綴顏色，也就是「顯示全文」，「隱藏」這幾個(gè)字的顏色
折疊后顯示幾行文字
折疊后的后綴文字，也就是「顯示全文」
展開(kāi)后的后綴文字，也就是「隱藏」
隱藏與展示的觸發(fā)事件是點(diǎn)擊后綴還是整個(gè) TextView

主要的構(gòu)造函數(shù)如：

publicCollapsibleTextView(Context context, AttributeSet attrs,intdefStyleAttr){
 super(context, attrs, defStyleAttr);
 TypedArray attributes = context.getTheme()
 .obtainStyledAttributes(attrs, R.styleable.CollapsibleTextView, defStyleAttr, 0);

 mSuffixColor = attributes.getColor(R.styleable.CollapsibleTextView_suffixColor, 0xff0000ff);
 mCollapsedLines = attributes.getInt(R.styleable.CollapsibleTextView_collapsedLines, 1);
 mCollapsedText = attributes.getString(R.styleable.CollapsibleTextView_collapsedText);
 if (TextUtils.isEmpty(mCollapsedText)) mCollapsedText = " Show All";
 mExpandedText = attributes.getString(R.styleable.CollapsibleTextView_expandedText);
 if (TextUtils.isEmpty(mExpandedText)) mExpandedText = " Hide";
 mSuffixTrigger = attributes.getBoolean(R.styleable.CollapsibleTextView_suffixTrigger, false);

 this.mText = getText() == null ? null : getText().toString();
 setMovementMethod(LinkMovementMethod.getInstance());
 super.setOnClickListener(mClickListener);
}

代理 onClick 事件

為了配置是否由后綴觸發(fā)顯示與隱藏操作，我們要在 CollapsibleTextView 中處理點(diǎn)擊事件。所以在構(gòu)造函數(shù)中設(shè)置 clickListener 為 mClickListener。同時(shí)在 mClickListener 中處理點(diǎn)擊事件：

private OnClickListener mClickListener = new OnClickListener() {
 @Override
 publicvoidonClick(View v){
 if (!mSuffixTrigger) {
 mExpanded = !mExpanded;
 applyState(mExpanded);
 }

 if (mCustomClickListener != null) {
 mCustomClickListener.onClick(v);
 }
 }
};

為了用戶仍可以設(shè)置 clickListener 我們重寫(xiě) setOnClickListener 方法，并保留 clickListener 為 mCustomClickListener:

@Override
publicvoidsetOnClickListener(OnClickListener l){
 mCustomClickListener = l;
}

這樣就將 click 事件代理到了 CollapsibleTextView 內(nèi)部。

ClickableSpan 處理部分文本點(diǎn)擊

為了能夠監(jiān)聽(tīng)后綴的點(diǎn)擊事件，需要使用 ClickableSpan

str.setSpan(mClickSpanListener,
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);

// ClickableSpan
private ClickableSpan mClickSpanListener
 = new ClickableSpan() {
 @Override
 publicvoidonClick(View widget){
 if (mSuffixTrigger) {
 mExpanded = !mExpanded;
 applyState(mExpanded);
 }
 }

 @Override
 publicvoidupdateDrawState(TextPaint ds){
 super.updateDrawState(ds);
 ds.setUnderlineText(false);
 }
};

根據(jù)狀態(tài)計(jì)算出 SpannableString

privatevoidapplyState(booleanexpanded){
 if (TextUtils.isEmpty(mText)) return;

 String note = mText, suffix;
 if (expanded) {
 suffix = mExpandedText;
 } else {
 if (mCollapsedLines - 1 < 0) {
 throw new RuntimeException("CollapsedLines must equal or greater than 1");
 }
 int lineEnd = getLayout().getLineEnd(mCollapsedLines - 1);
 suffix = mCollapsedText;
 int newEnd = lineEnd - suffix.length() - 1;
 int end = newEnd > 0 ? newEnd : lineEnd;

 TextPaint paint = getPaint();
 int maxWidth = mCollapsedLines * (getMeasuredWidth() - getPaddingLeft() - getPaddingRight());
 while (paint.measureText(note.substring(0, end) + suffix) > maxWidth)
 end--;
 note = note.substring(0, end);
 }

 final SpannableString str = new SpannableString(note + suffix);
 if (mSuffixTrigger) {
 str.setSpan(mClickSpanListener,
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
 }
 str.setSpan(new ForegroundColorSpan(mSuffixColor),
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
 post(new Runnable() {
 @Override
 publicvoidrun(){
 setText(str);
 }
 });
}

其中 paint.measureText 可以測(cè)量出文本布局的寬度從而得只文本行數(shù)并與 mCollapsedLines 比較裁剪出合適的字符長(zhǎng)度并添加上后綴與 span 賦予 TextView 即可

由于 getLineEnd 等函數(shù)只有在 layout 過(guò)程之后值才有意義，所以要合理的選擇 applyState 的時(shí)機(jī)：

@Override
protectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){
 super.onLayout(changed, left, top, right, bottom);
 if (mShouldInitLayout && getLineCount() > mCollapsedLines) {
 mShouldInitLayout = false;
 applyState(mExpanded);
 }
}

至此 CollapsibleTextView 的要點(diǎn)已經(jīng)完成，添加上 getter，setter 函數(shù)與一些邏輯組織即可

源碼下載：點(diǎn)擊這里

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)給我Android開(kāi)發(fā)者們能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: