Android TextView实现多文本折叠、展开效果

背景

在开发过程中，当我们的需求中包含说说或者评论等内容的展示时，我们都会考虑当内容太多时该如何显示。当内容的字数太多，如果全部展示出来可能会影响体验效果，但是又不能只截取一部分内容进行展示，此时就需要考虑使用多行显示折叠的效果来实现。

效果图：

使用

1.布局文件调用

<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.wiggins.expandable.widget.MoreLineTextView
  android:id="@+id/tv_more_line_short"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/white"
  android:padding="@dimen/padding_small"
  app:clickAll="true"
  app:textColor="@color/red" />

 <View style="@style/spaceLine" />

 <com.wiggins.expandable.widget.expandable.ExpandableTextView
  android:id="@+id/tv_expandable_short"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/white"
  android:ellipsize="end"
  android:padding="@dimen/padding_small"
  android:textColor="@color/blue"
  app:allClickable="false"
  app:contentTextColor="@color/blue"
  app:isDisplayIcon="false"
  app:maxCollapsedLines="4" />

 <View style="@style/spaceLine" />

 <com.wiggins.expandable.widget.MoreLineTextView
  android:id="@+id/tv_more_line_long"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/white"
  android:padding="@dimen/padding_small"
  app:clickAll="true"
  app:textColor="@color/red" />

 <View style="@style/spaceLine" />

 <com.wiggins.expandable.widget.expandable.ExpandableTextView
  android:id="@+id/tv_expandable_long"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/white"
  android:ellipsize="end"
  android:padding="@dimen/padding_small"
  android:textColor="@color/blue"
  app:allClickable="false"
  app:contentTextColor="@color/blue"
  app:isDisplayIcon="false"
  app:maxCollapsedLines="4" />
</LinearLayout>

2.Java文件调用

private void initData() {
 mTvMoreLineShort.setText(Constant.content1);
 mTvExpandableShort.setText(Constant.content2);
 mTvMoreLineLong.setText(Constant.content3);
 mTvExpandableLong.setText(Constant.content4);
}

MoreLineTextView使用

1.在attr.xml中定义属性

<declare-styleable name="MoreTextStyle">
 <!--内容大小-->
 <attr name="textSize" format="dimension" />
 <!--内容颜色-->
 <attr name="textColor" format="color" />
 <!--内容默认最大行数-->
 <attr name="maxLine" format="integer" />
 <!--展开/收起图标-->
 <attr name="expandIcon" format="reference" />
 <!--展开/收起动画执行时间-->
 <attr name="durationMillis" format="integer" />
 <!--可点击区域，默认展开/收起区域可点击-->
 <attr name="clickAll" format="boolean" />
</declare-styleable>

2.是否显示折叠效果

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 // 如果没有变化，测量并返回
 if (!mRelayout || getVisibility() == View.GONE) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  return;
 }
 mRelayout = false;

 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 // 内容区域初始显示行高
 mTvContent.setHeight(mTvContent.getLineHeight() * (mMaxLine > mTvContent.getLineCount() ? mTvContent.getLineCount() : mMaxLine));
 mLlExpand.post(new Runnable() {

  @Override
  public void run() {
   // 是否显示折叠效果
   mLlExpand.setVisibility(mTvContent.getLineCount() > mMaxLine ? View.VISIBLE : View.GONE);
  }
 });
}

3.设置显示内容

/**
 * @Description 设置显示内容
 */
public void setText(String str) {
 mRelayout = true;
 mTvContent.setText(str);
 setVisibility(TextUtils.isEmpty(str) ? View.GONE : View.VISIBLE);
}

4.展开/收起动画

@Override
public void onClick(View v) {
 if (mTvContent.getLineCount() <= mMaxLine) {
  return;
 }
 isExpand = !isExpand;
 mTvContent.clearAnimation();
 final int deltaValue;
 final int startValue = mTvContent.getHeight();
 if (isExpand) {
  deltaValue = mTvContent.getLineHeight() * mTvContent.getLineCount() - startValue;//计算要展开高度
  RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  animation.setDuration(mDurationMillis);
  animation.setFillAfter(true);
  mIvExpand.startAnimation(animation);
  mTvExpand.setText(getContext().getString(R.string.collapse));
 } else {
  deltaValue = mTvContent.getLineHeight() * mMaxLine - startValue;//为负值，收缩的高度
  RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  animation.setDuration(mDurationMillis);
  animation.setFillAfter(true);
  mIvExpand.startAnimation(animation);
  mTvExpand.setText(getContext().getString(R.string.expand));
 }
 Animation animation = new Animation() {
  protected void applyTransformation(float interpolatedTime, Transformation t) {
   //interpolatedTime:为当前动画帧对应的相对时间，值总在0-1之间,原始长度+高度差*（从0到1的渐变）即表现为动画效果
   mTvContent.setHeight((int) (startValue + deltaValue * interpolatedTime));
  }
 };
 animation.setDuration(mDurationMillis);
 mTvContent.startAnimation(animation);
}

ExpandableTextView使用

1.在attr.xml中定义属性

<declare-styleable name="ExpandableTextView">
 <!--内容默认最大行数，超过隐藏-->
 <attr name="maxCollapsedLines" format="integer" />
 <!--展开/收起动画执行时间-->
 <attr name="animDuration" format="integer" />
 <!--展开图片-->
 <attr name="expandDrawable" format="reference" />
 <!--收起图片-->
 <attr name="collapseDrawable" format="reference" />
 <!--内容颜色-->
 <attr name="contentTextColor" format="color" />
 <!--内容大小-->
 <attr name="contentTextSize" format="dimension" />
 <!--收起/展开颜色-->
 <attr name="collapseExpandTextColor" format="color" />
 <!--收起/展开大小-->
 <attr name="collapseExpandTextSize" format="dimension" />
 <!--收起文字-->
 <attr name="textCollapse" format="string" />
 <!--展开文字-->
 <attr name="textExpand" format="string" />
 <!--可点击区域，默认展开/收起区域可点击-->
 <attr name="allClickable" format="boolean" />
 <!--是否显示展开/收起图标，默认显示-->
 <attr name="isDisplayIcon" format="boolean" />
 <!--收起/展开位置，默认左边-->
 <attr name="collapseExpandGrarity">
  <flag name="left" value="3" />
  <flag name="right" value="5" />
 </attr>
 <!--收起/展开图标位置，默认右边-->
 <attr name="drawableGrarity">
  <flag name="left" value="3" />
  <flag name="right" value="5" />
 </attr>
</declare-styleable>

2.是否显示折叠效果

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 // 如果没有变化，测量并返回
 if (!mRelayout || getVisibility() == View.GONE) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  return;
 }
 mRelayout = false;

 // Setup with optimistic case
 // i.e. Everything fits. No button needed
 mLlExpand.setVisibility(View.GONE);
 mTvContent.setMaxLines(Integer.MAX_VALUE);

 // Measure
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 //如果内容真实行数小于等于最大行数，不处理
 if (mTvContent.getLineCount() <= mMaxCollapsedLines) {
  return;
 }
 // 获取内容tv真实高度（含padding）
 mTextHeightWithMaxLines = getRealTextViewHeight(mTvContent);

 // 如果是收起状态，重新设置最大行数
 if (mCollapsed) {
  mTvContent.setMaxLines(mMaxCollapsedLines);
 }
 mLlExpand.setVisibility(View.VISIBLE);

 // Re-measure with new setup
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 if (mCollapsed) {
  // Gets the margin between the TextView's bottom and the ViewGroup's bottom
  mTvContent.post(new Runnable() {
   @Override
   public void run() {
    mMarginBetweenTxtAndBottom = getHeight() - mTvContent.getHeight();
   }
  });
  // 保存这个容器的测量高度
  mCollapsedHeight = getMeasuredHeight();
 }
}

3.设置显示内容

/**
 * @Description 设置显示内容
 */
public void setText(CharSequence text) {
 mRelayout = true;
 mTvContent.setText(text);
 setVisibility(TextUtils.isEmpty(text) ? View.GONE : View.VISIBLE);
}

4.展开/收起动画

@Override
public void onClick(View view) {
 if (mLlExpand.getVisibility() != View.VISIBLE) {
  return;
 }

 mCollapsed = !mCollapsed;
 // 修改收起/展开图标、文字
 setDrawbleAndText();
 // 保存位置状态
 if (mCollapsedStatus != null) {
  mCollapsedStatus.put(mPosition, mCollapsed);
 }

 // 执行展开/收起动画
 mAnimating = true;
 ValueAnimator valueAnimator;
 if (mCollapsed) {
  valueAnimator = new ValueAnimator().ofInt(getHeight(), mCollapsedHeight);
 } else {
  mCollapsedHeight = getHeight();
  valueAnimator = new ValueAnimator().ofInt(getHeight(), getHeight() + mTextHeightWithMaxLines - mTvContent.getHeight());
 }

 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

  @Override
  public void onAnimationUpdate(ValueAnimator valueAnimator) {
   int animatedValue = (int) valueAnimator.getAnimatedValue();
   mTvContent.setMaxHeight(animatedValue - mMarginBetweenTxtAndBottom);
   getLayoutParams().height = animatedValue;
   requestLayout();
  }
 });

 valueAnimator.addListener(new Animator.AnimatorListener() {

  @Override
  public void onAnimationStart(Animator animator) {

  }

  @Override
  public void onAnimationEnd(Animator animator) {
   // 动画结束后发送结束的信号，清除动画标志
   mAnimating = false;
   // 通知监听
   if (mListener != null) {
    mListener.onExpandStateChanged(mTvContent, !mCollapsed);
   }
  }

  @Override
  public void onAnimationCancel(Animator animator) {

  }

  @Override
  public void onAnimationRepeat(Animator animator) {

  }
 });

 valueAnimator.setDuration(mAnimationDuration);
 valueAnimator.start();
}

项目地址 ☞ 传送门

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# TextView多文本折叠展开  # TextView文本折叠  # TextView折叠展开  # Android UI实现多行文本折叠展开效果  # Android TextView多文本折叠展开效果  # Android中RecyclerView实现多级折叠列表效果（二）  # Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)  # Android折叠式Toolbar使用完全解析（CollapsingToolbarLayout）  # android给RecyclerView加上折叠的效果示例  # Android中FoldingLayout折叠布局的用法及实战全攻略  # Android TextView仿微信可折叠效果  # Android显示全文折叠控件使用方法详解  # Android开发实现的文本折叠点击展开功能示例  # 行数  # 执行时间  # 如果没有  # 太多  # 该如何  # 又不  # 时就  # 当我们  # 等内容  # 表现为  # 来实现  # 大家多多  # 过程中  # 结束后  # 传送门  # declare  # mTvExpandableLong  # attr  # styleable  # format 

相关文章： 建站主机如何安装配置？新手必看操作指南  制作旅游网站html,怎样注册旅游网站？  高端建站如何打造兼具美学与转化的品牌官网？  建站之星如何实现网站加密操作？  黑客入侵网站服务器的常见手法有哪些？  威客平台建站流程解析：高效搭建教程与设计优化方案  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  兔展官网 在线制作,怎样制作微信请帖？  微信推文制作网站有哪些,怎么做微信推文，急？  高端网站建设与定制开发一站式解决方案 中企动力  如何在IIS中配置站点IP、端口及主机头？  手机网站制作与建设方案,手机网站如何建设？  如何选择网络建站服务器？高效建站必看指南  C#如何在一个XML文件中查找并替换文本内容  学校建站服务器如何选型才能满足性能需求？  Android自定义控件实现温度旋转按钮效果  如何在宝塔面板创建新站点？  如何获取开源自助建站系统免费下载链接？  建站之星价格显示格式升级，你的预算足够吗？  html制作网站的步骤有哪些,iapp如何添加网页？  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  深圳 网站制作,深圳招聘网站哪个比较好一点啊？  如何获取上海专业网站定制建站电话？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  网站制作价目表怎么做,珍爱网婚介费用多少？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  专业的网站制作设计是什么,如何制作一个企业网站，建设网站的基本步骤有哪些？  微信小程序 五星评分(包括半颗星评分)实例代码  如何有效防御Web建站篡改攻击？  建站之星代理如何优化在线客服效率？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  如何注册花生壳免费域名并搭建个人网站？  如何通过网站建站时间优化SEO与用户体验？  宝塔新建站点报错如何解决？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  css网站制作参考文献有哪些,易聊怎么注册？  如何用西部建站助手快速创建专业网站？  建站主机如何选？高性价比方案全解析  已有域名如何免费搭建网站？  如何快速搭建高效服务器建站系统？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  ,怎么用自己头像做动态表情包？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  如何通过虚拟主机快速搭建个人网站？  南宁网站建设制作定制,南宁网站建设可以定制吗？  建站之星多图banner生成与模板自定义指南  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  建站之星安全性能如何？防护体系能否抵御黑客入侵？  视频网站制作教程,怎么样制作优酷网的小视频？