Android TextView多文本折叠展开效果

最近做项目,效果图要用到TextView的折叠,超过一定行数的时候,就会折叠起来,点击可以展开。网上找了一些效果,自己也稍作了修改。便拿来与网友分享分享。
参考文献:Android UI实现多行文本折叠展开效果

第一种:通过多个布局组合实现
大概步骤:
- 定义布局,垂直的线性LinearLayout布局、TextView和ImageView。 在layout中定义基本组件。
- 设置TextView的高度为指定行数*行高。 不使用maxLine的原因是maxLine会控制显示文本的行数,不方便后边使用动画展开全部内容。因此这里TextView的高度也因该为wrap_content。
- 给整个布局添加点击事件,绑定动画。 点击时,若TextView未展开则展开至其实际高度,imageView 旋转;否则回缩至 指定行数*行高 , imageView 旋转缩回。
布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:more="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.example.my.textviewdemotest.MainActivity">

 <TextView
 android:id="@+id/textView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textColor="@android:color/black"
 android:textSize="18sp">
 </TextView>

 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">

 <TextView
 android:id="@+id/expand_text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="更多"
 android:textSize="18sp"
 android:visibility="gone"/>

 <ImageView
 android:id="@+id/expand_view1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:paddingBottom="5dip"
 android:paddingLeft="5dip"
 android:paddingRight="5dip"
 android:paddingTop="5dip"
 android:src="@drawable/ic_expand_more_red_700_24dp"
 android:visibility="gone"
 />
 </RelativeLayout>
 <!-- 第二种方法 -->
 <com.example.my.textviewdemotest.TextMoreTextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:ellipsize="end"
 more:maxLine="2"
 more:text="@string/text"
 more:textColor="@android:color/black"
 more:textSize="18dip">
 </com.example.my.textviewdemotest.TextMoreTextView>
</LinearLayout>

核心代码:

package com.example.my.textviewdemotest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

 TextView text1;
 ImageView mImageView1;
 TextView expandText;
 //TextMoreTextView text2;

 boolean isExpand;//是否已展开的状态
 private int maxDescripLine = 3; //TextView默认最大展示行数
 private int deltaValue;//默认高度,即前边由maxLine确定的高度
 private int startValue;//起始高度
 private int durationMillis = 350;//动画持续时间

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 text1 = (TextView) findViewById(R.id.textView1);
 // text2= (TextMoreTextView) findViewById(R.id.text_textView);
 expandText = (TextView) findViewById(R.id.expand_text);

 mImageView1 = (ImageView) findViewById(R.id.expand_view1);
 mImageView1.setOnClickListener(this);

 text1.setText(getText(R.string.text));
 //第二种可以在这里直接设置文字
 // text2.setText(getText(R.string.text));
 //这里大家可以根据实际情况来设置文字的高度,做个判断(可能会文字只有一行,也会占据maxDescripLine行)
 text1.setHeight(text1.getLineHeight() * maxDescripLine);
 text1.post(new Runnable() {
 @Override
 public void run() {
 mImageView1.setVisibility(text1.getLineCount() > maxDescripLine ? View.VISIBLE : View.GONE);
 expandText.setVisibility(text1.getLineCount() > maxDescripLine ? View.VISIBLE : View.GONE);
 }
 });
 }

 @Override
 public void onClick(View v) {
 switch (v.getId()) {
 case R.id.expand_view1:
 zheDie(text1, mImageView1);
 break;
 }

 }

 private void zheDie(final TextView text, ImageView imageView) {
 isExpand = !isExpand;
 text.clearAnimation();
 startValue = text.getHeight();
 if (isExpand) {
 /**
 * 折叠动画
 * 从实际高度缩回起始高度
 */
 deltaValue = text.getLineHeight() * text.getLineCount() - startValue;
 RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
 animation.setDuration(durationMillis);
 animation.setFillAfter(true);
 imageView.startAnimation(animation);
 expandText.setText("收起");
 } else {
 /**
 * 展开动画
 * 从起始高度增长至实际高度
 */
 deltaValue = text.getLineHeight() * maxDescripLine - startValue;
 RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
 animation.setDuration(durationMillis);
 animation.setFillAfter(true);
 imageView.startAnimation(animation);
 expandText.setText("更多");
 }
 Animation animation = new Animation() {
 protected void applyTransformation(float interpolatedTime, Transformation t) { //根据ImageView旋转动画的百分比来显示textview高度,达到动画效果
 text.setHeight((int) (startValue + deltaValue * interpolatedTime));
 }
 };
 animation.setDuration(durationMillis);
 text.startAnimation(animation);
 }
}

第二种方法,如果用的地方多可以省去很多冗余代码:具体步骤就不直接分析。
核心代码:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="MoreTextStyle">
 <attr name="textSize" format="dimension"/>
 <attr name="textColor" format="color"/>
 <attr name="maxLine" format="integer" />
 <attr name="text" format="string" />
 </declare-styleable>
</resources>
package com.example.my.textviewdemotest;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TextMoreTextView extends LinearLayout {
 protected TextView contentView;
 protected ImageView expandView;

 protected int textColor;
 protected float textSize;
 protected int maxLine;
 protected String text;

 public int defaultTextColor = Color.BLACK;//默认文字颜色
 public int defaultTextSize = 12; //默认文字大小
 public int defaultLine = 3; //默认行数

 public TextMoreTextView(Context context, AttributeSet attrs) {
 super(context, attrs);
 initalize();
 initWithAttrs(context, attrs);
 // bindListener();
 }

 protected void initWithAttrs(Context context, AttributeSet attrs) {
 TypedArray a = context.obtainStyledAttributes(attrs,
 R.styleable.MoreTextStyle);
 int textColor = a.getColor(R.styleable.MoreTextStyle_textColor,
 defaultTextColor);
 textSize = a.getDimensionPixelSize(R.styleable.MoreTextStyle_textSize, defaultTextSize);
 maxLine = a.getInt(R.styleable.MoreTextStyle_maxLine, defaultLine);
 text = a.getString(R.styleable.MoreTextStyle_text);
 bindTextView(textColor, textSize, maxLine, text);
 a.recycle();
 }

 protected void initalize() {
 setOrientation(VERTICAL);
 setGravity(Gravity.RIGHT);
 contentView = new TextView(getContext());
 addView(contentView, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
 expandView = new ImageView(getContext());
 int padding = dip2px(getContext(), 5);
 expandView.setPadding(padding, padding, padding, padding);
 expandView.setImageResource(R.drawable.ic_expand_more_red_700_24dp);
 LayoutParams llp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
 addView(expandView, llp);
 }

 protected void bindTextView(int color, float size, final int line, String text) {
 contentView.setTextColor(color);
 contentView.setTextSize(TypedValue.COMPLEX_UNIT_PX, size);
 contentView.setText(text);
 ViewTreeObserver observer = contentView.getViewTreeObserver();
 observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
 //判断写在这个方法里面能拿到contentView.getLineCount(),否则返回时0;
 @Override
 public void onGlobalLayout() {
 ViewTreeObserver obs = contentView.getViewTreeObserver();
 obs.removeGlobalOnLayoutListener(this);
 if (contentView.getLineCount() < line) {
 contentView.setHeight(contentView.getLineHeight() * contentView.getLineCount());
 } else {
 contentView.setHeight(contentView.getLineHeight() * line);
 bindListener();//只有在行数大于设定行数才会执行这个方法,做了调整否则会有bug。
 }
 //Log.e("aaa", "bindTextView111: " + contentView.getLineCount());//返回0,为什么
 }
 });

 post(new Runnable() {
 @Override
 public void run() {
 expandView.setVisibility(contentView.getLineCount() > line ? View.VISIBLE : View.GONE);
 //Log.e("aaa", "run: "+contentView.getLineCount() );
 }
 });
 }

 protected void bindListener() {
 setOnClickListener(new OnClickListener() {
 boolean isExpand;

 @Override
 public void onClick(View v) {
 isExpand = !isExpand;
 contentView.clearAnimation();
 final int deltaValue;
 final int startValue = contentView.getHeight();
 int durationMillis = 350;
 if (isExpand) {
 deltaValue = contentView.getLineHeight() * contentView.getLineCount() - startValue;
 RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
 animation.setDuration(durationMillis);
 animation.setFillAfter(true);
 expandView.startAnimation(animation);
 } else {
 deltaValue = contentView.getLineHeight() * maxLine - startValue;
 RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
 animation.setDuration(durationMillis);
 animation.setFillAfter(true);
 expandView.startAnimation(animation);
 }
 Animation animation = new Animation() {
 protected void applyTransformation(float interpolatedTime, Transformation t) {
 contentView.setHeight((int) (startValue + deltaValue * interpolatedTime));
 }

 };
 animation.setDuration(durationMillis);
 contentView.startAnimation(animation);
 }
 });
 }

 public TextView getTextView() {
 return contentView;
 }

 public void setText(CharSequence charSequence) {
 contentView.setText(charSequence);
 }

 public static int dip2px(Context context, float dipValue) {
 final float scale = context.getResources().getDisplayMetrics().density;
 return (int) (dipValue * scale + 0.5f);
 }
}

这个类这样就写好了。调用直接在布局文件中引用就行了。

源码下载:http://xiazai.jb51.net/201610/yuanma/Androidtextview(jb51.net).rar

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

(0)

相关推荐

  • android 手机SD卡读写操作(以txt文本为例)实现步骤

    1.首先对manifest注册SD卡读写权限 要说明一下,我这里没有用MainActivity.class作为软件入口 复制代码 代码如下: AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com

  • Android UI实现多行文本折叠展开效果

    上文介绍了单行文本水平触摸滑动效果,通过EditText实现TextView单行长文本水平滑动效果. 本文继续介绍了多行文本折叠展开,自定义布局View实现多行文本折叠和展开 1.概述 经常在APP中能看到有引用文章或大段博文的内容,他们的展示样式也有点儿意思,默认是折叠的,当你点击文章之后它会自动展开.再次点击他又会缩回去. 网上有找到部分效果,感觉不是很满意.最后自己尝试用 自定义布局layout 写了个demo.比较简陋,不过可以用了.有这方面需求的朋友可以稍加改造下.如有更好的创意,也不

  • Android开发之自动朗读TTS用法分析

    本文实例讲述了Android自动朗读TTS用法.分享给大家供大家参考,具体如下: TextToSpeech简称 TTS,是自Android 1.6版本开始比较重要的新功能.将所指定的文本转成不同语言音频输出.它可以方便的嵌入到游戏或者应用程序中,增强用户体验. 在讲解TTS API和将这项功能应用到你的实际项目中的方法之前,先对这套TTS引擎有个初步的了解. 对TTS资源的大体了解: TTS engine依托于当前Android Platform所支持的几种主要的语言:English.Frenc

  • android界面布局之实现文本块布局效果示例

    复制代码 代码如下: package cn.aibow.android.layoutdemo1; import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.MotionEvent;import android.view.View;import android.widget.TextView;import android.widget.Toast; public

  • Android中捕获TTextView文本中的链接点击事件方法

    Android中的TTextView很强大,我们可以不仅可以设置纯文本为其内容,还可以设置包含网址和电子邮件地址的内容,并且使得这些点击可以点击.但是我们可以捕获并控制这些链接的点击事件么,当然是可以的. 本文将一个超级简单的例子介绍一下如何实现在Android TextView 捕获链接的点击事件. 关键实现 实现原理就是将所有的URL设置成ClickSpan,然后在它的onClick事件中加入你想要的控制逻辑就可以了. 复制代码 代码如下: private void setLinkClick

  • Android中实现为TextView添加多个可点击的文本

    本文实例展示了Android中实现为TextView添加多个可点击的文本的方法.该功能在Android社交软件的制作中非常具有实用价值.分享给大家供大家参考.具体如下: 很多时候我们在使用社交软件的过程中多多少少会为别人的帖子点赞,如下图所示: 可以看到用户页面显示出来的只是点了赞的用户的名称,点击这些名称可以进入到该用户的主页.下面我们就来实现类似的效果. 具体代码如下: @Override protected void onCreate(Bundle savedInstanceState)

  • Android开发之文本内容自动朗读功能实现方法

    本文实例讲述了Android开发之文本内容自动朗读功能实现方法.分享给大家供大家参考,具体如下: Android提供了自动朗读支持.自动朗读支持可以对指定文本内容进行朗读,从而发生声音:不仅如此,Android的自动朗读支持还允许把文本对应的音频录制成音频文件,方便以后播放.这种自动朗读支持的英文名称为TextToSpeech,简称TTS. 借助于TTS的支持,可以在应用程序中动态地增加音频输出,从而改善用户体验. Android的自动朗读支持主要通过TextTospeech来完成,该累提供了如

  • android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法

    布局文件中的TextView属性 复制代码 代码如下: <TextViewandroid:id="@+id/businesscardsingle_content_abstract"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:lineSpacingMu

  • Android应用程序中读写txt文本文件的基本方法讲解

    最终效果图,点击save会保存到文件中,点击show会从文件中读取出内容并显示. main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layou

  • Android TextView多文本折叠展开效果

    最近做项目,效果图要用到TextView的折叠,超过一定行数的时候,就会折叠起来,点击可以展开.网上找了一些效果,自己也稍作了修改.便拿来与网友分享分享. 参考文献:Android UI实现多行文本折叠展开效果 第一种:通过多个布局组合实现 大概步骤: - 定义布局,垂直的线性LinearLayout布局.TextView和ImageView. 在layout中定义基本组件. - 设置TextView的高度为指定行数*行高. 不使用maxLine的原因是maxLine会控制显示文本的行数,不方便

  • 微信小程序实现折叠展开效果

    本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下 wxml: <view class="page"> <!-- 总数 --> <view class="li" bindtap='changeToggle'> <view class="left">总数</view> <view class="right gray" >8&l

  • Angular+ionic实现折叠展开效果的示例代码

    1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isSho

  • android给RecyclerView加上折叠的效果示例

    RecyclerView有很高的自由度,可以说只有想不到没有做不到,真是越用越喜欢.这次用超简单的方法,让RecyclerView带上折叠的效果. 效果是这样的. 总结一下这个列表的特点,就是以下三点: 1. 重叠效果: 2. 层次感: 3. 首项的差动效果. 下面我们来一个个解决. 我们新建一个ParallaxRecyclerView,让它继承RecyclerView,并使用LinearLayoutManager作为布局管理器. 重叠效果 其实就是每一项都搭一部分在它前面那项而已.我们知道,R

  • Android TextView中文本点击文字跳转 (代码简单)

    在web页面中,有a标签的超链接实现跳转,同样在Android当中,用TextView控件来显示文字,实现它的事件来跳转. 用过微博Android手机端的朋友的都知道微博正文有时有一些高亮显示的文本,如话题.提到的人等等,当点击这些文本时会跳到另外一个页面(即另一个activity),下面就要来模仿微博的这个功能 点击#hello# 点击@人 一.新建一个名为WeiboContentTest的工程 二.在布局文件中添加一个textview 三.在mainactivity中创建该textview

  • Android Textview实现颜色渐变滚动效果

    本文实例为大家分享了Android颜色渐变滚动展示的具体代码,供大家参考,具体内容如下 public class FlashTextView extends android.support.v7.widget.AppCompatTextView { private Paint mPaint; private int mViewWidth; private LinearGradient mLinearGradient; private Matrix mGradientMatrix; private

  • Android实现可点击展开的TextView

    概述 Android开发过程中,经常遇到 Textview 展示不完全的情况. 遇到此情况,通常的处理是: 方案一 Textview 添加 android:ellipsize 属性,让展示不完的部分使用省略号代替. 方案二 Textview 采用走马灯效果,使其滚动展示全部文本内容. 对于方案一,如果想查看被省略后的内容,如何实现?通常情况下是在 TextView 文本后面或下边添加一个可点击的图标,来实现 TextView 的展开与收缩.如下图: 收缩状态 展开状态 实现原理 对于以上效果,大

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

    背景 在开发过程中,当我们的需求中包含说说或者评论等内容的展示时,我们都会考虑当内容太多时该如何显示.当内容的字数太多,如果全部展示出来可能会影响体验效果,但是又不能只截取一部分内容进行展示,此时就需要考虑使用多行显示折叠的效果来实现. 效果图: 使用 1.布局文件调用 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:o

  • Android开发实现的文本折叠点击展开功能示例

    本文实例讲述了Android开发实现的文本折叠点击展开功能.分享给大家供大家参考,具体如下: 信息栏,景点介绍,购物信息,进场会使用到文本折叠的方法 实现非常简单,这里就不哆嗦了 效果如下: Demo:https://github.com/LonglyWolf/NavigationSystemHLJU 这里用到了三方类库,在app/gradle添加依赖如下: //文本过长 点击展开全部 implementation 'com.ms-square:expandableTextView:0.1.4'

随机推荐