1348669492_6464  

 

第一種:

我們在配置文件中定義好列數.如上圖也就是3列.我們需要定義三個LinearLayout,然後把獲取到的圖片add裏面就ok了.

main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/background_light"
    android:orientation="vertical" >

    <include
        android:id="@+id/progressbar"
        layout="@layout/loading" />

    <com.jj.waterfall.LazyScrollView
        android:id="@+id/lazyscrollview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:scrollbars="@null" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/background_light"
            android:orientation="horizontal"
            android:padding="2dp" >

            <LinearLayout
                android:id="@+id/layout01"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout02"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout03"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical" >
            </LinearLayout>
        </LinearLayout>
    </com.jj.waterfall.LazyScrollView>

    <TextView
        android:id="@+id/loadtext"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/loading_bg"
        android:gravity="center"
        android:padding="10dp"
        android:text="Loading..."
        android:textColor="@android:color/background_dark" />

</LinearLayout>

 

在這裏因为圖片很多就把圖片放在assets文件中,如果想從網上拉取數據,自己寫額外部分.

 

@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		InitView();

		assetManager = this.getAssets();
		// 獲取顯示圖片寬度
		Image_width = (getWindowManager().getDefaultDisplay().getWidth() - 4) / 3;
		try {
			image_filenames = Arrays.asList(assetManager.list("images"));// 獲取圖片名稱
		} catch (IOException e) {
			e.printStackTrace();
		}

		addImage(current_page, count);

	}

 

 

/***
	 * 加載更多
	 * 
	 * @param current_page
	 *            當前頁數
	 * @param count
	 *            每頁顯示個數
	 */
	private void addImage(int current_page, int count) {
		for (int x = current_page * count; x < (current_page + 1) * count
				&& x < image_filenames.size(); x++) {
			addBitMapToImage(image_filenames.get(x), y, x);
			y++;
			if (y >= 3)
				y = 0;
		}

	}



 

 

/***
	 * 添加imageview 到layout
	 * 
	 * @param imagePath 圖片name
	 * @param j 列
	 * @param i 行
	 */
	public void addBitMapToImage(String imagePath, int j, int i) {
		ImageView imageView = getImageview();
		asyncTask = new ImageDownLoadAsyncTask(this, imagePath, imageView,
				Image_width);
		asyncTask.setProgressbar(progressbar);
		asyncTask.setLoadtext(loadtext);
		asyncTask.execute();

		imageView.setTag(i);
		if (j == 0) {
			layout01.addView(imageView);
		} else if (j == 1) {
			layout02.addView(imageView);
		} else if (j == 2) {
			layout03.addView(imageView);
		}

		imageView.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				Toast.makeText(MainActivity.this,
						"您點擊了" + v.getTag() + "個Item", Toast.LENGTH_SHORT)
						.show();

			}
		});
	}

 

注釋已經很明確,相信大家都看的明白,我就不過多解釋了.

因为瀑布流不是一個規則的試圖,所以我們不可能用listview那種“底部加一個按鈕試圖,點擊加載更多,這样看起來很難看”。因此我們最好滑動到低端自動加載.

我們這裏用到的自定義ScrollView,因为我們要實現下滑分頁,這裏要判斷是否要進行分頁等操作.

LazyScrollView.java (這個法很實用哦.)

 

/***
 * 自定義ScrollView
 * 
 * @author zhangjia
 * 
 */
public class LazyScrollView extends ScrollView {
	private static final String tag = "LazyScrollView";
	private Handler handler;
	private View view;

	public LazyScrollView(Context context) {
		super(context);
	}

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

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

	// 這個獲得總的高度
	public int computeVerticalScrollRange() {
		return super.computeHorizontalScrollRange();
	}

	public int computeVerticalScrollOffset() {
		return super.computeVerticalScrollOffset();
	}

	/***
	 * 初始化
	 */
	private void init() {

		this.setOnTouchListener(onTouchListener);
		handler = new Handler() {
			@Override
			public void handleMessage(Message msg) {
				// process incoming messages here
				super.handleMessage(msg);
				switch (msg.what) {
				case 1:
					if (view.getMeasuredHeight() <= getScrollY() + getHeight()) {
						if (onScrollListener != null) {
							onScrollListener.onBottom();
						}

					} else if (getScrollY() == 0) {
						if (onScrollListener != null) {
							onScrollListener.onTop();
						}
					} else {
						if (onScrollListener != null) {
							onScrollListener.onScroll();
						}
					}
					break;
				default:
					break;
				}
			}
		};

	}

	OnTouchListener onTouchListener = new OnTouchListener() {

		@Override
		public boolean onTouch(View v, MotionEvent event) {
			// TODO Auto-generated method stub
			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				break;
			case MotionEvent.ACTION_UP:
				if (view != null && onScrollListener != null) {
					handler.sendMessageDelayed(handler.obtainMessage(1), 200);
				}
				break;

			default:
				break;
			}
			return false;
		}

	};

	/**
	 * 獲得参考的View,主要是为了獲得它的MeasuredHeight,然後和滾動條的ScrollY+getHeight作比較。
	 */
	public void getView() {
		this.view = getChildAt(0);
		if (view != null) {
			init();
		}
	}

	/**
	 * 定義接口
	 * 
	 * @author admin
	 * 
	 */
	public interface OnScrollListener {
		void onBottom();

		void onTop();

		void onScroll();
	}

	private OnScrollListener onScrollListener;

	public void setOnScrollListener(OnScrollListener onScrollListener) {
		this.onScrollListener = onScrollListener;
	}

我們還需要一個類,異步加載實現,我想有開發經驗的朋友一定用過好多次了,這裏就不展示代碼了,想看的朋友,可以點擊下載(如果認为還不錯的話,請您一定要表示一下哦.

 

對了,忘記一點,我們還需要對MainActivity 中的lazyScrollView實現OnScrollListener接口,對滑動到底部進行監聽.

效果圖:

1348675193_7467  

 

源碼下載

 

/**************************************************************************/

下面我介紹另外一種做法:(相對上面更靈活)

我們動態添加列.

配置文件就不貼了,和上面那例子一样,只不過裏面值包含一個LinearLayout布局.

在這裏我們動態添加列布局.

 

/***
	 * init view
	 */
	public void initView() {
		setContentView(R.layout.main);
		lazyScrollView = (LazyScrollView) findViewById(R.id.waterfall_scroll);
		lazyScrollView.getView();
		lazyScrollView.setOnScrollListener(this);
		waterfall_container = (LinearLayout) findViewById(R.id.waterfall_container);
		progressbar = (LinearLayout) findViewById(R.id.progressbar);
		loadtext = (TextView) findViewById(R.id.loadtext);

		item_width = getWindowManager().getDefaultDisplay().getWidth() / column;
		linearLayouts = new ArrayList<LinearLayout>();

		// 添加列到waterfall_container
		for (int i = 0; i < column; i++) {
			LinearLayout layout = new LinearLayout(this);
			LinearLayout.LayoutParams itemParam = new LinearLayout.LayoutParams(
					item_width, LayoutParams.WRAP_CONTENT);
			layout.setOrientation(LinearLayout.VERTICAL);
			layout.setLayoutParams(itemParam);
			linearLayouts.add(layout);
			waterfall_container.addView(layout);
		}

	}
/***
	 * 獲取imageview
	 * 
	 * @param imageName
	 * @return
	 */
	public ImageView getImageview(String imageName) {
		BitmapFactory.Options options = getBitmapBounds(imageName);
		// 創建顯示圖片的對象
		ImageView imageView = new ImageView(this);
		LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.FILL_PARENT);
		imageView.setLayoutParams(layoutParams);
		//
		imageView.setMinimumHeight(options.outHeight);
		imageView.setMinimumWidth(options.outWidth);
		imageView.setPadding(2, 0, 2, 2);
		imageView.setBackgroundResource(R.drawable.image_border);
		if (options != null)
			options = null;
		return imageView;
	}

	/***
	 * 
	 * 獲取相應圖片的 BitmapFactory.Options
	 */
	public BitmapFactory.Options getBitmapBounds(String imageName) {
		int h, w;
		BitmapFactory.Options options = new BitmapFactory.Options();
		options.inJustDecodeBounds = true;// 只返回bitmap的大小,可以減少內存使用,防止OOM.
		InputStream is = null;
		try {
			is = assetManager.open(file + "/" + imageName);
		} catch (IOException e) {
			e.printStackTrace();
		}
		BitmapFactory.decodeStream(is, null, options);
		return options;

	}

在這裏我稍微修改了下,为要顯示的iamgeview添加一個邊框,這样看起來效果不錯,我們動態滑動的同時, 然後圖片陆續的填充邊框.蘑菇街就是這種效果哦.

 效果圖:

1348764105_1736  

顯示成4列,因此圖片有點小,仔細看的話,你應該可以看到有好多邊框,然後圖片陆續的填充邊框.這種效果感覺對上面那個用戶體驗更友好些.

最後簡單總結下:針對瀑布流最好使用第二種方法,這種可擴展性比較大,哪天老大說四列太醜了,改成三列,那麼我們只需要把column改成3就ok了,簡單吧。

 

注意:由於圖片量太多,占用空間太大,因此我將圖片上傳到網上,獲取源碼的同學下載該文件放到項目的assets文件夾下,然後運行就ok了.

 

 


From:CSDN        

 




創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()