在一些应用中,比如腾讯的应用市场APP应用宝,关于某款应用的介绍文字,如果介绍文字过长,那么不是全部展现出来,而是显示三四行的开始部分(摘要),预知全部的内容,用户点击展开按钮即可查阅全部内容。
这样的设计有一定的优越性,毕竟用户的时间有限,注意力和关注力也有限,在使用APP时候,用户需要在最短时间内尽可能快速浏览和查阅到更主要内容,而不是一大堆泛泛而谈的文字内容。
在Android原生的TextView的基础上,可收缩/扩展的TextView:PhilExpandableTextView。
实现原理:核心是控制TextView的max lines。在TextView的初始化阶段但尚未绘制出View的时候,使用ViewTreeObserver,监听onPreDraw事件,获取TextView正常显示需要显示的总行数,但只给TextView设置最大运行的行数(小于总行数),从而造成TextView的收缩摘要效果,当用户通过按钮或其他方式扩展时候,把TextView的最大行数设置为正常显示完全的行数+1(+1是保持余量,避免不足)。
1 package com.lixu.ExpandableTextView; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.view.View; 6 import android.view.View.OnClickListener; 7 import android.widget.Button; 8 9 public class MainActivity extends Activity { 10 private String str = ""; 11 12 @Override 13 protected void onCreate(Bundle savedInstanceState) { 14 super.onCreate(savedInstanceState); 15 setContentView(R.layout.activity_main); 16 17 for (int i = 0; i < 200; i++) { 18 str = str + i + " "; 19 } 20 final ExpandableTextView etv = (ExpandableTextView) findViewById(R.id.etv); 21 etv.setText(str); 22 23 Button btn = (Button) findViewById(R.id.btn); 24 25 btn.setOnClickListener(new OnClickListener() { 26 27 @Override 28 public void onClick(View v) { 29 boolean b = etv.getExpandablestatus(); 30 31 b = !b; 32 etv.setExpandable(b); 33 34 } 35 }); 36 37 } 38 39 }
PhilExpandableTextView.java:
1 package com.lixu.ExpandableTextView; 2 3 import android.content.Context; 4 import android.util.AttributeSet; 5 import android.view.ViewTreeObserver; 6 import android.view.ViewTreeObserver.OnPreDrawListener; 7 import android.widget.TextView; 8 import android.widget.Toast; 9 10 public class ExpandableTextView extends TextView { 11 12 // 最大行,默认显示3行 13 private final int MAX = 3; 14 // 完全展开需要的行数 15 private int lines; 16 17 private ExpandableTextView mExpandableTextView; 18 19 private boolean expandablestatus = false; 20 21 // 构造方法用两个参数的 22 public ExpandableTextView(Context context, AttributeSet attrs) { 23 super(context, attrs); 24 mExpandableTextView = this; 25 init(); 26 27 } 28 29 private void init() { 30 // 在view绘制之前的时候执行,在onDraw之前 31 ViewTreeObserver mViewTreeObserver = this.getViewTreeObserver(); 32 mViewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() { 33 34 @Override 35 public boolean onPreDraw() { 36 // 避免重复监听 37 mExpandableTextView.getViewTreeObserver().removeOnPreDrawListener(this); 38 // 获得内容行数 39 lines = getLineCount(); 40 41 return true; 42 } 43 }); 44 setExpandable(false); 45 46 } 47 // 是否展开或者收缩, 48 // true,展开; 49 // false,不展开 50 51 public void setExpandable(boolean isExpand) { 52 if (isExpand) { 53 setMaxLines(lines + 1); 54 } else 55 setMaxLines(MAX); 56 57 expandablestatus = isExpand; 58 } 59 60 public boolean getExpandablestatus() { 61 return expandablestatus; 62 } 63 64 }
xml文件:
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 6 <com.lixu.ExpandableTextView.ExpandableTextView 7 android:id="@+id/etv" 8 android:layout_width="match_parent" 9 android:layout_height="wrap_content" 10 android:layout_alignParentTop="true" /> 11 12 <Button 13 android:id="@+id/btn" 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:layout_alignParentBottom="true" 17 android:layout_centerHorizontal="true" 18 android:text="点击" /> 19 20 </RelativeLayout>
运行效果图: