Android自定义控件之全文收起TextView（控件嵌套法）

最新推荐文章于 2023-06-29 23:45:20 发布

fygwfygyiq

最新推荐文章于 2023-06-29 23:45:20 发布

阅读量585

点赞数

分类专栏： android_控件特效

android_控件特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://www.tuicool.com/articles/NNVZzuU

Android自定义控件之全文收起TextView（控件嵌套法）

时间 2016-06-29 23:04:20 Raye Blog

原文

http://www.raye.wang/2016/06/29/androidzi-ding-yi-kong-jian-zhi-quan-wen-shou-qi-textview-kong-jian-qian-tao-fa/

主题 TextView

前言

因为公司项目需要全文收起的功能，一共有2种UI，所以需要写2个全文收起的控件，之前也是用过一个全文收起的TextView控件，但是因为设计原因，在ListView刷新的时候会闪烁，我估计原因是因为控件本身的设计是需要先让TextView绘制完成，然后获取TextView一共有多少行，再判断是否需要全文收起按钮，如果需要，则吧TextView压缩回最大行数，添加全文按钮，这样就会造成ListView的Item先高后低，所以会发生闪烁，后面我也在网上找了几个，发现和之前的设计都差不多，虽然肯定是有解决了这个问题的控件，但是还是决定自己写了，毕竟找到控件后还需要测试，而现在的项目时间不充分啊（另外欢迎指教如何快速的找到自己需要的控件，有时候在Github上面搜索，都不知道具体该用什么关键字），而且自己写，也是一种锻炼。这里讲述的是布局式的实现，还有一个就直接继承TextView来实现那个会在下一篇文章讲述。

效果图

实现原理

其实很多全文收起的实现原理应该都差不多，首先外部是一个布局，里面放一个显示正文的TextView控件，设置文本后，判断正文TextView的控件到底有多少行，如果达到了全文收起的行数，则将TextView的高度修改为指定的行数高度，把状态设置为收起状态，并在布局中添加全文收起按钮，点击全文时，则把高度还原为控件本身的高度，把状态位置为全文状态，点击收起时，则把控件高度设置为指定行数的高度，状态设置为收起状态。

代码

package wang.raye.library.widge;

import android.annotation.TargetApi;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Color;

import android.os.Build;

import android.text.TextPaint;

import android.text.TextUtils;

import android.util.AttributeSet;

import android.view.Gravity;

import android.view.View;

import android.view.ViewTreeObserver;

import android.view.animation.Animation;

import android.view.animation.Transformation;

import android.widget.LinearLayout;

import android.widget.TextView;

import wang.raye.library.R;

/**

* 有全文和收起的TextView

* Created by Raye on 2016/6/24.

public class MoreTextView extends LinearLayout {

/** TextView的实际高度*/

private int textViewHeight;

/** 默认全文的Text*/

private static final String EXPANDEDTEXT = "全文";

/** 默认收起的text*/

private static final String COLLAPSEDTEXT = "收起";

/** 全文的text*/

private String expandedText ;

/** 收起的text*/

private String collapsedText ;

/** 字体大小*/

private int textSize;

/** 字体颜色*/

private int textColor;

/** 超过多少行出现全文、收起按钮*/

private int trimLines;

/** 显示文本的TextView */

private TextView showTextView;

/** 全文和收起的TextView*/

private TextView collapseTextView;

/** 是否是收起状态，默认收起*/

private boolean collapsed = true;

public MoreTextView(Context context, AttributeSet attrs) {

super(context, attrs);

initView(context,attrs);

}

public MoreTextView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView(context,attrs);

}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

public MoreTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

initView(context,attrs);

}

private void initView(Context context,AttributeSet attrs){

showTextView = new TextView(context);

setOrientation(VERTICAL);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MoreTextView);

textColor = typedArray.getColor(R.styleable.MoreTextView_textColor, Color.GRAY);

textSize = typedArray.getDimensionPixelSize(R.styleable.MoreTextView_textSize,14);

expandedText = typedArray.getString(R.styleable.MoreTextView_expandedText);

if(TextUtils.isEmpty(expandedText)){

expandedText = EXPANDEDTEXT;

}

collapsedText = typedArray.getString(R.styleable.MoreTextView_collapsedText);

if(TextUtils.isEmpty(collapsedText)){

collapsedText = COLLAPSEDTEXT;

}

trimLines = typedArray.getInt(R.styleable.MoreTextView_trimLines,0);

typedArray.recycle();

showTextView.setTextSize(textSize);

showTextView.setTextColor(textColor);

addView(showTextView);

}

public void setText(CharSequence text){

globalLayout();

showTextView.setText(text);

}

/**

* 获取控件实际高度，并设置最大行数

private void globalLayout() {

showTextView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

textViewHeight = showTextView.getHeight();

ViewTreeObserver obs = showTextView.getViewTreeObserver();

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

obs.removeOnGlobalLayoutListener(this);

} else {

obs.removeGlobalOnLayoutListener(this);

}

TextPaint tp = showTextView.getPaint();

int allWidth = (int) tp.measureText(showTextView.getText().toString());

//计算总行数

int allLine = allWidth / showTextView.getWidth();

if(allWidth % showTextView.getWidth() == 0){

textViewHeight = showTextView.getLineHeight() * allLine;

}else{

allLine ++;

textViewHeight = showTextView.getLineHeight() * allLine;

}

if(trimLines > 0 && trimLines < allLine){

//需要全文和收起

if(collapsed) {

showTextView.setHeight(showTextView.getLineHeight() * trimLines);

}

if(collapseTextView == null) {

//全文和收起的textView

collapseTextView = new TextView(getContext());

collapseTextView.setTextSize(textSize);

collapseTextView.setTextColor(Color.BLUE);

collapseTextView.setText(expandedText);

LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT, Gravity.RIGHT | Gravity.BOTTOM);

collapseTextView.setLayoutParams(lp);

collapseTextView.setOnClickListener(collapseListener);

addView(collapseTextView);

}

});

}

private OnClickListener collapseListener = new OnClickListener() {

@Override

public void onClick(final View v) {

v.setEnabled(false);

final int startValue = showTextView.getHeight();

final int deltaValue ;

if(collapsed){

//是放大

deltaValue = textViewHeight - startValue;

}else{

deltaValue = showTextView.getLineHeight() * trimLines - startValue;

}

Animation animation = new Animation() {

protected void applyTransformation(float interpolatedTime, Transformation t) {

showTextView.setHeight((int) (startValue + deltaValue * interpolatedTime));

}

};

animation.setDuration(500);

animation.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

v.setEnabled(true);

collapsed = !collapsed;

collapseTextView.setText(collapsed?expandedText:collapsedText);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

showTextView.startAnimation(animation);

}

};

}

具体分析

初始化控件

private void initView(Context context,AttributeSet attrs){

showTextView = new TextView(context);

setOrientation(VERTICAL);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MoreTextView);

textColor = typedArray.getColor(R.styleable.MoreTextView_textColor, Color.GRAY);

textSize = typedArray.getDimensionPixelSize(R.styleable.MoreTextView_textSize,14);

expandedText = typedArray.getString(R.styleable.MoreTextView_expandedText);

if(TextUtils.isEmpty(expandedText)){

expandedText = EXPANDEDTEXT;

}

collapsedText = typedArray.getString(R.styleable.MoreTextView_collapsedText);

if(TextUtils.isEmpty(collapsedText)){

collapsedText = COLLAPSEDTEXT;

}

trimLines = typedArray.getInt(R.styleable.MoreTextView_trimLines,0);

typedArray.recycle();

showTextView.setTextSize(textSize);

showTextView.setTextColor(textColor);

addView(showTextView);

}

这里主要是获取自定义参数的属性，并且在布局中添加一个显示正文的TextView控件，以及设置控件相关属性

核心代码

/**

* 获取控件实际高度，并设置最大行数

private void globalLayout() {

showTextView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

textViewHeight = showTextView.getHeight();

ViewTreeObserver obs = showTextView.getViewTreeObserver();

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

obs.removeOnGlobalLayoutListener(this);

} else {

obs.removeGlobalOnLayoutListener(this);

}

TextPaint tp = showTextView.getPaint();

int allWidth = (int) tp.measureText(showTextView.getText().toString());

//计算总行数

int allLine = allWidth / showTextView.getWidth();

if(allWidth % showTextView.getWidth() == 0){

textViewHeight = showTextView.getLineHeight() * allLine;

}else{

allLine ++;

textViewHeight = showTextView.getLineHeight() * allLine;

}

if(trimLines > 0 && trimLines < allLine){

//需要全文和收起

if(collapsed) {

showTextView.setHeight(showTextView.getLineHeight() * trimLines);

}

if(collapseTextView == null) {

//全文和收起的textView

collapseTextView = new TextView(getContext());

collapseTextView.setTextSize(textSize);

collapseTextView.setTextColor(Color.BLUE);

collapseTextView.setText(expandedText);

LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT, Gravity.RIGHT | Gravity.BOTTOM);

collapseTextView.setLayoutParams(lp);

collapseTextView.setOnClickListener(collapseListener);

addView(collapseTextView);

}

});

}

这里主要是在GlobalLayoutListener监听中，获取控件的实际高度，因为第一次GlobalLayoutListener会在onDraw方法前面调用，所以不会造成闪烁，另外由于我之前试过获取一行中有多少个字符，发现TextView只有完全绘制成功后，获取到的每行字符才是正确的，所以我担心没有完成绘制完成后获取的行数也有误差，所以通过TextPaint来计算出文本总宽度，然后根据TextView宽度来计算出行数，最后判断总行数是否达到了需要收起的行数，如果达到了收起的行数，则设置textView的高度为行高*指定行数，因为没有padding等属性，所以不需要考虑，同时判断全文收起的按钮是否为空，为空就初始化控件，并添加到布局

点击事件

private OnClickListener collapseListener = new OnClickListener() {

@Override

public void onClick(final View v) {

v.setEnabled(false);

final int startValue = showTextView.getHeight();

final int deltaValue ;

if(collapsed){

//是放大

deltaValue = textViewHeight - startValue;

}else{

deltaValue = showTextView.getLineHeight() * trimLines - startValue;