《Android APP可能有的东西》之UI篇:展开TextView全文
aghg3332
8年前
<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>