一个 TextView 完成显示全文与隐藏功能

   <p>经常遇到大段文本需要部分展示的场景，通常的做法是在隐藏的状态下文本末尾加上「显示全文」，在展开的状态下文本末尾加上「隐藏」来控制文本的展示状态。这个交互可能有很多种实现方法，本文则以一个简单的 TextView 来实现这些交互，封装后的 CollapsiableTextView 仅增加了不到 70 个额外的方法数。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fbc886e6be7afd7368c70db47d13a035.gif"></p>    <h2>参数定义</h2>    <p>如上图效果，我们需要使用到几个可配置的参数：</p>    <pre>  <code class="language-java"><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>  </code></pre>    <p>这几个参数分别表示</p>    <ul>     <li>后缀颜色，也就是「显示全文」，「隐藏」这几个字的颜色</li>     <li>折叠后显示几行文字</li>     <li>折叠后的后缀文字，也就是「显示全文」</li>     <li>展开后的后缀文字，也就是「隐藏」</li>     <li>隐藏与展示的触发事件是点击后缀还是整个 TextView</li>    </ul>    <p>主要的构造函数如：</p>    <pre>  <code class="language-java">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);  }  </code></pre>    <h2>代理 onClick 事件</h2>    <p>为了配置是否由后缀触发显示与隐藏操作，我们要在 CollapsibleTextView 中处理点击事件。所以在构造函数中设置 clickListener 为 mClickListener。同时在 mClickListener 中处理点击事件：</p>    <pre>  <code class="language-java">private OnClickListener mClickListener = new OnClickListener() {    @Override    publicvoidonClick(View v){      if (!mSuffixTrigger) {        mExpanded = !mExpanded;        applyState(mExpanded);      }        if (mCustomClickListener != null) {        mCustomClickListener.onClick(v);      }    }  };  </code></pre>    <p>为了用户仍可以设置 clickListener 我们重写 setOnClickListener 方法，并保留 clickListener 为 mCustomClickListener:</p>    <pre>  <code class="language-java">@Override  publicvoidsetOnClickListener(OnClickListener l){    mCustomClickListener = l;  }  </code></pre>    <p>这样就将 click 事件代理到了 CollapsibleTextView 内部。</p>    <h2>ClickableSpan 处理部分文本点击</h2>    <p>为了能够监听后缀的点击事件，需要使用 ClickableSpan</p>    <pre>  <code class="language-java">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);    }  };  </code></pre>    <h2>根据状态计算出 SpannableString</h2>    <pre>  <code class="language-java">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);      }    });  }  </code></pre>    <p>其中 paint.measureText 可以测量出文本布局的宽度从而得只文本行数并与 mCollapsedLines 比较裁剪出合适的字符长度并添加上后缀与 span 赋予 TextView 即可</p>    <p>由于 getLineEnd 等函数只有在 layout 过程之后值才有意义，所以要合理的选择 applyState 的时机：</p>    <pre>  <code class="language-java">@Override  protectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){    super.onLayout(changed, left, top, right, bottom);    if (mShouldInitLayout && getLineCount() > mCollapsedLines) {      mShouldInitLayout = false;      applyState(mExpanded);    }  }  </code></pre>    <p>至此 CollapsibleTextView 的要点已经完成，添加上 getter，setter 函数与一些逻辑组织即可</p>    <p> </p>    <p> </p>    <p> </p>