android多媒体图文混排,干货!!!Android富文本实现图文混排
效果图
rich.jpg
像图中的效果,大家在开发并不少见,大家可能不知道android提供了实现图文混排的类。大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标。
android提供了这两个类SpannableString和SpannableStringBuilder实现图文混排
SpannableString其实和String一样,都是一种字符串类型,SpannableString可以直接作为TextView的显示文本,不同的是SpannableString可以通过使用其方法setSpan方法实现字符串各种形式风格的显示,重要的是可以指定设置的区间,也就是为字符串指定下标区间内的子字符串设置格式。
SpannableStringBuilder应该开发的小伙伴知道StringBuilder,可以使用append()方法实现字符串拼接,非常方便。同样,SpannableString中也有SpannableStringBuilder,顾名思义,就是实现对,SpannableString的一个拼接效果,同样是append()方法,可以实现各种风格效果的SpannableString拼接,非常实用。
SpannableStringBuilder和SpannableString主要通过使用setSpan(Object what, int start, int end, int flags)改变文本样式。 对应的参数:
start:指定Span的开始位置
end:指定Span的结束位置,并不包括这个位置。
flags:取值有如下四个
Spannable.SPAN_EXCLUSIVE_INCLUSIVE:在 Span前面输入的字符不应用 Span的效果,在后面输入的字符应用Span效果。
Spannable.SPAN_INCLUSIVE_EXCLUSIVE:在 Span前面输入的字符应用 Span 的效果,在后面输入的字符不应用Span效果。
Spannable.SPAN_INCUJSIVE_INCLUSIVE:在 Span前后输入的字符都应用 Span 的效果。
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE:前后都不包括。
what: 对应的各种Span,不同的Span对应不同的样式。已知的可用类有:
BackgroundColorSpan : 文本背景色
ForegroundColorSpan : 文本颜色
MaskFilterSpan : 修饰效果,如模糊(BlurMaskFilter)浮雕
RasterizerSpan : 光栅效果
StrikethroughSpan : 删除线
SuggestionSpan : 相当于占位符
UnderlineSpan : 下划线
AbsoluteSizeSpan : 文本字体(绝对大小)
DynamicDrawableSpan : 设置图片,基于文本基线或底部对齐。
ImageSpan : 图片
RelativeSizeSpan : 相对大小(文本字体)
ScaleXSpan : 基于x轴缩放
StyleSpan : 字体样式:粗体、斜体等
SubscriptSpan : 下标(数学公式会用到)
SuperscriptSpan : 上标(数学公式会用到)
TextAppearanceSpan : 文本外貌(包括字体、大小、样式和颜色)
TypefaceSpan : 文本字体
URLSpan : 文本超链接
ClickableSpan : 点击事件
解释了这么多,看代码怎么实现吧,其实很简单!
第一行文字的效果代码
String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
//第一个参数drawable 第二个参数对齐方式
ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mIconSpan.setText(spannable);
第二行文字的效果代码
String text = "[icon] ";
SpannableStringBuilder spannable = new SpannableStringBuilder(text);
Drawable drawable1 = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable1.setBounds(0, 0, drawable1.getIntrinsicWidth(), drawable1.getIntrinsicHeight());
ImageSpan imageSpan1 = new ImageSpan(drawable1, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan1, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
//追加一个icon
spannable.append("[icon] " + charSequence);
Drawable drawable2this.getResources().getDrawable(R.mipmap.umeng_socialize_wechat);
drawable2.setBounds(0, 0, drawable2.getIntrinsicWidth(), drawable1.getIntrinsicHeight());
ImageSpan imageSpan2 = new ImageSpan(drawable2, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan2, 7, 13, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mMultiIconSpan.setText(spannable);
小编写到这里的时候,看下了运行的结果,发现图片怎么不居中呀,真正开发中,这种效果是不可取的。百度了下一下主要看这样一行代码客mageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE); ImageSpan.ALIGN_BASELINE是指以文字的基线对齐
/**
* A constant indicating that the bottom of this span should be aligned
* with the bottom of the surrounding text, i.e., at the same level as the
* lowest descender in the text.
*/
public static final int ALIGN_BOTTOM = 0;
/**
* A constant indicating that the bottom of this span should be aligned
* with the baseline of the surrounding text.
*/
public static final int ALIGN_BASELINE = 1;
点击进去看下源码的解释,原来ALIGN_BOTTOM是以文字的底部对齐 ,ALIGN_BASELINE是以文字的基线对齐,看到这里也知道图片为什么不居中了。还不懂的推荐大家看两篇博客https://blog.csdn.net/richardli1228/article/details/51180253
https://blog.csdn.net/u012551350/article/details/51361778
这两篇文篇很详细的说明了怎么绘制文本和文本的基线是怎么计算的?
**如果要实现图片居中,怎么办?我们把图片在Y轴的方向往下移动一段距离,自定义一个CenterAlignImageSpan继承ImageSpan **
public class CenterAlignImageSpan extends ImageSpan {
public CenterAlignImageSpan(Drawable d) {
super(d);
}
public CenterAlignImageSpan(Drawable d, int verticalAlignment) {
super(d, verticalAlignment);
}
@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
@NonNull Paint paint) {
Drawable drawable = getDrawable();
Paint.FontMetricsInt fm = paint.getFontMetricsInt();
//计算y方向的位移
int translationY = (y + fm.descent + y + fm.ascent) / 2 - drawable.getBounds().bottom / 2;
canvas.save();
//绘制图片位移一段距离
canvas.translate(x, translationY);
drawable.draw(canvas);
canvas.restore();
}
}
主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话,先看上面的两篇博客。
第三行文字的效果代码
String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qzone);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
//图片居中
CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mVerticalCenterIcon.setText(spannable);
有时候在开发中需要给一些的特殊的文字,设置一些超链接,颜色,背景色等等。
第四行文字的效果代码
SpannableString spannableString = new SpannableString(charSequence);
//URLSpan
URLSpan urlSpan = new URLSpan("https://www.jianshu.com/u/9006081639f4");
spannableString.setSpan(urlSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mUrlSpan.setMovementMethod(LinkMovementMethod.getInstance());
mUrlSpan.setHighlightColor(ContextCompat.getColor(this, R.color.colorAccent));
mUrlSpan.setText(spannableString);
第五行文字的效果代码
SpannableString spannableString = new SpannableString(charSequence);
//ForegroundColorSpan
ForegroundColorSpan colorSpan = new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorPrimaryDark));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mForegroundColorSpan.setText(spannableString);
写了这么几个例子,相信大家对图片混排很清楚了,至于一些其它的文字的特性效果,需要大家去扩展了,比如文字的模糊、字体的样式、图片在文字的中间或者右边等等。
android多媒体图文混排,干货!!!Android富文本实现图文混排相关推荐
- Android 富文本编辑器 图文混排
富文本编辑器,如图: Android 富文本编辑器实现思路: 默认状态下编辑器显示一个EditText,点击图片,选择插入本地图片或者拍照图片. 插入图片时,如果当前位置后面没有文字,则直接插入 ...
- Android多媒体学习五:调用Android自带的播放器播放Audio
Android有其自带的播放器,我们可以使用隐式Intent来调用它:通过传入一个Action为ACTION_VIEW同时,指定Data为所要播放的Audio的Uri对象,并指定格式信息,则我们就可以 ...
- word、wps图文复制一键粘贴到富文本编辑器
从word.wps里图文复制粘贴到如tinymce.ckeditor.ueditor等富文本编辑器里,file:///C:/Users/lifuhai/AppData/Local/Temp/ksoht ...
- Android多媒体学习八:调用Android自带的音频录制程序,实现录制
Android中有自带的音频录制程序,我们可以通过指定一个Action为MediaStore.Audio.Media.RECORD_SOUND_ACTION的Intent来 启动它就可以了.然后在on ...
- android富文本的应用之草稿箱
富文本(也就是我们常常说到的图文混排)经常在我们做app应用的时候要求做到这个功能. 比如说, 做一个论坛的app时候我们需要发帖,而发帖就要求我们做到图片和文字一起展示,发送到服务器中去, 做某些记 ...
- android拓展笔记本,有道笔记Android版上线,拓展移动终端产品布局
在大家的翘首企盼下,有道笔记Android版今天终于上线了!广大G粉从今天起也可以在Android系统手机上使用有道笔记获得高效的个人知识管理体验. 有道笔记Android版拥有和桌面版.网页版一致的 ...
- 真·富文本编辑器的演进之路-Span开胃菜
Span的基础性概念分析 国际惯例,官网镇楼,这是对Span最好的全局概览. https://developer.android.com/guide/topics/text/spans Span种类 ...
- 真·富文本编辑器的演进之路
Span的基础性概念分析 国际惯例,官网镇楼,这是对Span最好的全局概览. https://developer.android.com/guide/topics/text/spans Span种类 ...
- 两文本一图片android,Android富文本编辑器(二):图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...
最新文章
- 初版python计算器
- NE 题库 38个知识点总结
- QTP 中 通过 Test Setting 设置 function libraries 与 test 的关联
- 四.Android adb命令(持续更新...)
- HDU (1575)Tr A ---矩阵快速幂
- matlab guide对话框+滑动条+弹出式菜单+列表框的使用
- I - Defeat the Enemy UVALive - 7146 二分 + 贪心
- 怎么修改html游戏存档,星露谷物语存档修改图文教程 怎么修改游戏数据
- 基于uFUN开发板的RGB调色板
- 搭建SSM全流程框架过程
- 数据结构与算法分析(三)——二项队列
- 如何在线倍速观看百度网盘学习视频并快速做笔记
- 如何让Low Poly好看
- wpf 修改输入框 光标_WPF中鼠标光标的设置
- 算法篇:最长公共子串(牛客)
- html5怎么把图片置顶,html/css如何让图片上下居中(居中垂直)?
- 如何选择适合你的兴趣爱好(五十四),硬笔书法
- 乌云章华鹏:如何构建高效的安全运维服务平台
- [归并排序]leetcode327:区间和的个数(hard)
- 激光 pm2.5传感器 攀藤科技 stm32 调试通过
热门文章
- 特斯拉超级计算机Dojo
- 管理多供应商物联网项目的10个关键步骤
- Kafka入门教程与详解
- CSS Modules
- 中国矿业大学计算机学院机房,2020年中国矿业大学计算机学院初试自命题科目考试大纲-数据结构...
- java程序语句是_Java-语言编程
- Android Handler sendMessage和 sendMessageDelayed的使用
- Android RecyclerView(和SnapHelper) 实现类似ViewPager的效果
- linux kill命令
- IPv6地址分类及表示方法