Android TextView实现点击显示全文与隐藏功能(附源码)

 更新时间:2017年03月04日 09:50:44   作者:Tim Qi  
TextView用法很多,用到的地方更是普遍,所以学好TextView的使用很重要很重要很重要。下面这篇文章主要介绍了Android中TextView实现显示全文与隐藏功能的相关资料,文中给出了详细的示例代码和源码下载,需要的朋友可以参考下。

前言

相信大家在日常开发的时候,经常会遇到大段文本需要部分展示的场景,通常的做法是在隐藏的状态下文本末尾加上「显示全文」,在展开的状态下文本末尾加上「隐藏」来控制文本的展示状态。这个交互可能有很多种实现方法,本文则以一个简单的 TextView 来实现这些交互,封装后的 CollapsiableTextView 仅增加了不到 70 个额外的方法数。

参数定义

如上图效果,我们需要使用到几个可配置的参数:

<declare-styleablename="CollapsibleTextView">
 <attrname="suffixColor"format="color"/>
 <attrname="collapsedLines"format="integer"/>
 <attrname="collapsedText"format="string"/>
 <attrname="expandedText"format="string"/>
 <attrname="suffixTrigger"format="boolean"/>
</declare-styleable>

这几个参数分别表示

  1. 后缀颜色,也就是「显示全文」,「隐藏」这几个字的颜色
  2. 折叠后显示几行文字
  3. 折叠后的后缀文字,也就是「显示全文」
  4. 展开后的后缀文字,也就是「隐藏」
  5. 隐藏与展示的触发事件是点击后缀还是整个 TextView

主要的构造函数如:

publicCollapsibleTextView(Context context, AttributeSet attrs,intdefStyleAttr){
 super(context, attrs, defStyleAttr);
 TypedArray attributes = context.getTheme()
 .obtainStyledAttributes(attrs, R.styleable.CollapsibleTextView, defStyleAttr, 0);

 mSuffixColor = attributes.getColor(R.styleable.CollapsibleTextView_suffixColor, 0xff0000ff);
 mCollapsedLines = attributes.getInt(R.styleable.CollapsibleTextView_collapsedLines, 1);
 mCollapsedText = attributes.getString(R.styleable.CollapsibleTextView_collapsedText);
 if (TextUtils.isEmpty(mCollapsedText)) mCollapsedText = " Show All";
 mExpandedText = attributes.getString(R.styleable.CollapsibleTextView_expandedText);
 if (TextUtils.isEmpty(mExpandedText)) mExpandedText = " Hide";
 mSuffixTrigger = attributes.getBoolean(R.styleable.CollapsibleTextView_suffixTrigger, false);

 this.mText = getText() == null ? null : getText().toString();
 setMovementMethod(LinkMovementMethod.getInstance());
 super.setOnClickListener(mClickListener);
}

代理 onClick 事件

为了配置是否由后缀触发显示与隐藏操作,我们要在 CollapsibleTextView 中处理点击事件。所以在构造函数中设置 clickListener 为 mClickListener。同时在 mClickListener 中处理点击事件:

private OnClickListener mClickListener = new OnClickListener() {
 @Override
 publicvoidonClick(View v){
 if (!mSuffixTrigger) {
 mExpanded = !mExpanded;
 applyState(mExpanded);
 }

 if (mCustomClickListener != null) {
 mCustomClickListener.onClick(v);
 }
 }
};

为了用户仍可以设置 clickListener 我们重写 setOnClickListener 方法,并保留 clickListener 为 mCustomClickListener:

@Override
publicvoidsetOnClickListener(OnClickListener l){
 mCustomClickListener = l;
}

这样就将 click 事件代理到了 CollapsibleTextView 内部。

ClickableSpan 处理部分文本点击

为了能够监听后缀的点击事件,需要使用 ClickableSpan

str.setSpan(mClickSpanListener,
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);

// ClickableSpan
private ClickableSpan mClickSpanListener
 = new ClickableSpan() {
 @Override
 publicvoidonClick(View widget){
 if (mSuffixTrigger) {
 mExpanded = !mExpanded;
 applyState(mExpanded);
 }
 }

 @Override
 publicvoidupdateDrawState(TextPaint ds){
 super.updateDrawState(ds);
 ds.setUnderlineText(false);
 }
};

根据状态计算出 SpannableString

privatevoidapplyState(booleanexpanded){
 if (TextUtils.isEmpty(mText)) return;

 String note = mText, suffix;
 if (expanded) {
 suffix = mExpandedText;
 } else {
 if (mCollapsedLines - 1 < 0) {
 throw new RuntimeException("CollapsedLines must equal or greater than 1");
 }
 int lineEnd = getLayout().getLineEnd(mCollapsedLines - 1);
 suffix = mCollapsedText;
 int newEnd = lineEnd - suffix.length() - 1;
 int end = newEnd > 0 ? newEnd : lineEnd;

 TextPaint paint = getPaint();
 int maxWidth = mCollapsedLines * (getMeasuredWidth() - getPaddingLeft() - getPaddingRight());
 while (paint.measureText(note.substring(0, end) + suffix) > maxWidth)
 end--;
 note = note.substring(0, end);
 }

 final SpannableString str = new SpannableString(note + suffix);
 if (mSuffixTrigger) {
 str.setSpan(mClickSpanListener,
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
 }
 str.setSpan(new ForegroundColorSpan(mSuffixColor),
 note.length(),
 note.length() + suffix.length(),
 SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
 post(new Runnable() {
 @Override
 publicvoidrun(){
 setText(str);
 }
 });
}

其中 paint.measureText 可以测量出文本布局的宽度从而得只文本行数并与 mCollapsedLines 比较裁剪出合适的字符长度并添加上后缀与 span 赋予 TextView 即可

由于 getLineEnd 等函数只有在 layout 过程之后值才有意义,所以要合理的选择 applyState 的时机:

@Override
protectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){
 super.onLayout(changed, left, top, right, bottom);
 if (mShouldInitLayout && getLineCount() > mCollapsedLines) {
 mShouldInitLayout = false;
 applyState(mExpanded);
 }
}

至此 CollapsibleTextView 的要点已经完成,添加上 getter,setter 函数与一些逻辑组织即可

源码下载:点击这里

总结

以上就是这篇文章的全部内容了,希望本文的内容对给我Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Android绘制双折线图的方法

    Android绘制双折线图的方法

    这篇文章主要为大家详细介绍了Android绘制双折线图的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Android中ScrollView监听滑动距离案例讲解

    Android中ScrollView监听滑动距离案例讲解

    这篇文章主要介绍了Android中ScrollView监听滑动距离案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • Android中利用ViewHolder优化自定义Adapter的写法(必看)

    Android中利用ViewHolder优化自定义Adapter的写法(必看)

    下面小编就为大家带来一篇Android中利用ViewHolder优化自定义Adapter的写法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Android MaterialAlertDialogBuilder修改按钮属性

    Android MaterialAlertDialogBuilder修改按钮属性

    这篇文章主要介绍了Android MaterialAlertDialogBuilder修改按钮属性实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android开发笔记之Android中数据的存储方式(二)

    Android开发笔记之Android中数据的存储方式(二)

    我们在实际开发中,有的时候需要储存或者备份比较复杂的数据。这些数据的特点是,内容多、结构大,比如短信备份等,通过本文给大家介绍Android开发笔记之Android中数据的存储方式(二),对android数据存储方式相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Android使用socket创建简单TCP连接的方法

    Android使用socket创建简单TCP连接的方法

    这篇文章主要介绍了Android使用socket创建简单TCP连接的方法,结合实例形式详细分析了Android使用socket创建TCP连接的具体步骤与实现技巧,需要的朋友可以参考下
    2016-04-04
  • Android开发之使用GridView展示图片的方法

    Android开发之使用GridView展示图片的方法

    这篇文章主要介绍了Android开发之使用GridView展示图片的方法,涉及Android使用GridView操作图片的布局与图片调用功能实现技巧,需要的朋友可以参考下
    2016-01-01
  • Android多种支付方式的实现示例

    Android多种支付方式的实现示例

    App的支付流程,添加多种支付方式,不同的支付方式,对应的操作不一样,有的会跳转到一个新的webview,有的会调用系统浏览器,有的会进去一个新的表单页面,等等,本文就给大家详细介绍一下Android 多种支付方式的优雅实现,需要的朋友可以参考下
    2023-09-09
  • Android隐藏顶部状态栏所遇到的问题

    Android隐藏顶部状态栏所遇到的问题

    本文给大家分享两种隐藏状态栏的方法及在实现的过程中遇到的坑,下面在本文中给大家做个总结,希望对大家学习android顶部状态栏知识有所帮助
    2016-11-11
  • Android实现阿里云oss上传流程解析

    Android实现阿里云oss上传流程解析

    这篇文章主要介绍了Android实现阿里云oss上传流程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09

最新评论