设为首页 加入收藏

TOP

自定义图文混排视图MyImageTextView(一)
2015-07-24 05:43:57 来源: 作者: 【 】 浏览:9
Tags:定义 图文 MyImageTextView

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
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇零基础学cocos2dx 3.0(顺带学C++.. 下一篇uva:10700 - Camel trading(贪..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: