TextView本身是支持图文混排的,在手机上,通过TextView进行图文混排时,排版可能难以达到PC上浏览器的效果,特别是对于一些支持多种标签的发布系统。
1. 网上很容易找到的使用TextView实现图文混排的例子,大多是类似于下面的形式:
TextView tv_Content;
tv_Content.setText(Html.fromHtml(item.getContent(), GetImageGetter(), null));
private ImageGetter imageGetter = null;
private Map
imageHashMap = null;
private ImageGetter GetImageGetter() {
if(imageHashMap == null) {
imageHashMap = new HashMap
(2); } if(imageGetter == null) { imageGetter = new ImageGetter() { //通过网络获取图片是一个耗时的操作,最好不要放在主线程中,否则容易引起阻塞。 @Override public Drawable getDrawable(String source) { String key = MD5.EncoderByMD5(source); URLDrawable urlDrawable = imageHashMap.get(key); if(urlDrawable == null) { urlDrawable = new URLDrawable(); imageHashMap.put(key, urlDrawable); // get the actual source ImageGetterAsyncTask.start(mContext, urlDrawable, source, handler); } return urlDrawable; } }; } return imageGetter; } private Handler handler = new Handler() { @Override public void handleMessage(android.os.Message msg) { if(msg.what == ImageGetterAsyncTask.OnDrawablePrepared) { refreshNewsImage(msg); } } }; private void refreshNewsImage(android.os.Message msg) { notifyDataSetChanged(); }
需要设置要显示图片的尺寸:
drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
2. 一般在listViewItem中使用都没有问题,但是如果作为scrollView的子视图的话,在有图像时会抛出异常(在公司测试机上如此,其他环境没有去验证)。建议通过自定义视图的方式来实现,基本思路就是利用SpannableStringBuilder来分割图片及非图片内容,然后逐一创建图片及非图片视图。对于类似于的新闻呈现且需要高度定制UI的场合非常适用。
2.1 content_textview.xml :用于显示图片之外的内容
2.2 content_imageview.xml:用于显示图片及图片说明,如“[图 1]”
2.3 vertical_linearlayout.xml:根视图,用于插入待显示内容
2.4 MyImageTextView.jva:实现图文混排的类
public class MyImageTextView extends FrameLayout {
//对应的view
private LinearLayout mContentView = null;
//对应的数据
private CharSequence mData = null;
private String[] mImageUrl = null;
private ImageView[] mImage = null;
private int mImageBaseIndex = 1; //从[图 1]开始
//是否支持超链接点击
private Boolean supportMovementMethod = false;
//是否显示图索引
private Boolean showImageIndex = false;
public MyImageTextView(Context context) {
this(context, null);
}
public MyImageTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyImageTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
setDrawingCacheEnabled(false);
setClipChildren(false);
mContentView = (LinearLayout) LayoutInflater.from(getContext()).inflate(
R.layout.vertical_linearlayout, null);
addView(mContentView);
}
/**
* 设置待显示内容
* @param content
*/
public void setText(CharSequence content) {
try {
if(TextUtils.isEmpty(content)) { return; }
if(content.equals(mData)) { return; }
mData = content;
mContentView.removeAllViews(); // 首先清理之前加入的子视图
int viewIndex = 0;
int len = content.length();
SpannableStringBuilder style = new SpannableStringBuilder(content);
ImageSpan[] imgAry = style.getSpans(0, len, ImageSpan.class);
if(imgAry == null || imgAry.length <= 0) {
addTextView(content, viewIndex);
return;
}
int pos = 0;
int start = 0;
int end = 0;
ImageSpan img = null;
mImageUrl = new String[imgAry.length];
mImage = new ImageView[imgAry.length];
for(int i = 0; i < imgAry.length; i++) {
img = imgAry[i];
mImageUrl[i] = img.getSource();
start = style.getSpanStart(img);
if(pos < start) {
addTextView(style.subSequence(pos, start), viewIndex++);
}
end = style.getSpanEnd(img);
addImageView(i, viewIndex++);
pos = end + 1;
}
if(pos > 0 && pos < len) {
addTextView(style.subSequence(pos, len), viewIndex);
}
requestLayout();
invalidate(); //on a UI thread
} catch(Exception ex) {
}
}
private void addTextView(CharSequence text, int viewIndex) {
TextView tv = (TextView) LayoutInflater.from(getContext()).inflate(
R.layout.content_textview, null);
mContentView.addView(tv, viewIndex);
tv.setText(text);
if(supportMovementMethod) {
changeLink(tv);
}
}
private void addImageView(int index, int viewIndex) {
View parent = LayoutInflater.from(getContext()).inflate(
R.layout.content_imageview, null);
mImage[index] = (ImageView) parent.findViewById(R.id.content_imageview_image);
TextView tvTitle = (TextView)parent.findViewById(R.id.content_imageview_title);
if(showImageIndex) {
//这里的图片标题,也可以通过
标签的title/alt等属性分析出来
tvTitle.setText("[图 " + Integer.toString(mImageBaseIndex + index) + "]");
tvTitle.setVisibility(View.VISIBLE);
} else {
tvTitle.setVisibility(View.GON