android图片底部居中对齐,Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)...
一. 概述
众所周知,Android图文混排可以通过SpannableString来实现,通过在相应位置使用ImageSpan替换即可,但是使用过的人会发现,imageSpan只提供了两种对齐方式,如下所示:
/** 底部对齐 */
public static final int ALIGN_BOTTOM = 0;
/** 基线对齐 */
public static final int ALIGN_BASELINE = 1;
但是在大多数时候,我们希望实现图片的中点和文字的中点对齐(视觉设计师肯定会给到这样的要求),那么该怎么办呢?
二. 图文混排,图片居中对齐方案
方案1:
一个比较简单解决方案就是让图片和文字的高度保持一致,这样就变相居中对齐了,那么有一些朋友为难了,视觉给的图片的高度比字体的高度小,这肿么办? 这个问题很好解决,让视觉给你切大一点的图片,即在原来的图片上多切一些透明的白边。(是不是恍然大悟?哈哈)
plus:图片比文字高的情况根本不需要居中对齐。
方案2:
程序员肯定有程序员的方案,那就是扩展继承ImageSpan,重写它的onDraw()方法。这个方案本人参考了网上的一些解决方案,但是都有局限性,有些方案只要设置的TextView行间距或者padding就不能正常工作了。
这篇博客的方案,在设置了行间距的时候,就出现问题了。但是这篇博客把字体绘制的原理说的很清楚了,建议大家先读这篇博客,再来理解本人的做法。
代码展示
好了,直接上代码,这是自定义ImageSpan的代码,非常少。主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话,先看上面那篇博客。
public class CenterAlignImageSpan extends ImageSpan {
public CenterAlignImageSpan(Drawable drawable) {
super(drawable);
}
public CenterAlignImageSpan(Bitmap b) {
super(b);
}
@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 b = getDrawable();
Paint.FontMetricsInt fm = paint.getFontMetricsInt();
int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
canvas.save();
canvas.translate(x, transY);//绘制图片位移一段距离
b.draw(canvas);
canvas.restore();
}
}
使用和运行效果
在布局文件里放置一个TextView,设置其行间距。
activity里的代码如下展示:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView tv = (TextView) findViewById(R.id.test);
SpannableString sp = new SpannableString("图文混排测排测试图文混排测试图文混排测试图文混排测试图");
//获取一张图片
Drawable drawable = getDrawable(R.drawable.star);
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
//居中对齐imageSpan
CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable);
sp.setSpan(imageSpan, 0, 1, ImageSpan.ALIGN_BASELINE);
//普通imageSpan 做对比
ImageSpan imageSpan2 = new ImageSpan(drawable);
sp.setSpan(imageSpan2, 3, 4, ImageSpan.ALIGN_BASELINE);
tv.setText(sp);
}
}
运行效果,第二张图片是普通的ImageSpan的效果,这里加入进来是做一个对比。
android图片底部居中对齐,Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)...相关推荐
- 【游戏开发实战】Unity UGUI Text图文混排(聊天文字混表情),支持动态表情,出招吧表情帝
文章目录 一.前言 二.最终效果 三.具体使用 1.导入表情素材 2.设置图片格式 3.生成表情图集 4.UI-EmojiFont.shader 5.材质球 四.测试 五.结束语 一.前言 点关注不迷 ...
- (一一二)图文混排中特殊文字的点击与事件处理
在上一篇文章(一一一)图文混排基础 -利用正则分割和拼接属性字符串中提到了对attributedText的特殊处理,将其中的话题.URL都用红色进行了表示,如下图所示: 本节要实现的功能是这样的att ...
- Android:仿小米便签,图文混排
经过两天的摸索,终于实现,现在贴出来,供自己学习记录及与小伙伴们交流分享 先看下效果图: (添加按钮,用于添加图片) 话不多说,小翠上代码: 1.布局文件: <RelativeLayout xm ...
- Android中文图混排时文图的居中对齐 FontMetrics以及自定义ImageSpan实现
文章转自:http://www.sohu.com/a/150059234_611601 本文作者CnPeng的博客地址: http://www.jianshu.com/p/2650357f7547 这 ...
- android 点击图片事件,android图文混排点击事件
图文混排顾名思义就是把文字和图片混合排列在一起,比较简单的需求我们也可以通过TextView和ImageView配合使用来达到目的,但是遇到稍微复杂一些的情况这种方法就不适用了. 做这样一个按钮: 对 ...
- android 实现表格横向混动_Android图文混排实现方式详解
在使用TextView的时候,我们经常需要在TextView中进行图文混排,比如在QQ中聊天的消息中的表情,底部tab图标等. 一.场景 二.实现方式 Android官方对TextView的图文混排提 ...
- TextView + Spanned实现图文混排以及图片点击交互
最近要实现图文混排的需求,webview过大,所以想到了用SpannableStringBuilder来实现. 不过参考了大量国内文章,大多数是教你如何实现图文混排,并没有提及图片点击交互的.有翻阅了 ...
- 03-CSS操作--CSS操作规范(书写技巧)+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中
一.CSS操作规范 1.CSS书写技巧 (1)最外层是一个<div id="bigDiv">,将所有元素都包进去 (2)去除<body>的外边距(body{ ...
- TextView图文混排
大家都知道,textView有一个setCompoundDrawables的方法来设置上下左右位置的图标,当然,也可以在xml布局文件中设置,然而问题来了,假如我们把图标放在左边,当我们让TextVi ...
- unity 图文混排方案
在我们工作中,可能经常有这样的需求,就是需要图文混排,因为这个对于原生或web都是比较容易的事情.但是我们用unity的话,首先unity最开始只想做纯游戏侧的引擎,一开始甚至还没有一个商业化的ui工 ...
最新文章
- time 和 datetime 模块
- 图解Win7下安装Oracle 12c
- 算法训练 猴子分苹果c语言,算法训练 猴子分苹果
- 随机值获取—random
- 为什么我们总是忍不住要刷微信?
- 县级的图书馆计算机管理员,图书馆管理员的岗位职责
- php获取外部URL,使用PHP从外部API / URL获取信息
- C--计算求1+2!+3!+.......+n!
- IDEA 导入项目中文注释乱码解决
- 管理好项目——带好技术团队的秘籍
- RedHat6.6安装thefuck工具,自动纠正错误命令
- 查看计算机当前用户的sid,查看SID
- Locale类的详细解析
- 计算机科学中透明性概念,函数式编程 - 什么是参考透明度?
- 龙芯2号处理器,龙芯2K1000芯片参数
- c语言程序中x>>=1是什么意思??
- 「跳一跳」两年后,广告“杀死”游戏小程序?
- P5021 赛道修建
- oracle 的SGA与PGA分析
- react - 颜色选择器
热门文章
- Windows Phone实用开发技巧(33):不重启程序切换当前语言
- 思科路由器常用配置命令大全
- 关于定时器setInterval()累加或者是重叠的问题
- python爬取京东商品价格教科书中文版_基于Python爬取京东双十一商品价格曲线
- 在线qmc0转换mp3工具_音乐格式转换
- 队列与栈(Queue,Deque,Stack)
- 移植php,PHP交叉编译和移植
- mysql优化 知乎_MYSQL优化
- 故障排查 node_Kubernetes 故障解决心得(一)
- Introduction to Computer Networking学习笔记(九):error detection 错误探查 Checksum、CRC、MAC