《Android APP可能有的东西》之UI篇:展开TextView全文

aghg3332 7年前
   <h2><strong>前言</strong></h2>    <p>就像朋友圈里面那样的点击查看全文效果,很有可能是在项目中也会遇到。这里给出不实用自定义控件的方法,原理很简单,代码量也不大,可以直接复制粘贴到自己的项目......</p>    <h2><strong>上效果图</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2df4de22d122aa957f6071de575e25a6.gif"></p>    <p style="text-align:center">我是图</p>    <p>看起来十分美好,但是往下看说明。</p>    <h2><strong>上说明</strong></h2>    <p>布局部分省略,就是一个线性布局里面两个textview,一个显示内容,一个显示那个作文按钮的提示。</p>    <p>思路是这样:提前计算要显示的文字内容,模拟一个相同的textview放到布局中,让它只显示一定的行数,这里为两行,然后计算出这个两行的高度,这就是真正TextView的一开始出现时需要被展开的高度。然后计算出完全显示时需要多少高度,记录这个值,最后展开的时候就能把内容完全展示出来了。</p>    <p>以下为获取 <strong>只显示两行时</strong> 的高度代码:</p>    <pre>  <code class="language-java">private int getShortHeight() {//虚拟一个tv来获得理论高度值,短文高度          int width = mTextView.getMeasuredWidth();//宽度            TextView textView = new TextView(this);          textView.setText(R.string.str);          textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);          textView.setMaxLines(mMaxlines);            int measureSpecWidth = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);//宽度match          int measureSpecHeight = View.MeasureSpec.makeMeasureSpec(1920, View.MeasureSpec.AT_MOST);//高度wrap,1920为最大高度          textView.measure(measureSpecWidth, measureSpecHeight);            return textView.getMeasuredHeight();      }</code></pre>    <p>本来以为可以仿照出获取完整文本的高度,理论上是去掉: textView.setMaxLines(mMaxlines);<br> 就可以,但是,获取到的一直是1920的具体值,这个地方我查了很多地方都说应该是自适应内容的高度,这里我表示需要大神ಥ_ಥ</p>    <p>但是问题还是得解决哇,换思路,能拿到最小的那个高度,自己设置了行数,所以每一行的高度我是知道的,所以我只需要知道文本完全显示时需要占多少行就行了。</p>    <p>兴高采烈的去 getLineCount(); ,表示得到饿结果为0,好吧,异步来一次:</p>    <pre>  <code class="language-java">mTextView.post(new Runnable() {              @Override              public void run() {                  maxLine = mTextView.getLineCount();//获取完全显示饿行数                    mLongHeight = getLongHeight();//获取完全显示需要的高度                    Log.d("MainActivity", "长的" + mLongHeight + ",短的=" + mShortHeight);                  if (mLongHeight <= mShortHeight) {                      mTextViewToggle.setVisibility(View.GONE);//完全显示需要的高度小于低的高度的时候,不需要展开                  }              }          });</code></pre>    <p>完整文本的高度总算是拿到了,其余细节不多说,然后就设置动画了,代码可以直接拷贝了:</p>    <pre>  <code class="language-java">private void toggle() {          ValueAnimator animator;          if (isOpen) {              animator = ValueAnimator.ofInt(mLongHeight, mShortHeight);              isOpen = false;          } else {              animator = ValueAnimator.ofInt(mShortHeight, mLongHeight);              isOpen = true;          }          animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {              @Override              public void onAnimationUpdate(ValueAnimator valueAnimator) {                  Integer value = (Integer) valueAnimator.getAnimatedValue();                  mLayoutParams.height = value;                  mTextView.setLayoutParams(mLayoutParams);              }          });          animator.addListener(new Animator.AnimatorListener() {              @Override              public void onAnimationStart(Animator animator) {                }                @Override              public void onAnimationEnd(Animator animator) {                  if (isOpen) {                      mTextViewToggle.setText("收起全文");                  } else {                      mTextViewToggle.setText("展开全文");                  }              }                @Override              public void onAnimationCancel(Animator animator) {                }                @Override              public void onAnimationRepeat(Animator animator) {                }          });          animator.setDuration(500);          animator.start();      }</code></pre>    <h2><strong>最后</strong></h2>    <p>测量高度的时候直接填充了需要的内容,实际项目中这个内容应该也是能拿到然后替换的吧,这里问题不大。</p>    <p>没有使用自定义控件的原因是觉得好像没必要,所以就直接写了,完整的代码查看Demo,不过github上面还是有几个不错的类似自定义控件的,github关键词 ExpandTextView ,各位小伙伴酌情使用哇~</p>    <h2><strong>对了,效果图里面的后文:</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e76878492f1300957b5bf38cfd72b013.jpg"></p>    <p style="text-align:center">1</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/65325d77568a824ca210cc3edb96dea8.jpg"></p>    <p style="text-align:center">2</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b7af337f31f44f1caeeb23ae03b9da15.jpg"></p>    <p style="text-align:center">3</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2e020aa36d6e1f44654dd483da5d5cac.jpg"></p>    <p style="text-align:center">4</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1f66da6a22d2f3de5ba215578002848a.jpg"></p>    <p style="text-align:center">5</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f1d8e4bf30a8dc8896610a3aece03bcc.jpg"></p>    <p style="text-align:center">6</p>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/7b2d11131f2c</p>    <p> </p>