Android实现类似ListView模式的回收和更新机制的瀑布流

浏览数：19 / 时间：2015年06月11日

博客地址:http://blog.csdn.net/u010593680/article/details/43771857(转载请保留原文地址)

项目地址:https://git.oschina.net/0-0Xuan/XWaterFall

分析问题:

在做项目中遇到了需要使用瀑布流的情况,于是便和往常一样使用ScroollView模式的瀑布流,但是瀑布流效果容易实现,可一旦加载大量图片,则一不了心就内存溢出了,而瀑布流往往需要添加大量的图片,内存管理可以说是必要之举,那么问题就来了,如何在瀑布流中进行内存管理呢?

解决方法一: 使用各种ImageLoader。将图片的Bitmap全都在ImageLoader中进行统计管理,如果图片使用内存超过限制了,则释放部分图片的Bitmap,但这里就有个显而易见的问题,即释放哪个图片的bitmap?这往往是最困难的一步,很多模式采取释放最近最少使用的Bitmap,但统计bitmap的使用本身就是一件比较难的事情,所以ImageLoader主要是用于快速高效的加载图片

解决方法二:使用自定义View,当View出现在手机屏幕上时,WindowsManager会调用View的onDraw方法来描绘View,这样即可实时的确定哪个View的图片需要使用,再加载对应的图片进内存,这样就可最大限度减少内存的使用,这个办法几乎能完美解决内存溢出的问题,但是,使用该方法需要在onDraw()方法调用时,再加载图片,那么加载图片的延迟将使用户体验大打折扣,当然也可以在代码中添加一些联系的代码,当某个View显示时,一并加载该View附近的View的图片,但如此一来各个View的联系就十分密切,代码编写难度会提高不少。

解决方法三:模拟ListView使得该瀑布流可以回收不显示的View。知道了哪些view没有被显示,那么只要回收这些View的图片的bitmap即可。

本博客主要介绍第三种解决方法!

实现目标:一、使waterfall能够发现正在屏幕中显示的View,并且能够设置滑动时,加载View的正向和反向需要缓存的View的个数,以提前加载View,使用户体验更好

实现目标二、使waterfall能实现类似于ListView的notifyDataSetChange()方法,使得调用notifyDataSetChange()后ListView将检查原来的View是否有更新,如果有更新则进行相应的更新。这样就能方便的修改、增加、删除waterfall中的View了。


XWaterFall的使用:

第一步继承XWaterFall,继承后会显示7个必需实现的方法:

/**
	 * notifyDataSetChange时调用来获取子View,不建议在此进行大量的内存操作,如图片bitmap的加载,应将该操作放置在<span style="font-family: Arial, Helvetica, sans-serif;">onResumeView(int position, View view)中</span>
	 * 
	 * @param position
	 * @return 返回需要添加的View
	 */
	@Override
	public View getView(int position) {
		// TODO Auto-generated method stub
		return null;
	}

	/**
	 * 如果能确定对应的View的高度则可在子类覆盖该方法
	 * 
	 * @param position
	 * @return
	 */
	@Override
	public int getHeight(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	/**
	 * 返回position对应的View的标识,用以判断View是否需要更新
	 * 
	 * @param position
	 * @return
	 */
	@Override
	public Object getMark(int position) {
		// TODO Auto-generated method stub
		return null;
	}

	/**
	 * 
	 * @return WaterFall中子View的数量
	 */
	@Override
	public int getContentChildCount() {
		// TODO Auto-generated method stub
		return 0;
	}

	/**
	 * 
	 * @return 一次notifyDataSetChanged()最多添加的View的个数
	 */
	@Override
	public int getNewChildNum() {
		// TODO Auto-generated method stub
		return 0;
	}

	/**
	 * 有新超出显示屏的View时调用该方法
	 * 
	 * @param position
	 * @param view
	 */
	@Override
	protected void onRecycleView(int position, View view) {
		// TODO Auto-generated method stub
		
	}

	/**
	 * 有新进入显示屏的View时调用该方法
	 * 
	 * @param position
	 * @param view
	 */
	@Override
	protected void onResumeView(int position, View view) {
		// TODO Auto-generated method stub
		
	}
了解了方法的实现要求,我们现在来实现一个显示美女和美女position的瀑布流,实现效果如下:
技术分享

实现的代码是:

public class ImageWaterFall extends XWaterFall {
	
	private String TAG = "ImageWaterFall";
	private Context context;
	private List<String> imgs;
	private LayoutInflater inflater;
	

	public ImageWaterFall(Context context, List<String> imgs) {
		super(context,3,0);//设置waterfall的context、列数、宽度
		// TODO Auto-generated constructor stub
		this.context = context;
		this.inflater = LayoutInflater.from(context);
		this.imgs = imgs;
		
	}

	@Override
	public View getView(int position) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.item_my_image, null);
		MyImageView iv = (MyImageView) view.findViewById(R.id.iv);
		iv.setName("美女"+position);
		TextView tv = (TextView) view.findViewById(R.id.tvName);
		tv.setText("美女: " + position);
		return view;
	}

	@Override
	public int getContentChildCount() {
		// TODO Auto-generated method stub
		return imgs.size();
	}

	@Override
	public int getNewChildNum() {
		// TODO Auto-generated method stub
		return 12;
	}

	@Override
	public void onScrollToBottom() {
		// TODO Auto-generated method stub
		notifyDataSetChanged();
	}

	@Override
	public Object getMark(int position) {
		// TODO Auto-generated method stub
		return imgs.get(position);
	}

	@Override
	protected void onRecycleView(int position, View view) {
		// TODO Auto-generated method stub
		MyImageView iv = (MyImageView) view.findViewById(R.id.iv);
		TextView tv = (TextView)view.findViewById(R.id.tvName);
		tv.setBackgroundColor(context.getResources().getColor(R.color.orange));
		String url = imgs.get(position);
		Bitmap bm = ImageLoader.getBitmap(url);
		if (bm != null && !bm.isRecycled())
			bm.recycle();
		iv.setImageBitmap(null);
		ImageLoader.deleteBitmap(url);
		android.view.ViewGroup.LayoutParams params = iv.getLayoutParams();
		params.height = iv.getHeight();
		params.width = iv.getWidth();
		iv.setLayoutParams(params);
		iv.recycle();
	}

	@Override
	protected void onResumeView(int position, View view) {
		// TODO Auto-generated method stub
		TextView tv = (TextView)view.findViewById(R.id.tvName);
		tv.setBackgroundColor(context.getResources().getColor(R.color.green));
		MyImageView iv = (MyImageView) view.findViewById(R.id.iv);
		ImageLoader.loadImg(imgs.get(position), iv);
		iv.resume();
	}

	@Override
	public int getChildHeight(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

}


需要注意的是:

一、getChildHeight()中返回的是子View的高度,如果不能事先知道View的高度,则可以返回0或负数,那么会自动使用默认的选择最短列的算法

二、当发生View的更新和添加等操作,将会调用getView方法,但可能该View没在显示屏和缓冲区内,在这里耗费大量内存显然不合适,而当View第一次出现在显示屏和缓冲区中时,将会调用onResumeView()方法,所以onResumeView()更适合作为加载图片或其他非常耗费内存方法调用的地方

三、保证某个View的onResumeView()方法会在getView()之后,并且只有当View第一次出现在显示屏和缓冲区中时才会被调用

当某个View第一次离开显示屏和缓冲区中时,onRecycleView()会被调用

onResumeView()和onRecycleView()会被交替调用,并且保证先调用onResumeView(),才有可能调用onRecycleView()


在ImageWaterFall代码中也进行第三点的测试:当onResumeView()和onRecycleView()被调用时,会分别调用MyImageView的resume()和recycle()

public class MyImageView extends ImageView {

	private String TAG = "MyImageView";
	private String name;
	private int state; //用来检验onResumeView和onRecycleView交替执行,且先onResumeView再有onRecycleView
	
	public MyImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		 this.setOnClickListener(onclick);//XWaterFall不会影响上层View的OnClickListener等操作
	}

	public void setName(String name) {
		this.name = name;
	}

	@Override
	public void setImageBitmap(Bitmap bm) {
		// TODO Auto-generated method stub
		// Log.v(name, "setImageBitmap");
		super.setImageBitmap(bm);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		// Log.v(name, "onDraw :" + drawNum++ );
		try {
			super.onDraw(canvas);
		} catch (Exception e) {
			e.printStackTrace();
			Log.v(TAG, name);
		}
	}

	public void recycle(){
		Log.v(TAG, "XX回收" + name);
		state--;
		if(state!= 0){
			Log.v(TAG, "XX错误: state:" + state);
		}
	}
	
	public void resume(){
		Log.v(TAG, "XX恢复" + name);
		state++;
		if(state != 1){
			Log.v(TAG, "XX错误: state:" + state);
		}
	}
	
	OnClickListener onclick = new OnClickListener() {

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			Log.v(TAG, "OnClickListener");
		}
	};

}


XWaterFall的实现弄好了,接下来就是具体的使用了:

第一步:创建:ImageWaterFall iwf = new ImageWaterFall(this, imgs);

第二步:添加到某容器里:llContent.addView(iwf);

第三步:更新ImageWaterfall中的内容:iwf.notifyDataSetChanged();

前面两步和普通的View的使用类似,第三步则是添加ImageWaterfall子View的操作

还可以设置正反方向上缓存的数量,设置较大的缓冲数量有助于减少用户等待查看的时间,改善用户体验

(手指向上滑,则准备显示的是下方的View,所以下方为正方向,上方为反方向,手指向下滑,则准备显示的是上方的View,所以上方为正方向,下方为反方向)

<span style="white-space:pre">	</span>iwf.setPositionCacheNum(18);//设置加载View时正向的缓存的View的数量
	iwf.setOppositeCacheNum(18);//设置加载View时反向的缓存的View的数量
技术分享

接下来介绍如何更新、删除、插入View到ImageWaterFall中:

switch(view.getId()){
		case R.id.btRefrash://更新position为1的View

			imgs.set(1, "http://g.hiphotos.baidu.com/image/pic/item/1ad5ad6eddc451da9f2e8e8cb5fd5266d11632f8.jpg");
			iwf.notifyDataSetChanged();
			break;
		case R.id.btDelete://删除position为1的View
			imgs.remove(1);
			iwf.notifyDataSetChanged();
			break;
		case R.id.btInseart://在position为1的View前插入新View
			imgs.add(1, "http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1350c58efbca41ea8d3fd1f441d.jpg");
			iwf.notifyDataSetChanged();
			break;
		}
注意上面的imgs对应的是ImageWaterFall中的private List<String> imgs;这个用法和ListView中的用法非常相似

XWaterFall的使用就介绍完毕了,源码在博客顶部,如有任何问题,欢迎反馈!!




郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢