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

首先我们还是来看一款示例:(蘑菇街)

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

第一种:

我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout,然后把获取到的图片add里面就ok了.

main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@android:color/background_light"android:orientation="vertical" ><includeandroid:id="@+id/progressbar"layout="@layout/loading" /><com.jj.waterfall.LazyScrollViewandroid:id="@+id/lazyscrollview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:scrollbars="@null" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@android:color/background_light"android:orientation="horizontal"android:padding="2dp" ><LinearLayoutandroid:id="@+id/layout01"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid:id="@+id/layout02"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid: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><TextViewandroid: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布局.

缘是浪漫的相遇,瞬间让你我的心化为永恒!

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

相关文章:

你感兴趣的文章:

标签云: