您的位置: 首页  >  文章  >  TextView的折叠展开（动画效果）

TextView的折叠展开（动画效果）

分类: 文章 • 2024-09-07 22:54:10

有时候我们会遇到这样的情况，为了让布局显得更为精简，会对大段的文本（一般用于人物介绍等地方）进行折叠，用户点击展开。通常都带有一个小图标，随着折叠展开来进行翻转。这种效果是怎么展现的呢，老规矩，先上效果图。用的是genymotion模拟器，确实快了很多，只是电脑太渣，占用很多内存。

折叠情况，箭头向下：
TextView的折叠展开（动画效果）

展开情况，箭头向上：
TextView的折叠展开（动画效果）

在这里实现也很简单。直接贴出代码，代码有注释，一看就明白。

activity_main.XML布局文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
 
    <TextView
        android:id="@+id/tv_1"
        android:text="@string/hello_world"
        android:layout_centerHorizontal="true"
        android:textSize="30sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <TextView
        android:id="@+id/adjust_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_1"
        />
 
    <ImageView
        android:id="@+id/turn_over_icon"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/adjust_text"
        android:src="@mipmap/text_ic_expand"
        android:visibility="gone"
        />
 
</RelativeLayout>

主要为了展示功能，布局方面简单为主，用了两个textview（helloword和长文本），imageview（箭头）

MainActivity文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
package com.expandtextview;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
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 AppCompatActivity {
    private TextView mTextView;   //文本域
    private ImageView mImageView;  //翻转icon
    int maxLine=5;  //TextView设置默认最大展示行数为5
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView= (TextView) findViewById(R.id.adjust_text);
        mImageView= (ImageView) findViewById(R.id.turn_over_icon);
        mTextView.setText(getText(R.string.content));//设置文本内容
        mTextView.setHeight(mTextView.getLineHeight() * maxLine);  //设置默认显示高度
        //根据高度来控制是否展示翻转icon
        mTextView.post(new Runnable() {
            @Override
            public void run() {
                mImageView.setVisibility(mTextView.getLineCount() &gt; maxLine ? View.VISIBLE : View.GONE);
            }
        });
 
        mImageView.setOnClickListener(new MyTurnListener());  //翻转监听
 
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
 
    private class MyTurnListener implements View.OnClickListener {
 
        boolean isExpand;  //是否翻转
 
        @Override
        public void onClick(View v) {
            isExpand=!isExpand;
            mTextView.clearAnimation();  //清除动画
            final int tempHight;
            final int startHight=mTextView.getHeight();  //起始高度
            int durationMillis = 200;
 
            if(isExpand){
                /**
                 * 折叠效果，从长文折叠成短文
                 */
 
                tempHight = mTextView.getLineHeight() * mTextView.getLineCount() - startHight;  //为正值，长文减去短文的高度差
                //翻转icon的180度旋转动画
                RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(durationMillis);
                animation.setFillAfter(true);
                mImageView.startAnimation(animation);
            }else {
                /**
                 * 展开效果，从短文展开成长文
                 */
                tempHight = mTextView.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(durationMillis);
                animation.setFillAfter(true);
                mImageView.startAnimation(animation);
            }
 
            Animation animation = new Animation() {
                //interpolatedTime 为当前动画帧对应的相对时间，值总在0-1之间
                protected void applyTransformation(float interpolatedTime, Transformation t) { //根据ImageView旋转动画的百分比来显示textview高度，达到动画效果
                    mTextView.setHeight((int) (startHight + tempHight * interpolatedTime));//原始长度+高度差*（从0到1的渐变）即表现为动画效果
 
                }
            };
            animation.setDuration(durationMillis);
            mTextView.startAnimation(animation);
 
        }
    }
}

这里在重要地方都做了注释讲解，非常直观。

其中mTextView的post方法这么做的原因在于，在OnCreate方法中定义设置的textView不会马上渲染并显示，所以textview的getLineCount()获取到的值一般都为零，因此使用post会在其绘制完成后来对mImageView进行显示控制。

相关推荐