卫计网站建设工作总结,网站微信推广怎么做,衡水网站建设电话,alexa排名分析文章转自#xff1a;http://www.sohu.com/a/150059234_611601 本文作者CnPeng的博客地址#xff1a;
http://www.jianshu.com/p/2650357f7547
这个标题有点长#xff0c;乍一看这么个标题你可能没明白啥意思#xff0c;且听我慢慢道来。
公司的项目中新增了一个“心动”… 文章转自http://www.sohu.com/a/150059234_611601 本文作者CnPeng的博客地址
http://www.jianshu.com/p/2650357f7547
这个标题有点长乍一看这么个标题你可能没明白啥意思且听我慢慢道来。
公司的项目中新增了一个“心动” 的功能用户初次使用时需要给一个引导页就是下面图中的这个样子这就是做完之后的效果了。 在上图中整体实现的时候使用的是popUpWindow。
该popupWindow整体使用相对布局里面再用一个相对布局布局嵌套了三个TextView啊哦。。。。pass 用一个TextView中间灰色的上传头像的提示用了一个TextView底部“我知道了” 也是一个TextView。
上面的左划示意图使用above 放在 包含TextView的相对布局上方并通过负的margin值将它下移并覆盖在包含TextView相对布局上。
这个界面并没有什么难度这里重点说的是第一个TextView中的图文混排并让图片的横向中间线与该行文字的横向中间线对齐也就是说让文字与那个 图片的中间在水平方向对齐。
1
图文混排的方式有哪些
通常我们向TextView中插入图片实现图文混排有如下方式
1. 使用drawableLeft等属性设置这种方式对应的java方法是 setCompoundDrawablesWithIntrinsicBounds(leftDrawble,topDrawable,rightDrawable,bottomDrawable);
2. 使用 SpannableString ,先将图片转成ImageSpan对象然后通过setSpan插入到SpannableString 中最后再将SpannableString通过setText设置给TextView。SpannableString 继承自CharSquence
3. 此外还有一种利用Html.ImageGetter格式化图片的方式。截止目前为止我没用过这种方式如果想了解的话可以参考http://wangleyiang.iteye.com/blog/1771439中的第二点
2
使用SpannableStringImageSpan怎么实现图文混排
1基本实现方式
效果图如下 实现方式很简单我们只需要在xml布局文件中定义一个TextView然后在代码中获取该TextView并创建一个含有图片的SpannableString,并将该SpannableString通过setText( )设置给TextView即可。
代码如下 xml布局文件中只给了一个普通的TextView代码省略。
在上面的代码中我们通过ImageSpan的构造方法得到了一个ImageSpan对象。该构造方法中传入的两个参数分别是上下文和图片的id。imageSpan的构造方法还有很多
SpannbaleString的setSpan方法中传入的四个参数分别是 ImageSpan对象、将ImageSpan插入到的起始位置(start)、将ImageSpan插入到的终点位置(end)、是否应用字体样式。
具体将ImageSpan对象插入到哪个位置由第二个和第三个参数确定插入的时候会覆盖从 start 位置开始不包含该位置到终止位置间的内容包含该位置。
第四个参数是在你插入文本的时候使用的用来控制新插入的文本与已有文本内容的字体样式是否一致的如果你插入的是图片这里就可以随便选择一种模式。
经过上面虽然实现了图文混排但是细心的你可能发现了这时候的文字和图片是基于底部对齐的由于图片的原因图片底部与边框有一点点的间距。那么如果我想更改对齐方式怎么办呢
2更改图片与文本的对齐方式--ALIGN_BASELINE对齐
设置对齐方式的方法很简单在构造ImageSpan对象的时候传入第三个参数ALIGN_BASELINE 即可代码如下
ImageSpan imageSpan new ImageSpan(this, R.mipmap.ic_launcher, DynamicDrawableSpan.ALIGN_BASELINE);
设置对齐方式为ALIGN_BASELINE后的效果图 咦看着跟上面的图没啥区别啊那么我再把上面没设置对齐方式的图拉下来看下 仔细对比下我们发现设置对齐方式之后图往上跑了一点点。 其实在ImageSpan 中官方只给出了两中对齐方式 一种是 ALIGN_BOTTOM , 表示与文字内容的底部对齐如果在构造ImageSpan时没有传入对齐方式那么默认就是这种底部对齐。 另一中就是 ALIGN_BASELINE, 表示与文字内容的基线对齐。那么你可能会问我基线是啥请继续往下看 3
Paint.FontMetrics 是啥
1 Paint.FontMetrics基本介绍
要说基线呢我们先了解这个Paint.FontMetircs, 官方对该类的解释是Class that describes the various metrics for a font at a given text size., 意思是说这玩意儿是绘制文本内容时存储该文本内容位置信息的一个类。这个类中有如下五个字段 2 BaseLine 基线到底是啥
上图中这5个字段除了leading 外其他四个都是相对于 基线BaseLine来确定的那么到底啥是基线
先来看一张图 如上图标准的英文书写是基于四线三格其中我们书写英文的时候都是以第三条线为基准也就是说基线就是这个四线三格中的第三条线
3Paint.FontMetrics中字段的含义及示意图
官方文档中对这几个字段的解释很简单但理解起来挺费劲直接上图图中的标注都是跑代码之后确定的如果有不准确的地方欢迎指正 根据上图可知 ascent 文字内容的顶部到基线的距离。即 ascent文字内容顶部Y坐标 - 基线Y坐标。由于android中坐标系是 右下为正所以得到的ascent实际是一个负数。 descent 文字内容的底部到基线的距离。即 descent文字内容底部Y坐标 - 基线Y坐标。 基线 在图中基线的坐标用Y表示在ImageSpan父类的 draw( ) 中会传入一个 float Y ,就是这个基线的坐标。实际上基线的Y坐标文字内容中间线Y坐标1/2 文字内容高度 top 对应图中 文字所在行的top 坐标 bottom 对应图中 文字所在行的bottom 坐标 需要注意如果设置了行间距且文本内容产生了换行那么这个bottom 也会将行间距包裹。所以 图中蓝色的文字内容中间线的Y轴坐标并不一定等于 (bottomtop)/2
4
自定义ImageSpan实现文字与图片居中对齐
好了前面说了那么多终于进入正题了。。。
在上面的2 SpannableStringImageSpan实现图文混排中我们已经知道官方并没有给出文字与图片居中对齐的模式,所以需要我们自定义。
关于自定义ImageSpan的分析已经有前辈讲解过了此处不再赘述请参考http://blog.csdn.net/gaoyucindy/article/details/39473135。
但是按照该文章中的代码实现的时候有个问题就是如果给TextView设置了行间距且文本产生了换行那么就无法对齐了
那么设置了行间距之后该如何实现文本和图片的居中对齐呢也有前辈分析过了请看http://www.cnblogs.com/withwind318/p/5541267.html, 但是这篇文章中的实现方式没有重写 getSize( ) 方法所以也有一个问题文本和图片并不是在TextView的居中位置而且如果图片高于文本的话图片会显示不全如下图 参考了那么多了终于该给出我的终极方案了
根据上面链接中两位前辈的分析其实我们自定义的时候需要做的事情是 获取文本内容的中间线以及图片的中间线然后获取两者差值然后在draw方法中绘制图片时将差值作为canvas.translate(x, transY) 中的transY同时要重写 getSize( )。
这样最终实现的效果是不论是否设置行间距不论图片大于文本还是文本大于图片都能实现文本和图片的居中对齐
看最终效果图 上代码 在Activity中使用 xml布局文件 上面的已经是完整代码了如果想直接下载运行请到gitHub下载https://github.com/CnPeng/CrazyAndroid
该仓库中的b_01_spannableString_ImageSpan 对应该文中的内容
写在最后最近项目太紧了过了年一直在加班。这次的总结也很仓促本来想写的更细一些并且也想把SpannableString的使用完整总结but 时间太紧了先这样吧后面时间充足了再修正吧
欢迎各位指正文中错误的地方一起交流一起进步
参考链接 http://wangleyiang.iteye.com/blog/1771439 http://blog.csdn.net/gaoyucindy/article/details/39473135 http://www.cnblogs.com/withwind318/p/5541267.html http://stackoverflow.com/questions/27631736/meaning-of-top-ascentbaseline-descent-bottom-and-leading-in-androids-font https://github.com/GcsSloop/AndroidNote/blob/master/CustomView/Advance/%5B99%5DDrawText.md
