SpannableString 你应该知道的那些效果显示
来源:互联网 发布:打车软件数据库设计 编辑:程序博客网 时间:2024/05/17 09:25
一个人需要隐藏多少秘密才能巧妙地度过一生 — 仓央嘉措
前言
上次看到一款学习的 App
,有这样一个功能,在一个 TextView
中有一段英文,点击英文单词通过语音朗读出来。语音先不考虑,怎么去实现 TextView
点击获取每个单词的内容的呢?
肯定是用SpannableString
去实现的呗,不然你今天讲它干嘛。嘿嘿,我说的对不对?
答案是肯定的,由于惯性我们先来看看效果图:
我这里没有获取每个单词,而是获取的每段句子。效果图上也展示了一些其他的SpannableString
效果,大多数可能你已经见过了。那么你肯定会问SpannableString
是什么,SpannableString
是一种字符串类型,可以通过使用其方法setSpan
方法实现字符串各种形式风格的显示。
具体案例
setSpan
方法预览:
setSpan(Object what, int start, int end, int flags)
- what : 文本格式,可以设置成前景色,背景色,下划线,中划线,模糊等
- start : 字符串设置格式的起始下标
- end : 字符串设置格式结束下标
- flags : 标识
flags 常用的几种属性:
Spanned.SPAN_INCLUSIVE_EXCLUSIVE
从起始下标到结束下标,包括起始下标不包含结束坐标Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
从起始下标到结束下标,但都不包括起始下标和结束下标Spanned.SPAN_INCLUSIVE_INCLUSIVE
从起始下标到终了下标,同时包括起始下标和结束下标Spanned.SPAN_EXCLUSIVE_INCLUSIVE
从起始下标到终了下标,包括结束下标不包含起始坐标
TextView点击获取部分内容
首先我们先来看TextView
点击获取部分内容,对TextView
设置Spannable
,设置每段单词的响应方法getEachParagraph()
testText.setText(getResources().getString(R.string.text), TextView.BufferType.SPANNABLE); getEachParagraph(testText); testText.setMovementMethod(LinkMovementMethod.getInstance());
点击响应方法getEachParagraph()
:
//paragraphpublic void getEachParagraph(TextView textView) { Spannable spans = (Spannable) textView.getText(); Integer[] indices = getIndices( textView.getText().toString().trim(), ','); int start = 0; int end = 0; // recycle for (int i = 0; i <= indices.length; i++) { ClickableSpan clickSpan = getClickableSpan(); //setspan end = (i < indices.length ? indices[i] : spans.length()); spans.setSpan(clickSpan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); start = end + 1; } //改变选中文本的高亮颜色 textView.setHighlightColor(Color.BLUE);}//clickprivate ClickableSpan getClickableSpan() { return new ClickableSpan() { @Override public void onClick(View widget) { TextView tv = (TextView) widget; String s = tv .getText() .subSequence(tv.getSelectionStart(), tv.getSelectionEnd()).toString(); Log.e("onclick--:", s); } @Override public void updateDrawState(TextPaint ds) { ds.setColor(Color.BLACK); ds.setUnderlineText(false); } };}//arraypublic static Integer[] getIndices(String s, char c) { int pos = s.indexOf(c, 0); List<Integer> indices = new ArrayList<Integer>(); while (pos != -1) { indices.add(pos); pos = s.indexOf(c, pos + 1); } return (Integer[]) indices.toArray(new Integer[0]); }
首先将TextView
内容转换为Spannable
对象;然后通过getIndices
方法将文本内容通过字符c
获取每段索引数组;然后为每段添加ClickableSpan
;最后onClick
方法里面获取每段内容。
前景色ForegroundColorSpan
前景色等同于setTextColor
,具体实现如下:
SpannableString spannableString = new SpannableString("设置文字的前景色");ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);mTv.setText(spannableString);
看看效果展示:
起始下标包含5,结束下标spannableString
长度不包含。
背景色BackgroundColorSpan
背景色等同于setBackgroundColor
,具体实现如下:
SpannableString spannableString = new SpannableString("设置文字的背景色");BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
效果图展示:
RelativeSizeSpan
先来看看效果图:
我还清晰的记得刚开始做项目那会,做出这样的效果图需要2个TextView
,9月
一个;22日
一个,现在想想真憋屈,要是相对字体大小在文本中间我不是要3个TextView
,那真的要崩溃。
接着看看具体实现:
SpannableString spannableString = new SpannableString("9月22日"); RelativeSizeSpan sizeSpan = new RelativeSizeSpan(2.0f); spannableString.setSpan(sizeSpan, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTv.setText(spannableString);
中划线StrikethroughSpan
中划线用得比较多的就是过时的价格,看看它的具体实现:
方法一:
SpannableString spannableString = new SpannableString("我是文本中划线");StrikethroughSpan strikethroughSpan = new StrikethroughSpan();spannableString.setSpan(strikethroughSpan, 3, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
方法二:
mTv.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG); // 设置中划线并加清晰
我们可以通过调用mTv.getPaint().setFlags(0); // 取消设置的的划线
效果图登场:
下滑线UnderlineSpan
实现下滑线也有两种方法,同上:
方法一:
SpannableString spannableString = new SpannableString("我是文本下划线");UnderlineSpan underlineSpan = new UnderlineSpan();spannableString.setSpan(underlineSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
方法二:
mTv.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG); //下划线
效果图奉上:
上标SuperscriptSpan
上标加上前景色可以设计出未读消息效果,我们一起来看看它的实现:
SpannableString spannableString = new SpannableString("你有新消息了" + "●");SuperscriptSpan superscriptSpan = new SuperscriptSpan();ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#FF0000"));spannableString.setSpan(colorSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);spannableString.setSpan(superscriptSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
以前看看文本未读消息感觉很高大上,还在苦苦追寻是怎么实现的,其实它非常easy
下标还可以用于数学公式。
效果图:
下标SubscriptSpan
当然有了上标就会出现下标:
SpannableString spannableString = new SpannableString("注释1");SubscriptSpan subscriptSpan = new SubscriptSpan();spannableString.setSpan(subscriptSpan, 2, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
效果图:
设置风格(粗体、斜体)StyleSpan
直接上代码:
SpannableString spannableString = new SpannableString("为文字设置粗体,斜体风格");StyleSpan styleSpan_B = new StyleSpan(Typeface.BOLD);StyleSpan styleSpan_I = new StyleSpan(Typeface.ITALIC);spannableString.setSpan(styleSpan_B, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);spannableString.setSpan(styleSpan_I, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
效果图贴上:
ImageSpan
做过IM相关需求的童鞋,都对这个不会陌生,它的身影在聊天App
软件中随处可见:
SpannableString spannableString = new SpannableString("在文本中添加xx");Drawable drawable = getResources().getDrawable(R.drawable.mini_face_nine);int drawHeight = drawable.getMinimumHeight();drawable.setBounds(0, 0, drawHeight, drawHeight);ImageSpan imageSpan = new ImageSpan(drawable);spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
setBounds
方法设置图片的边框大小,使图片与文本居中对齐。
效果图一览:
ClickableSpan
从名字上就可以知道和点击响应相关的:
SpannableString spannableString = new SpannableString("为文字设置点击事件");spannableString.setSpan(new ClickableSpan() { @Override public void onClick(View view) { Snackbar.make(view, "你点击了我", Snackbar.LENGTH_SHORT).show(); Uri uri = Uri.parse("http://www.baidu.com"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); intent.putExtra(Browser.EXTRA_APPLICATION_ID, _mActivity.getPackageName()); try { _mActivity.startActivity(intent); } catch (ActivityNotFoundException e) { Log.e("--ClickableSpan--", "Actvity was not found for intent, " + intent.toString()); } } @Override public void updateDrawState(TextPaint ds) { ds.setColor(Color.parseColor("#abc123")); ds.setUnderlineText(true); }}, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setMovementMethod(LinkMovementMethod.getInstance());mTv.setHighlightColor(Color.parseColor("#abc123"));mTv.setText(spannableString);
为文本设置点击事件并且跳转网址。
效果图:
URLSpan
URLSpan
跳转网址:
SpannableString spannableString = new SpannableString("为文字设置超链接");URLSpan urlSpan = new URLSpan("http://www.baidu.com/");spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setMovementMethod(LinkMovementMethod.getInstance());mTv.setHighlightColor(Color.parseColor("#ff0000"));mTv.setText(spannableString);
效果图:
模糊BlurMaskFilter
比较简单的用法,直接上代码:
SpannableString spannableString = new SpannableString("为文字设置模糊");MaskFilterSpan maskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
构造方法:
BlurMaskFilter(float radius, Blur style)
- radius 模糊半径
- style 风格
style
为枚举类型:
BlurMaskFilter.Blur.NORMAL
默认类型,模糊内外边界
BlurMaskFilter.Blur.INNER
内部模糊
BlurMaskFilter.Blur.OUTER
外部模糊
BlurMaskFilter.Blur.SOLID
在边界内绘制固体,模糊
浮雕EmbossMaskFilter
SpannableString spannableString = new SpannableString("为文字设置浮雕");MaskFilterSpan maskFilterSpan = new MaskFilterSpan( new EmbossMaskFilter(new float[]{10, 10, 10}, 0.5f, 1f, 1f));spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
构造方法:
/** * Create an emboss maskfilter * * @param direction array of 3 scalars [x, y, z] specifying the direction of the light source * @param ambient 0...1 amount of ambient light * @param specular coefficient for specular highlights (e.g. 8) * @param blurRadius amount to blur before applying lighting (e.g. 3) * @return the emboss maskfilter */ public EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)
//direction 是float数组,定义长度为3的数组标量[x,y,z],来指定光源的方向
// ambient 取值在0到1之间,定义背景光 或者说是周围光
// specular 定义镜面反射系数。
// blurRadius 模糊半径。
效果图:
光栅LayerRasterizer
SpannableString spannableString = new SpannableString("为文字设置光栅");LayerRasterizer layerRasterizer = new LayerRasterizer();layerRasterizer.addLayer(new Paint(Color.CYAN), 10, 10);RasterizerSpan rasterizerSpan = new RasterizerSpan(layerRasterizer);spannableString.setSpan(rasterizerSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mTv.setText(spannableString);
addLayer
方法:
addLayer(Paint paint, float dx, float dy) //dx,dy便宜位置
效果图:
看了这么多效果,你应该知道的这些效果显示。
后续
String
有StringBuilder
用于字符串的拼接;那么SpannableString
也有SpannableStringBuilder
用于拼接SpannableString
,可以把各种风格效果拼接在一起。
当然文中有什么描述错误,不当的地方,还请指出,欢迎关注后续博客交流,谢谢大家。
尽请关注
- SpannableString 你应该知道的那些效果显示
- SpannableString 你应该知道的那些效果显示
- SpannableString 你应该知道的那些效果显示
- adb那些你应该知道的操作
- Fragment你应该知道的那些事
- 你应该知道的那些超时设置或默认参数
- 关于 MySQL 密码你应该知道的那些事
- 关于SQL注入,你应该知道的那些事
- 关于MySQL密码你应该知道的那些事
- 你应该知道的那些Android小经验
- 你应该知道的那些Android小经验 (转载)
- 你应该知道的那些Android小经验
- 你应该知道的那些Android小经验
- 你应该知道的那些Android小经验
- Android你应该知道的那些小经验
- 你应该知道的那些Android小经验
- 你应该知道的那些Android小经验
- 你应该知道的那些Android小经验
- 第十六周上机实践项目3(2):阅读程序
- gson转换list对象
- 洋葱炒肉
- 枚举把值放到map里
- Codeforces #353D (Div. 2) STL+数据结构性质
- SpannableString 你应该知道的那些效果显示
- Unity3D如何构造小地图
- 运算符重载的函数(3)
- 2-1什么是变量
- oracle之关于时间日期
- 第一节课
- 安卓中用按钮控制edittext是否可以输入,让editext显示效果变成textview。
- 分步骤实现操作
- 红烧萝卜