图1 收缩状态 图2 展开状态
今天所讲述的是一个比较常见的一个功能模块，可伸缩的文本控件，可以用于显示商品的详情信息，但是为了节省空间，可以先让详情信息显示一部分，如果用户要看全部信息，只要点击展开，商品的详情信息就全部展示出来，如果用户看完之后，还可以点击收缩，把详情信息收缩起来，只展示一部分。其实这样的功能Android系统提供的TextView控件也是可以做到这一点的，TextView可以设置其显示的最大行数来收缩文本，但是它做不到的是将展开/收缩文本加到最后一行的后面，系统并没有提供此类的方法。下面我们就来自定义一个控件来实现此功能，本控件的实现原理是基于流式布局的，关于流式布局详解的博客：http://blog.csdn.net/cj_286/article/details/53082901
本控件的实现原理是遍历要显示的文本字符，计算每一个字符所占空间的宽度，不断的累加，如果超过一行显示的宽度时，就保存该行所显示的所有字符，再换行到下一行继续累计下一行显示的字符，以此类推，直到最后一行的最后一个字符。当保存了每一行所占的字符串后，遍历每行字符串的集合，对应每行创建一个TextView显示一行字符串，如果是收缩状态在后面加展开，并对其设置点击事件，点击后触发展开；如果是展开状态，在最后一行后面添加收缩，也对其添加点击事件，点击后触发收缩；在收缩或展开的最后一行添加收缩和展开TextView，因为其父容器是FlowLayout，会将收缩/展开view直接添加在其后面，如果显示不下，就会到下一行显示，不会出现显示在窗体外面的情况，完美的结合。
如何来计算每个字符所占宽度的大小呢，就是先创建一个TextView，将要计算宽度的字符设置到TextView上，然后得到它测量的宽度即可。
/**
* 临时文本控件，用于计算每个字符所占的空间大小，主要是宽度
* @param size
* @return
*/
private TextView getTextView(float size){
TextView textView = new TextView(mContext);
textView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
textView.setTextSize(size);
return textView;
}在遍历每个字符的时候，都会调用此方法来计算字符所占的宽度
/**
* 计算每一个字符的宽度
* @param textView 初始化工作的文本控件，载体
* @param c 字符
* @return
*/
private float getCharWidth(TextView textView, char c) {
textView.setText(String.valueOf(c));
textView.measure(0, 0);
return textView.getMeasuredWidth();
}//得到字符的显示宽度
float charWidth = getCharWidth(mTextView,(char)mString.charAt(i));
//如果该行的显示的所有字符小于该行宽度，就继续添加
if(width + charWidth <= widthScreen){
width += charWidth;
if((char)mString.charAt(i) == ' '){//记住一行中最后一次出现的空格
isNullCharIndex = i;
}
//防止英文字符之间不是连续的
if(!isA_z((char)mString.charAt(i))){
isNullCharIndex = i;
}
if(isNullCharIndex + WORD_LENGTH < i ){//如果连续15个字符还是没有空格就直接截断
isNullCharIndex = i;
}
}else{//一行已显示不下
//如果下一个字符不是最后一个，且是英文字母
if(mString.length()-1 >= i + 1 && isA_z((char)mString.charAt(i))){
//就从记下的空格的位置继续循环，
i = isNullCharIndex ;
if(mString.length() != i){
//保存空格之前的字符串
strings.add(mString.substring(index, i + 1));
//记下下一行的开始位置
index = i + 1;
//下一行的宽度从0开始
width = 0;
//累加宽度
//width += charWidth;
//行数加1
rows ++;
}
continue;
}
//如果不是最后一行
if(mString.length() != i){
//记下该行的字符串
strings.add(mString.substring(index, i));
//记下下一行的开始位置
index = i;
//下一行的宽度从0开始
width = 0;
//累加宽度
width += charWidth;
//行数加1
rows ++;
}
}
}//第一种情况：在收缩文本行数以内 （展开和收缩都是一样的，所以就没有收缩和展开）
if(rows <= mZoomRows && !isExpand && mString.length()-1 == i){
strings.add(mString.substring(index, i+1));//加最后一行
for(int j=0;j<strings.size();j++){
TextView textView = new TextView(mContext);
textView.setTextSize(mCharSize);
textView.setTextColor(mDescColor);
textView.setText(strings.get(j));
//textView.setBackgroundColor(Color.RED);
mFlowLayout.addView(textView);
}
break;
}
//第二种情况：展开时，已经到最后一个字符
if(isExpand && mString.length()-1 == i){
strings.add(mString.substring(index, i+1));//加最后一行
for(int j=0;j<strings.size();j++){
TextView textView = new TextView(mContext);
textView.setTextSize(mCharSize);
textView.setText(strings.get(j));
textView.setTextColor(mDescColor);
//textView.setBackgroundColor(Color.GREEN);
mFlowLayout.addView(textView);
}
mTextViewExpand.setText(" "+mExpandTextClose);
setExpandTextDrawable(mCloseResId);
mTextViewExpand.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//Toast.makeText(mContext, "收缩", 0).show();
mFlowLayout.removeAllViews();
expandText(false);
}
});
mFlowLayout.addView(mTextViewExpand);
break;
}
//第三种情况：收缩时，但是文本已经超出了收缩的个数，所以只保留收缩的文本字数
if(rows == mZoomRows && index + mZoomChar == i && !isExpand){
strings.add(mString.substring(index, i+1));//加最后一行
strings.add("...");
for(int j=0;j<strings.size();j++){
TextView textView = new TextView(mContext);
textView.setTextSize(mCharSize);
textView.setText(strings.get(j));
textView.setTextColor(mDescColor);
//textView.setBackgroundColor(Color.BLUE);
mFlowLayout.addView(textView);
}
mTextViewExpand.setText(" "+mExpandTextOpen);
setExpandTextDrawable(mOpenResId);
mTextViewExpand.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//Toast.makeText(mContext, "展开", 0).show();
mFlowLayout.removeAllViews();
expandText(true);
}
});
mFlowLayout.addView(mTextViewExpand);
break;
}
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ExpandTextView">
<attr name="descZoomRows" format="integer" /><!-- 完全显示的行数 实际为descZoomRows + 1行 -->
<attr name="descText" format="string" /><!-- 显示文本 -->
<attr name="descSize" format="float" /><!-- 显示文本的字体大小 -->
<attr name="descColor" format="reference|color" /><!-- 显示文本的颜色 -->
<attr name="expandTextOpen" format="string" /><!-- 设置展开文本 -->
<attr name="expandTextClose" format="string" /><!-- 设置收缩文本 -->
<attr name="expandTextOpenDrawable" format="reference" /><!-- 设置展开文本右边的图标 -->
<attr name="expandTextCloseDrawable" format="reference" /><!-- 设置收缩文本右边的图标 -->
<attr name="expandTextColor" format="reference|color" /><!-- 展开/收缩的文本颜色 -->
<attr name="expandTextSize" format="float" /><!-- 展开/收缩的文本大小 -->
</declare-styleable>
</resources>TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ExpandTextView);
mZoomRows = a.getInt(R.styleable.ExpandTextView_descZoomRows, 2);
mString = a.getString(R.styleable.ExpandTextView_descText);
if(TextUtils.isEmpty(mString)){
mString = "";
}
mDescSize = a.getFloat(R.styleable.ExpandTextView_descSize, 14);
mCharSize = mDescSize;
mDescColor = a.getColor(R.styleable.ExpandTextView_descColor, 0);
mExpandTextOpen = a.getString(R.styleable.ExpandTextView_expandTextOpen);
mExpandTextClose = a.getString(R.styleable.ExpandTextView_expandTextClose);
mExpandTextColor = a.getColor(R.styleable.ExpandTextView_expandTextColor, 0);
mExpandTextSize = a.getFloat(R.styleable.ExpandTextView_expandTextSize, 14);
mOpenResId = a.getResourceId(R.styleable.ExpandTextView_expandTextOpenDrawable, 0);
mCloseResId = a.getResourceId(R.styleable.ExpandTextView_expandTextCloseDrawable, 0);源码下载地址：CSDN
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
