TextView的摺疊展開（動畫效果）

時間  2021-01-13

有時候我們會遇到這樣的情況，爲了讓佈局顯得更爲精簡，會對大段的文本（一般用於人物介紹等地方）進行摺疊，用戶點擊展開。通常都帶有一個小圖標，隨着摺疊展開來進行翻轉。這種效果是怎麼展現的呢，老規矩，先上效果圖。用的是genymotion模擬器，確實快了很多，只是電腦太渣，佔用很多內存。

摺疊情況，箭頭向下：
這裏寫圖片描述

展開情況，箭頭向上：
這裏寫圖片描述

在這裏實現也很簡單。直接貼出代碼，代碼有註釋，一看就明白。

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進行顯示控制。

联系我们 沪ICP备2021010478号-7