Android UI 之WaterFall瀑布流效果

WaterFall.java

package com.carrey.waterfall.waterfall;

import java.io.IOException;
import java.lang.ref.WeakReference;
import java.util.ArrayList;
import java.util.Random;

import android.content.Context;
import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.LinearLayout;
import android.widget.ScrollView;
/**
 * 瀑布流
 * 某些參數做了固定設置，如果想擴展功能，可自行修改
 * @author carrey
 *
 */
public class WaterFall extends ScrollView {
	
	/** 延遲發送message的handler */
	private DelayHandler delayHandler;
	/** 添加單元到瀑布流中的Handler */
	private AddItemHandler addItemHandler;
	
	/** ScrollView直接包裹的LinearLayout */
	private LinearLayout containerLayout;
	/** 存放所有的列Layout */
	private ArrayList<LinearLayout> colLayoutArray;
	
	/** 當前所處的頁面（已經加載了幾次） */
	private int currentPage;
	
	/** 存儲每一列中向上方向的未被回收bitmap的單元的最小行號 */
	private int[] currentTopLineIndex;
	/** 存儲每一列中向下方向的未被回收bitmap的單元的最大行號 */
	private int[] currentBomLineIndex;
	/** 存儲每一列中已經加載的最下方的單元的行號 */
	private int[] bomLineIndex;
	/** 存儲每一列的高度 */
	private int[] colHeight;
	
	/** 所有的圖片資源路徑 */
	private String[] imageFilePaths;
	
	/** 瀑布流顯示的列數 */
	private int colCount;
	/** 瀑布流每一次加載的單元數量 */
	private int pageCount;
	/** 瀑布流容納量 */
	private int capacity;
	
	private Random random;
	
	/** 列的寬度 */
	private int colWidth;
	
	private boolean isFirstPage;

	public WaterFall(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public WaterFall(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public WaterFall(Context context) {
		super(context);
		init();
	}
	
	/** 基本初始化工作 */
	private void init() {
		delayHandler = new DelayHandler(this);
		addItemHandler = new AddItemHandler(this);
		colCount = 4;//默認情況下是4列
		pageCount = 30;//默認每次加載30個瀑布流單元
		capacity = 10000;//默認容納10000張圖
		random = new Random();
		colWidth = getResources().getDisplayMetrics().widthPixels / colCount;
		
		colHeight = new int[colCount];
		currentTopLineIndex = new int[colCount];
		currentBomLineIndex = new int[colCount];
		bomLineIndex = new int[colCount];
		colLayoutArray = new ArrayList<LinearLayout>();
	}
	
	/**
	 * 在外部調用 第一次裝載頁面 必須調用
	 */
	public void setup() {
		containerLayout = new LinearLayout(getContext());
		containerLayout.setBackgroundColor(Color.WHITE);
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
				LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
		addView(containerLayout, layoutParams);
		
		for (int i = 0; i < colCount; i++) {
			LinearLayout colLayout = new LinearLayout(getContext());
			LinearLayout.LayoutParams colLayoutParams = new LinearLayout.LayoutParams(
					colWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
			colLayout.setPadding(2, 2, 2, 2);
			colLayout.setOrientation(LinearLayout.VERTICAL);
			
			containerLayout.addView(colLayout, colLayoutParams);
			colLayoutArray.add(colLayout);
		}
		
		try {
			imageFilePaths = getContext().getAssets().list("images");
		} catch (IOException e) {
			e.printStackTrace();
		}
		//添加第一頁
		addNextPageContent(true);
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			break;
		case MotionEvent.ACTION_UP:
			//手指離開屏幕的時候向DelayHandler延時發送一個信息，然後DelayHandler
			//屆時來判斷當前的滑動位置，進行不同的處理。
			delayHandler.sendMessageDelayed(delayHandler.obtainMessage(), 200);
			break;
		}
		return super.onTouchEvent(ev);
	}
	
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		//在滾動過程中，回收滾動了很遠的bitmap,防止OOM
		/*---回收算法說明：
		 * 回收的整體思路是：
		 * 我們只保持當前手機顯示的這一屏以及上方兩屏和下方兩屏 一共5屏內容的Bitmap,
		 * 超出這個範圍的單元Bitmap都被回收。
		 * 這其中又包括了一種情況就是之前回收過的單元的重新加載。
		 * 詳細的講解：
		 * 向下滾動的時候：回收超過上方兩屏的單元Bitmap,重載進入下方兩屏以內Bitmap
		 * 向上滾動的時候：回收超過下方兩屏的單元bitmao,重載進入上方兩屏以內bitmap
		 * ---*/
		int viewHeight = getHeight();
		if (t > oldt) {//向下滾動
			if (t > 2 * viewHeight) {
				for (int i = 0; i < colCount; i++) {
					LinearLayout colLayout = colLayoutArray.get(i);
					//回收上方超過兩屏bitmap
					FlowingView topItem = (FlowingView) colLayout.getChildAt(currentTopLineIndex[i]);
					if (topItem.getFootHeight() < t - 2 * viewHeight) {
						topItem.recycle();
						currentTopLineIndex[i] ++;
					}
					//重載下方進入(+1)兩屏以內bitmap
					FlowingView bomItem = (FlowingView) colLayout.getChildAt(Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]));
					if (bomItem.getFootHeight() <= t + 3 * viewHeight) {
						bomItem.reload();
						currentBomLineIndex[i] = Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]);
					}
				}
			}
		} else {//向上滾動
			for (int i = 0; i < colCount; i++) {
				LinearLayout colLayout = colLayoutArray.get(i);
				//回收下方超過兩屏bitmap
				FlowingView bomItem = (FlowingView) colLayout.getChildAt(currentBomLineIndex[i]);
				if (bomItem.getFootHeight() > t + 3 * viewHeight) {
					bomItem.recycle();
					currentBomLineIndex[i] --;
				}
				//重載上方進入(-1)兩屏以內bitmap
				FlowingView topItem = (FlowingView) colLayout.getChildAt(Math.max(currentTopLineIndex[i] - 1, 0));
				if (topItem.getFootHeight() >= t - 2 * viewHeight) {
					topItem.reload();
					currentTopLineIndex[i] = Math.max(currentTopLineIndex[i] - 1, 0);
				}
			}
		}
		super.onScrollChanged(l, t, oldl, oldt);
	}
	
	/**
	 * 這裏之所以要用一個Handler，是爲了使用他的延遲發送message的函數
	 * 延遲的效果在於，如果用戶快速滑動，手指很早離開屏幕，然後滑動到了底部的時候，
	 * 因爲信息稍後發送，在手指離開屏幕到滑動到底部的這個時間差內，依然能夠加載圖片
	 * @author carrey
	 *
	 */
	private static class DelayHandler extends Handler {
		private WeakReference<WaterFall> waterFallWR;
		private WaterFall waterFall;
		public DelayHandler(WaterFall waterFall) {
			waterFallWR = new WeakReference<WaterFall>(waterFall);
			this.waterFall = waterFallWR.get();
		}
		
		@Override
		public void handleMessage(Message msg) {
			//判斷當前滑動到的位置，進行不同的處理
			if (waterFall.getScrollY() + waterFall.getHeight() >= 
					waterFall.getMaxColHeight() - 20) {
				//滑動到底部，添加下一頁內容
				waterFall.addNextPageContent(false);
			} else if (waterFall.getScrollY() == 0) {
				//滑動到了頂部
			} else {
				//滑動在中間位置
			}
			super.handleMessage(msg);
		}
	}
	
	/**
	 * 添加單元到瀑布流中的Handler
	 * @author carrey
	 *
	 */
	private static class AddItemHandler extends Handler {
		private WeakReference<WaterFall> waterFallWR;
		private WaterFall waterFall;
		public AddItemHandler(WaterFall waterFall) {
			waterFallWR = new WeakReference<WaterFall>(waterFall);
			this.waterFall = waterFallWR.get();
		}
		@Override
		public void handleMessage(Message msg) {
			switch (msg.what) {
			case 0x00:
				FlowingView flowingView = (FlowingView)msg.obj;
				waterFall.addItem(flowingView);
				break;
			}
			super.handleMessage(msg);
		}
	}
	/**
	 * 添加單元到瀑布流中
	 * @param flowingView
	 */
	private void addItem(FlowingView flowingView) {
		int minHeightCol = getMinHeightColIndex();
		colLayoutArray.get(minHeightCol).addView(flowingView);
		colHeight[minHeightCol] += flowingView.getViewHeight();
		flowingView.setFootHeight(colHeight[minHeightCol]);
		
		if (!isFirstPage) {
			bomLineIndex[minHeightCol] ++;
			currentBomLineIndex[minHeightCol] ++;
		}
	}
	
	/**
	 * 添加下一個頁面的內容
	 */
	private void addNextPageContent(boolean isFirstPage) {
		this.isFirstPage = isFirstPage;
		
		//添加下一個頁面的pageCount個單元內容
		for (int i = pageCount * currentPage; 
				i < pageCount * (currentPage + 1) && i < capacity; i++) {
			new Thread(new PrepareFlowingViewRunnable(i)).run();
		}
		currentPage ++;
	}
	
	/**
	 * 異步加載要添加的FlowingView
	 * @author carrey
	 *
	 */
	private class PrepareFlowingViewRunnable implements Runnable {
		private int id;
		public PrepareFlowingViewRunnable (int id) {
			this.id = id;
		}
		
		@Override
		public void run() {
			FlowingView flowingView = new FlowingView(getContext(), id, colWidth);
			String imageFilePath = "images/" + imageFilePaths[random.nextInt(imageFilePaths.length)];
			flowingView.setImageFilePath(imageFilePath);
			flowingView.loadImage();
			addItemHandler.sendMessage(addItemHandler.obtainMessage(0x00, flowingView));
		}
		
	}
	
	/**
	 * 獲得所有列中的最大高度
	 * @return
	 */
	private int getMaxColHeight() {
		int maxHeight = colHeight[0];
		for (int i = 1; i < colHeight.length; i++) {
			if (colHeight[i] > maxHeight)
				maxHeight = colHeight[i];
		}
		return maxHeight;
	}
	
	/**
	 * 獲得目前高度最小的列的索引
	 * @return
	 */
	private int getMinHeightColIndex() {
		int index = 0;
		for (int i = 1; i < colHeight.length; i++) {
			if (colHeight[i] < colHeight[index])
				index = i;
		}
		return index;
	}
}

FlowingView.java

package com.carrey.waterfall.waterfall;

import java.io.IOException;
import java.io.InputStream;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;
import android.widget.Toast;
/**
 * 瀑布流中流動的單元
 * @author carrey
 *
 */
public class FlowingView extends View implements View.OnClickListener, View.OnLongClickListener {
	
	/** 單元的編號,在整個瀑布流中是唯一的,可以用來標識身份 */
	private int index;
	
	/** 單元中要顯示的圖片Bitmap */
	private Bitmap imageBmp;
	/** 圖像文件的路徑 */
	private String imageFilePath;
	/** 單元的寬度,也是圖像的寬度 */
	private int width;
	/** 單元的高度,也是圖像的高度 */
	private int height;
	
	/** 畫筆 */
	private Paint paint;
	/** 圖像繪製區域 */
	private Rect rect;
	
	/** 這個單元的底部到它所在列的頂部之間的距離 */
	private int footHeight;
	
	public FlowingView(Context context, int index, int width) {
		super(context);
		this.index = index;
		this.width = width;
		init();
	}
	
	/**
	 * 基本初始化工作
	 */
	private void init() {
		setOnClickListener(this);
		setOnLongClickListener(this);
		paint = new Paint();
		paint.setAntiAlias(true);
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(width, height);
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		//繪製圖像
		canvas.drawColor(Color.WHITE);
		if (imageBmp != null && rect != null) {
			canvas.drawBitmap(imageBmp, null, rect, paint);
		}
		super.onDraw(canvas);
	}
	
	/**
	 * 被WaterFall調用異步加載圖片數據
	 */
	public void loadImage() {
		InputStream inStream = null;
		try {
			inStream = getContext().getAssets().open(imageFilePath);
			imageBmp = BitmapFactory.decodeStream(inStream);
			inStream.close();
			inStream = null;
		} catch (IOException e) {
			e.printStackTrace();
		}
		if (imageBmp != null) {
			int bmpWidth = imageBmp.getWidth();
			int bmpHeight = imageBmp.getHeight();
			height = (int) (bmpHeight * width / bmpWidth);
			rect = new Rect(0, 0, width, height);
		}
	}
	
	/**
	 * 重新加載回收了的Bitmap
	 */
	public void reload() {
		if (imageBmp == null) {
			new Thread(new Runnable() {
				
				@Override
				public void run() {
					InputStream inStream = null;
					try {
						inStream = getContext().getAssets().open(imageFilePath);
						imageBmp = BitmapFactory.decodeStream(inStream);
						inStream.close();
						inStream = null;
						postInvalidate();
					} catch (IOException e) {
						e.printStackTrace();
					}
				}
			}).start();
		}
	}
	
	/**
	 * 防止OOM進行回收
	 */
	public void recycle() {
		if (imageBmp == null || imageBmp.isRecycled()) 
			return;
		new Thread(new Runnable() {
			
			@Override
			public void run() {
				imageBmp.recycle();
				imageBmp = null;
				postInvalidate();
			}
		}).start();
	}
	
	@Override
	public boolean onLongClick(View v) {
		Toast.makeText(getContext(), "long click : " + index, Toast.LENGTH_SHORT).show();
		return true;
	}

	@Override
	public void onClick(View v) {
		Toast.makeText(getContext(), "click : " + index, Toast.LENGTH_SHORT).show();
	}

	/**
	 * 獲取單元的高度
	 * @return
	 */
	public int getViewHeight() {
		return height;
	}
	/**
	 * 設置圖片路徑
	 * @param imageFilePath
	 */
	public void setImageFilePath(String imageFilePath) {
		this.imageFilePath = imageFilePath;
	}

	public Bitmap getImageBmp() {
		return imageBmp;
	}

	public void setImageBmp(Bitmap imageBmp) {
		this.imageBmp = imageBmp;
	}

	public int getFootHeight() {
		return footHeight;
	}

	public void setFootHeight(int footHeight) {
		this.footHeight = footHeight;
	}
}

MainActivity.java

package com.carrey.waterfall;

import com.carrey.waterfall.waterfall.WaterFall;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		WaterFall waterFall = (WaterFall) findViewById(R.id.waterfall);
		waterFall.setup();
	}

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.carrey.waterfall.waterfall.WaterFall 
        android:id="@+id/waterfall"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>