android 瀑布流效果(仿蘑菇街)

来源：互联网发布：网络悬疑科幻小说编辑：程序博客网时间：2024/04/29 09:22

首先我们还是来看一款示例：（蘑菇街）

看起来很像我们的gridview吧，不过又不像，因为item大小不固定的，看起来是不是别有一番风味,确实如此.就如我们的方角图形，斯通见惯后也就出现了圆角.下面我简单介绍下实现方法.

第一种：

我们在配置文件中定义好列数.如上图也就是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文件中，如果想从网上拉取数据，自己写额外部分

@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void handleMessage(Message msg) {// process incoming messages heresuper.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() {@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubswitch (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接口，对滑动到底部进行监听.

效果图：

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

下面我介绍另外一种做法：（相对上面更灵活）

我们动态添加列.

配置文件就不贴了，和上面那例子一样，只不过里面值包含一个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_containerfor (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添加一个边框，这样看起来效果不错，我们动态滑动的同时，然后图片陆续的填充边框.蘑菇街就是这种效果哦.

效果图：

显示成4列，因此图片有点小，仔细看的话，你应该可以看到有好多边框，然后图片陆续的填充边框.这种效果感觉对上面那个用户体验更友好些.

最后简单总结下：针对瀑布流最好使用第二种方法，这种可扩展性比较大，哪天老大说四列太丑了，改成三列，那么我们只需要把column改成3就ok了，简单吧。

示例二源码（第一种方式） http://download.csdn.net/detail/jj120522/4607745

示例一源码（第二种方式）http://download.csdn.net/detail/jj120522/4607615

0 0