有时候业务需要 , 文本内容没有超出一定行数时全部展示出来 , 当超出一定行数时 , 展示固定行数的内容 , 同时展示折叠Icon图标 , 通过点击Icon图标来达到文本折叠展开的效果 . 先上效果图 , 图一是当文本内容较少时 , 图二是文本内容较多时 , 实现TextView的折叠效果:
图一▽▽▽▽▽▽▽▽
图二▽▽▽▽▽▽▽▽
开始写代码 , 先把布局写出来:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="@+id/turn_icon" android:layout_width="25dp" android:layout_height="25dp" android:layout_below="@id/content" android:layout_centerInParent="true" android:src="@drawable/arrow_bottom_black" android:visibility="gone"/> </RelativeLayout>实现动画的代码:
package com.lyx.folddemo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.RotateAnimation; import android.view.animation.Transformation; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends Activity { private TextView mTv; private ImageView mIV; int maxLine = 4; //你要设置的TextView正常情况下要显示的行数(超出行数就会显示折叠Icon) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); mTv.setText("\t\t\t\t" + getText(R.string.content)); mTv.setHeight(mTv.getLineHeight() * maxLine); //设置默认显示行数 //根据是否超出默认行数来控制是否展示折叠Icon mTv.post(new Runnable() { @Override public void run() { int lineCount = mTv.getLineCount(); mIV.setVisibility(lineCount > maxLine ? View.VISIBLE : View.GONE); } }); //对进行监听 mIV.setOnClickListener(new MyTextViewListener()); } private void initView() { mTv = (TextView) findViewById(R.id.content); mIV = (ImageView) findViewById(R.id.turn_icon); } private class MyTextViewListener implements View.OnClickListener { //标记是否为展开状态 , 最初是折叠状态 , 所以为false boolean isExpand = false; //动画执行时间 int durationTime = 200; @Override public void onClick(View v) { isExpand = !isExpand; //制反 mTv.clearAnimation(); //清除动画 final int expandHight; //需要拉长的的高度 final int startHight = mTv.getHeight(); //最初的的高度 if (isExpand) { /** * 实现折叠效果，从长文折叠成短文 */ expandHight = mTv.getLineHeight() * mTv.getLineCount() - startHight; //为正值，长文减去短文的高度差 //翻转icon的180度旋转动画 RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setDuration(durationTime); animation.setFillAfter(true); mIV.startAnimation(animation); } else { /** * 实现展开效果，从短文展开成长文 */ expandHight = mTv.getLineHeight() * maxLine - startHight;//为负值，即短文减去长文的高度差 //翻转icon的180度旋转动画 RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setDuration(durationTime); //动画结束后保存状态 animation.setFillAfter(true); mIV.startAnimation(animation); } //使用差值器 Animation animation = new Animation() { //interpolatedTime 为当前动画帧对应的相对时间，值总在0-1之间 protected void applyTransformation(float interpolatedTime, Transformation t) { //根据ImageView旋转动画的百分比来显示textview高度，达到动画效果 mTv.setHeight((int) (startHight + expandHight * interpolatedTime));//原始长度+高度差*（从0到1的渐变）即表现为动画效果 } }; animation.setDuration(durationTime); mTv.startAnimation(animation); } } }代码中注释比较详细 , 这里就不赘述了. 有问题请评论 , 大家一起交流学习.
