Android可收缩/扩展的TextView【1】

港控/mmm° 2024-02-17 16:33 9阅读 0赞

**Android可收缩/扩展的TextView【1】**

在一些应用中，比如腾讯的应用市场APP应用宝，关于某款应用的介绍文字，如果介绍文字过长，那么不是全部展现出来，而是显示三四行的开始部分（摘要），预知全部的内容，用户点击展开按钮即可查阅全部内容。  
这样的设计有一定的优越性，毕竟用户的时间有限，注意力和关注力也有限，在使用APP时候，用户需要在最短时间内尽可能快速浏览和查阅到更主要内容，而不是一大堆泛泛而谈的文字内容。  
在Android原生的TextView的基础上，我自己写了一个可收缩/扩展的TextView：PhilExpandableTextView。  
实现原理：核心是控制TextView的max lines。在TextView的初始化阶段但尚未绘制出View的时候，使用ViewTreeObserver，监听onPreDraw事件，获取TextView正常显示需要显示的总行数，但只给TextView设置最大运行的行数（小于总行数），从而造成TextView的收缩摘要效果，当用户通过按钮或其他方式扩展时候，把TextView的最大行数设置为正常显示完全的行数+1（+1是保持余量，避免不足）。  
最终，如图，图1是收缩状态：

![Center][]

图2是当用户点击了Button按钮后展开后的状态：

![Center 1][]

给出测试及全部源代码。

测试的主Activity MainActivity.java：

package zhangphil.textview;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    
    public class MainActivity extends Activity {
    
    	private String test_str = "";
    	
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		// 测试的字符串
    		for (int i = 0; i < 100; i++)
    				test_str = test_str + " " + i;
    
    		final PhilExpandableTextView text = (PhilExpandableTextView) findViewById(R.id.text);
    		text.setText(test_str);
    		
    		Button button = (Button) findViewById(R.id.button);
    		button.setOnClickListener(new View.OnClickListener() {
    			
    			@Override
    			public void onClick(View v) {
    				boolean b=text.getExpandableStatus();
    				b=!b;
    				text.setExpandable(b);
    			}
    		});
    	}
    }

MainActivity.java需要的布局文件：

核心的PhilExpandableTextView.java：

package zhangphil.textview;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.ViewTreeObserver;
    import android.widget.TextView;
    
    public class PhilExpandableTextView extends TextView {
    
    	// 最大的行，默认只显示3行
    	private final int MAX = 3;
    
    	// 如果完全伸展需要多少行？
    	private int lines;
    
    	private PhilExpandableTextView mPhilTextView;
    
    	// 标记当前TextView的展开/收缩状态
    	// true，已经展开
    	// false，以及收缩
    	private boolean expandableStatus = false;
    
    	public PhilExpandableTextView(Context context, AttributeSet attrs) {
    		super(context, attrs);
    
    		mPhilTextView = this;
    
    		init();
    	}
    
    	private void init() {
    
    		// ViewTreeObserver View观察者，在View即将绘制但还未绘制的时候执行的，在onDraw之前
    		final ViewTreeObserver mViewTreeObserver = this.getViewTreeObserver();
    
    		mViewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    
    			@Override
    			public boolean onPreDraw() {
    				// 避免重复监听
    				mPhilTextView.getViewTreeObserver().removeOnPreDrawListener(this);
    
    				lines = getLineCount();
    				// Log.d(this.getClass().getName(), lines+"");
    
    				return true;
    			}
    		});
    
    		setMaxLines(MAX);
    		
    		//setEllipsize(TextUtils.TruncateAt.END);
    	}
    
    	// 是否展开或者收缩，
    	// true，展开；
    	// false，不展开
    	public void setExpandable(boolean isExpand) {
    		if (isExpand) {
    			setMaxLines(lines + 1);
    		} else
    			setMaxLines(MAX);
    
    		expandableStatus = isExpand;
    	}
    
    	public boolean getExpandableStatus() {
    		return expandableStatus;
    	}
    }

代码运行结果如图文中图示。

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f0186a4943a641f18600f30873dcce5d.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/ef7bdc8f75664ab6990ee1ab47d4ef54.png