Android TextView仿微信可折叠效果

在微信朋友圈中,发送大量的文本信息时,在展示的时候微信会将该文本信息进行折叠处理,出现“全文”,“收起”的操作提示。当点击全文时,才能看到全部的文本信息,正好最近的项目中也提出了类似的需求,这里就对该自定义View的实现的方法进行了整理。

代码如下:

1.自定义的View:

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
 * 可折叠的textview
 */
public class ExpandTextView extends LinearLayout {
  public static final int DEFAULT_MAX_LINES = 3;
  private TextView contentText;
  private TextView textPlus;
  private int showLines;
  private ExpandStatusListener expandStatusListener;
  private boolean isExpand;

  public ExpandTextView(Context context) {
    super(context);
    initView();
  }

  public ExpandTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initAttrs(attrs);
    initView();
  }

  public ExpandTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initAttrs(attrs);
    initView();
  }

  private void initAttrs(AttributeSet attrs) {
    TypedArray typedArray = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.ExpandTextView, 0, 0);
    try {
      showLines = typedArray.getInt(R.styleable.ExpandTextView_showLines, DEFAULT_MAX_LINES);
    }finally {
      typedArray.recycle();
    }
  }

  private void initView() {
    setOrientation(LinearLayout.VERTICAL);
    LayoutInflater.from(getContext()).inflate(R.layout.layout_magic_text, this);
    contentText = (TextView) findViewById(R.id.contentText);
    if(showLines > 0){
      contentText.setMaxLines(showLines);
    }

    textPlus = (TextView) findViewById(R.id.textPlus);
    textPlus.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        String textStr = textPlus.getText().toString().trim();
        if("全文".equals(textStr)){
          contentText.setMaxLines(Integer.MAX_VALUE);
          textPlus.setText("收起");
          setExpand(true);
        }else{
          contentText.setMaxLines(showLines);
          textPlus.setText("全文");
          setExpand(false);
        }
        //通知外部状态已变更
        if(expandStatusListener != null){
          expandStatusListener.statusChange(isExpand());
        }
      }
    });
  }

  public void setText(final CharSequence content){

    //在开始绘制contentText内容时,进行监听
    contentText.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

      @Override
      public boolean onPreDraw() {
        // 避免重复监听
        contentText.getViewTreeObserver().removeOnPreDrawListener(this);
        //获取当前文本的行数
        int linCount = contentText.getLineCount();
        if(linCount > showLines){

          if(isExpand){
            contentText.setMaxLines(Integer.MAX_VALUE);
            textPlus.setText("收起");
          }else{
            contentText.setMaxLines(showLines);
            textPlus.setText("全文");
          }
          textPlus.setVisibility(View.VISIBLE);
        }else{
          textPlus.setVisibility(View.GONE);
        }
        return true;
      }

    });
    contentText.setText(content);
  }

  public void setExpand(boolean isExpand){
    this.isExpand = isExpand;
  }

  public boolean isExpand(){
    return this.isExpand;
  }

  public void setExpandStatusListener(ExpandStatusListener listener){
    this.expandStatusListener = listener;
  }

  public interface ExpandStatusListener{
    void statusChange(boolean isExpand);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    return textPlus.dispatchTouchEvent(event);
  }
}

2.相关布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

  <TextView
    android:id="@+id/contentText"
    android:textSize="18sp"
    android:textColor="#000000"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text=""/>

  <TextView
    android:id="@+id/textPlus"
    android:textSize="18sp"
    android:textColor="#666666"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:text=""/>

</LinearLayout>

3.自定义属性

<declare-styleable name="ExpandTextView">
    <attr name="showLines" format="integer"/>
</declare-styleable>

4.开始引用

<mo.yumf.com.myviews.ExpandTextView
    android:id="@+id/expandTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:showLines="4"/>

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

(0)

相关推荐

  • Android折叠式Toolbar使用完全解析(CollapsingToolbarLayout)

    简介 在各种不同的应用中,大家可能会经常见到这样一个效果:Toolbar是透明的,有着一个背景图片以及大标题,随着页面向上滑动,其标题逐渐缩放到Toolbar上,而背景图片则在滑动到一定程度后变成了Toolbar的颜色,这种效果也即是折叠式效果.其实这种效果在GitHub上面已经有很多开源库实现了,但是Google在其推出的Design Library库中也给出了一个这种控件,让我们很方便地实现了这种效果.这个控件是CollapsingToolbarLayout,它是一个增强型的FrameLay

  • Android中RecyclerView实现多级折叠列表效果(二)

    前言 在本文开始之前请大家先看一下这篇文章:http://www.jb51.net/article/113510.htm 上面的这篇文章是之前写的,里面发现有很多不好用地方,也学到些新姿势,改动了许多地方.下面来看看详细的介绍: 要点: 1.可以通过后台控制Item的展示. 2.TreeRecyclerAdapter,可以展开,折叠.多级展示 3.adapter可以使用装饰者模式进行扩展.支持EmptyAdapter.可以添加headview和footview 4.item的样式可以编写文档,t

  • Android中FoldingLayout折叠布局的用法及实战全攻略

    一.概述 无意中翻到的FoldingLayout的介绍的博客,以及github地址.感觉很nice呀,于是花了点时间研究以及编写,本篇博客将带大家从最基本的原理分析,一步一步的实现我们的FoldingLayout,当然了,如果你能力过硬,可以直接下载github上的代码进行学习. 博客基本分为以下几个部分: 1.Matrix的setPolyToPoly使用 2.在图片上使用渐变和阴影 3.初步的FoldingLayout的实现,完成图片的折叠显示(可控制折叠次数.包含阴影的绘制) 4.引入手势,

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

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

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

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

  • Android控件系列之TextView使用介绍

    学习目的: 1.了解在Android中如何使用TextView控件 2.掌握TextView控件重要属性 作用:TextView类似一般UI中的Label,TextBlock等控件,只是为了单纯的显示一行或多行文本 上图的XML布局如下: 复制代码 代码如下: <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_c

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

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

  • Android RichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)

    AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片的效果,采用插件化的框架,代码简单,可拓展性强. 基础框架包只有四个java文件, RichTextWrapper :TextView的包裹类,实现支持富文本,通过new RichTextWrapper(TextView v)来构造. RTMovementMethod: 继承自Android原生的LinkMovementMethod,重写onTouchEvent方法,优化了ClickSpan(

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

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

  • Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    前言 首先不得不吐槽一下产品,尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件,多好.三级,四级,听说还有六级的....这样丧心病狂的设计,后台也不好给数据吧. 先看看效果: 两级的效果: 三级的效果: 全部展开的效果(我只写了五级) 说说为什么写这货吧: 公司产品提出三级这个需求后,我就在网上找啊找. 找的第一个,发现实现其实是ExpandListview嵌套. 找的第二个,ExpandRecyclview,然后就用呗,发现三级展开很卡,看源码, 发现是RecyclerView

随机推荐