TextView的折叠动画效果

来源：互联网发布：diy在线定制系统源码编辑：程序博客网时间：2024/05/19 05:05

有时候业务需要 , 文本内容没有超出一定行数时全部展示出来 , 当超出一定行数时 , 展示固定行数的内容 , 同时展示折叠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);        }    }}

代码中注释比较详细 , 这里就不赘述了. 有问题请评论 , 大家一起交流学习.

1 0