【Android 技术难点突破】要想实现图文混排时，你会怎么做？来来来，看Colin怎么做

为什么要研究图文混排呢？因为在新一期的需求中，有这样一个需求：希望在产品大标题后面追加“钻级标识”，并且在“游学产品”的大标题后面追加“金牌银牌登记标识”。具体效果可以看下面的截图。

  

如图，要实现这样的效果，你第一反应是采取什么样的方案呢？

我这边脑海里首先想到的就是自定义View了，想到要把TextView和ImageView杂糅到一起，我这就很恼火。

1.

在经过仔细研究后，我想到了用iconfont来实现。

只要把“钻级标识”追加到文本后面，并给“钻级标识”设置成黄色，大小设置小一些就行了。具体实现如下所示。

 

SpannableString spannableString = new SpannableString(titleAndMore); spannableString = new SpannableString(titleAndMore);

//设置颜色 
spannableString.setSpan(new ForegroundColorSpan(context.getResources().getColor(R.color.cttour_blue_independent_travel_yellow)), titleAndMore.indexOf(" ") + 1, titleAndMore.indexOf(" ") + diamonds.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

//设置大小 
spannableString.setSpan(new AbsoluteSizeSpan(CommonUtil.sp2px(context, 12f)), titleAndMore.indexOf(" ") + 1, titleAndMore.indexOf(" ") + diamonds.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                    bigTitle.setText(spannableString);

 

当然，这里还需要给textView设置iconfont字体。

 

2.

至于要把图片添加到文字后面该怎么实现呢？这里不能把图片转为iconfont，因为图片里有渐变效果，iconfont没法实现。这里，我想到了用富文本来实现。富文本是什么呢？它其实就是一种能展示图片和各种文字效果的一段文本，比普通的文本表现性更强，故称作富文本。

 

SpannableString spannableString = new SpannableString(titleAndMore); spannableString = new SpannableString(titleAndMore);

//设置图片
Drawable drawable = context.getResources().getDrawable(R.drawable.cttour_detail_golden);

//设置图片大小
drawable.setBounds(0, 0, CommonUtil.dp2px(context, 14), CommonUtil.dp2px(context, 18));
ImageSpan image = new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM);

//将字符串中某一段字符串替换为图片
spannableString.setSpan(image, titleAndMore.indexOf("☆金☆"), titleAndMore.indexOf("☆金☆") + 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
bigTitle.setText(spannableString);

3.

 

SpannableString到底是什么？它为什么能实现让TextView这么多样化？下面我们来看下它的源码，及实现原理。

近期较忙，未完待续。。