一个简单的Android富文本TextView实现-阿里云开发者社区

开发者社区> 技术小胖子> 正文

一个简单的Android富文本TextView实现

简介:
+关注继续查看

Android客户端富文本

现阶段问题

在Android客户端展现一个普通数据非常的方便,直接调用textview.setText()方法,但是当TextView比较复杂时(例如存在@用户,##话题,部分字符样式、网址链接等),普通的TextView就无法完成需求,需要自己封装一个富文本TextView。

Demo

Coding 冒泡示例

 

##

分析

1.一个TextView中不同类别的信息,需要由不同样式的显示,一般的用法textview.setTextColor(color)会将所有的文字变成同一种颜色,这显然是不符合要求的。为了实现这一个需求,我们将会用到SpannableStringBuilder这个类。

预备知识

SpannableStringBuilder:

基本概念

SpannableStringBuilder 和 StringBuilder类似,都可以存储字符串,不同的是SpannableStringBuilder有一个setSpan()函数,可以给存储的String添加不同的样式。如加下划线、背景色、字体颜色、字体大小等。

另外需要注意的是,当SpannableStringBuilder中存储了一个有样式的String,当把spannableStringBuilder展示在TextView、EditTextView中时,能显示这些样式;当展示在canvas上时,因为Canvas不支持SpannableStringBuilder的额外信息,所以会退化成一个普通的String,不显示样式信息。

setSpan()函数

void setSpan(Object what,int startIndex,int endIndex,int flag);

说明:

参数

说明

Object what

设置Span样式

int startIndex

样式开始的Index

int endIndex

样式结束的Index

int flag

新插入字符的样式设置

注意点:

  1. endIndex:字体样式结束的Index,该Index对应的字符不使用样式,比如有一个字符串为s = “abcd”,s.setSpan(span,0,2,flag),此时第0、1个字符ab使用了样式span,endIndex对应的字符c不使用。
  2. flag:取值如下

取值

说明

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE

前后都不包括,即在指定范围的前面和后面插入新字符都不会应用新样式

Spannable.SPAN_EXCLUSIVE_INCLUSIVE

前面不包括,后面包括。即仅在范围字符的后面插入新字符时会应用新样式

Spannable.SPAN_INCLUSIVE_EXCLUSIVE

前面包括,后面不包括。

Spannable.SPAN_INCLUSIVE_INCLUSIVE

前后都包括

简单示例

1

2

3

4

5

6

//设置字体颜色

textview1 = (TextView) findViewById(R.id.text1);

SpannableStringBuilder spannableStringBuilder1 = newSpannableStringBuilder("Android");

ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.BLUE);

spannableStringBuilder1.setSpan(foregroundColorSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview1.setText(spannableStringBuilder1);

效果:

 

多种Span

由以上的简单示例我们可以看出,设置一个样式的一般步骤是:

  1. 构造一个SpannableStringBuilder
  2. 构造一个Span,并设置在SpannableStringBuilder上
  3. 将SpannableStringBuilder绑定在TextView上展示

设置字体颜色

这个已经在简单示例中展示

设置字体背景颜色

1

2

3

4

5

6

//设置字体背景颜色

textview2 = (TextView) findViewById(R.id.text2);

SpannableStringBuilder spannableStringBuilder2 = newSpannableStringBuilder("Android");

BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.RED);

spannableStringBuilder2.setSpan(backgroundColorSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview2.setText(spannableStringBuilder2);

效果:

 

设置字体大小

1

2

3

4

5

6

//设置字体大小

textview3 = (TextView) findViewById(R.id.text3);

SpannableStringBuilder spannableStringBuilder3 = newSpannableStringBuilder("Android");

AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(30);

spannableStringBuilder3.setSpan(absoluteSizeSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview3.setText(spannableStringBuilder3);

效果:

 

设置字体

1

2

3

4

5

6

//设置字体(加粗斜体)

textview4 = (TextView) findViewById(R.id.text4);

SpannableStringBuilder spannableStringBuilder4 = newSpannableStringBuilder("Android");

StyleSpan styleSpan = new StyleSpan(Typeface.BOLD_ITALIC);

spannableStringBuilder4.setSpan(styleSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview4.setText(spannableStringBuilder4);

效果:

 

设置下划线

1

2

3

4

5

6

//设置下划线

textview5 = (TextView) findViewById(R.id.text5);

SpannableStringBuilder spannableStringBuilder5 = newSpannableStringBuilder("Android");

UnderlineSpan underlineSpan = new UnderlineSpan();

spannableStringBuilder5.setSpan(underlineSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview5.setText(spannableStringBuilder5);

效果:

 

设置下划线

1

2

3

4

5

6

//设置删除线

textview6 = (TextView) findViewById(R.id.text6);

SpannableStringBuilder spannableStringBuilder6 = newSpannableStringBuilder("Android");

StrikethroughSpan strikethroughSpan = new StrikethroughSpan();

spannableStringBuilder6.setSpan(strikethroughSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview6.setText(spannableStringBuilder6);

效果:

 

设置多种样式

除了设置一个样式以外,SpannableStringBuilder还支持设置多个样式。

1

2

3

4

5

6

7

8

9

//设置多种样式

textview7 = (TextView) findViewById(R.id.text7);

SpannableStringBuilder spannableStringBuilder7 = newSpannableStringBuilder("Android");

spannableStringBuilder7.setSpan(foregroundColorSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

spannableStringBuilder7.setSpan(backgroundColorSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

spannableStringBuilder7.setSpan(underlineSpan, 03, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

spannableStringBuilder7.setSpan(absoluteSizeSpan, 36, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

spannableStringBuilder7.setSpan(strikethroughSpan, 36, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

textview7.setText(spannableStringBuilder7);

 

效果:

 

点击事件

实例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

SpannableStringBuilder spannableStringBuilder = newSpannableStringBuilder("Android");

 

spannableStringBuilder.setSpan(

    new ClickableSpan() {

        @Override

        public void onClick(View widget) {

            //do something

        }

 

        @Override

        public void updateDrawState(TextPaint ds) {

            //设置一些样式

            //ds.setUnderlineText(false);

            //ds.setColor(color);

        }

    }, startIndex, endIndex,

    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE

);

 

简单实现

    1. 以Listview为例,我们需要实现的是每一个Item和Adapter中的getView()函数。
    2. 布局文件
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  •     android:layout_width="match_parent" android:layout_height="wrap_content">
  •     <ImageView
  •         android:layout_width="wrap_content"
  •         android:layout_height="wrap_content"
  •         android:src="@mipmap/ic_launcher"
  •         android:layout_marginTop="16dp"
  •         android:layout_marginLeft="16dp"
  •         android:id="@+id/userhead"/>
  •     <TextView
  •         android:layout_width="match_parent"
  •         android:layout_height="wrap_content"
  •         android:layout_marginTop="16dp"
  •         android:layout_marginLeft="8dp"
  •         android:layout_marginRight="16dp"
  •         android:layout_toRightOf="@id/userhead"
  •         android:id="@+id/content"/>
  • </RelativeLayout>

ImageView表示该Item的发布人,和富文本没有关系,在Demo中直接写死数据。

主要内容在TextView中

    1. 因为每一个TextView中可能有多个不同样式的文本(#话题#,@其他用户,文本内容等),所以先封装一个文本类:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • public class TextObject {
  •     private int mStartIndex;//样式的开始字符
  •     private int mEndIndex;//结束字符
  •     //private SpannableStringBuilder mSpannableStringBuilder;
  •     private String content;//文本内容
  •     private int mOptionType;//操作符
  •     private int color;//字体颜色
  •     private boolean isUnderline;//是否有下划线
  •     //...其他需要的属性可继承TextObject自行添加
  •   }

这个类封装的是一个Item中的某一个文本样式,所以我们还需要封装一个Item中的文本类:

1

2

3

4

5

6

public class Content {

 

    private List<TextObject> mList;

 

    private SpannableStringBuilder mSpannableStringBuilder;

  }

 

这个类中有一个List成员变量,存放着该Item中所有的样式文本。

对于成员变量SpannableStringBuilder,有一个init函数,用于根据List中的TextObject拼接StringBuilder

1

2

3

4

5

6

7

8

9

//拼接SpannableStringBuilder

public void initStringBuilder(){

 

    SpannableStringBuilder spannableStringBuilder = newSpannableStringBuilder();

    for (int i = 0;i<mList.size();i++){

        spannableStringBuilder.append(mList.get(i).getContent());

    }

    setmSpannableStringBuilder(spannableStringBuilder);

}

 

到现在,数据准备工作已经全部完成,现在就要显示这些数据了。

  1. getView()函数

getview函数中就可以通过content.getSpannableStringBuilder()函数获取到正文内容,然后即可根据上面的预备知识对其进行设置不同的样式和点击事件。

设置完成后,需要调用

1

viewHolder.textview.setMovementMethod(LinkMovementMethod.getInstance());

 

使其响应点击事件。

Demo效果:

 

Demo地址

Github项目地址




    本文转自 一点点征服   博客园博客,原文链接:http://www.cnblogs.com/ldq2016/p/6122393.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单
<div class="markdown_views"> <h1 id="android特效专辑十点击水波纹效果实现逻辑清晰实现简单">Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单</h1> <hr> <blockquote> <p>这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度
1936 0
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版
描述:         之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的;         最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发;         APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来。
2541 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11605 0
安卓开发学习笔记(五):史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法
一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: 1 2 10 15 可以看到,这里我们使用了现行布局以及WebView控件,tools:context=".SecondActivity"告诉我们这个控件是定义在第二个主活动当中的。
1001 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7361 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载