最近在开发过程遇到一个需求，效果图如下，这是RecycleView列表的item布局，其中Default和Home是标签信息（每个item会都不一样），后面是地址信息。
分析了一下有两种方式，
- 第一个是自定义一个layout，动态添加TextView，比如按照上面的item，就是添加四个TextView，Default、Home、第一行地址、第二行地址，但这种比较麻烦，还需要计算第一行能显示多少地址信息，拆分成两段；
- 第二种是可以使用TextView设置html富文本实现，这种方式可以将Default、Home标签做成图片，html可以通过img标签来显示图片，然后在后面拼接文字，这种方式就不需要计算什么时候需要换行，更简单一些，于是决定用第二种来实现，具体实现方式如下：
- 使用Html.fromHtml(String source, ImageGetter imageGetter, TagHandler tahHandler)方法；
// getAddress()获取html富文本，getImageGetter()获取ImageGetter对象
textView.setText(Html.fromHtml(getAddress(), getImageGetter(), null));
- 拼接html富文本；
/**
* Desc:通过img标签加载tab图片，后面拼接地址字符串
* @return string
*/
private String getAddress() {
return "<img src='" + R.mipmap.tag_default + "'/> "
+ "<img src='" + R.mipmap.tag_home + "'/> "
+ "address";
}
- 获取ImageGetter对象；
/**
* Desc:getDrawable传参source为img标签传入的图片资源id，最终返回图片的Drawable对象
* @return ImageGetter
*/
private Html.ImageGetter getImageGetter() {
return new Html.ImageGetter() {
@Override
public Drawable getDrawable(String source) {
Drawable drawable = BaseApplication.getInstance().getResources().getDrawable(Integer.parseInt(source));
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
return drawable;
}
};
}
通过以上方法即可实现文章开头的UI效果，这边我省略了一些逻辑，比如富文本拼接需要根据实际要显示的文字内容做拼接、标签图片根据实际情况修改等，主要是记录下这种实现TextView显示图片和文字的方式，希望可以给大家提供参考；
网友评论