有时候我们会遇到这样的情况,为了让布局显得更为精简,会对大段的文本(一般用于人物介绍等地方)进行折叠,用户点击展开。通常都带有一个小图标,随着折叠展开来进行翻转。这种效果是怎么展现的呢,老规矩,先上效果图。用的是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
|
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() > 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进行显示控制。