android之Volley实现瀑布流

1.首先我们来看下主布局文件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.chen.photodemo.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
          >
        <LinearLayout android:id="@+id/mianContainer"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">
        </LinearLayout>
    </com.chen.photodemo.MyScrollView>
</RelativeLayout>

再看看自己定义的一个imageview布局文件line_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <ImageView android:id="@+id/itemImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

2.接下来自己定义的一个类来实现Scrollview类

package com.chen.photodemo;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ScrollView;

/**
 *
 * @author jianrong.zheng
 *
 */
public class MyScrollView extends ScrollView implements OnTouchListener{
    private ScrollCallBack scrollCallBack;
    private View view;
    private Handler refrshHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
            case 1:
                //view.getMeasuredHeight()代表LinearLayout需要的高度
                //getScrollY()代表Y轴的上边线 +getHeight()固定不变的屏幕高度，如果大于原有LinearLayout高度则证明是向上划
//                System.out.println("===getScrollY()"+getScrollY());
//                System.out.println("===getHeight()"+getHeight());
                if (view.getMeasuredHeight() <= getScrollY() + getHeight()) {
                    if (scrollCallBack != null) {
                        scrollCallBack.onBottom();
                    }  

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

            default:
                break;
            }
        }

    };

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

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

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

    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        System.out.println();
        return super.dispatchKeyEvent(event);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            return super.onTouchEvent(event);
        case MotionEvent.ACTION_UP:
              if (view != null && scrollCallBack != null) {
                  refrshHandler.sendMessageDelayed(refrshHandler.obtainMessage(1), 200);
              }
            return true;
        default:
            break;
        }
        return super.onTouchEvent(event);
    }

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

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

    public void setScrollCallBack(ScrollCallBack scrollCallBack) {
        this.scrollCallBack = scrollCallBack;
        this.view = getChildAt(0); //为了获得它的MeasuredHeight，然后和滚动条的ScrollY+getHeight作比较。
        this.setOnTouchListener(this);
    }  

    /**
     *
     *接口回调
     */
    public interface ScrollCallBack {
        public void onTop();
        public void onBottom();
        public void onScroll();
    }
}

3.接下来再看自己要往list放入你想放的图片的的url

package com.chen.photodemo;

/**
 * 图片
 * @author jianrong.zheng
 */
public class ImageConst {
    public static String[] urls;
    static{
        urls = new String[]{
            "http://a.hiphotos.baidu.com/pic/w%3D230/sign=bf59456cc9fcc3ceb4c0ce30a244d6b7/4afbfbedab64034f80b90b48aec379310a551d0c.jpg",
            "http://d.hiphotos.baidu.com/pic/w%3D230/sign=e92db34bc995d143da76e32043f18296/8601a18b87d6277f35a56d7029381f30e824fcc7.jpg",
            "http://a.hiphotos.baidu.com/pic/w%3D230/sign=f71ba7639c16fdfad86cc1ed848e8cea/241f95cad1c8a78699e316466609c93d71cf50a8.jpg",
            "http://f.hiphotos.baidu.com/pic/w%3D230/sign=dbe3e3fab8014a90813e41be99763971/63d0f703918fa0eccd0e3845279759ee3c6ddba9.jpg",
            "http://d.hiphotos.baidu.com/pic/w%3D230/sign=bb37f35dbd315c6043956cecbdb0cbe6/d000baa1cd11728b1cd9d36ac9fcc3cec2fd2c85.jpg",
            "http://c.hiphotos.baidu.com/pic/w%3D230/sign=59a8fcd9f91986184147e8877aec2e69/3c6d55fbb2fb4316879103c221a4462308f7d3f8.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=20f4fb5b96dda144da096bb182b6d009/95eef01f3a292df5ccddf35dbd315c6034a8735f.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=dc101ae5bba1cd1105b675238910c8b0/d01373f082025aaf80c3801efaedab64024f1a75.jpg",
            "http://f.hiphotos.baidu.com/pic/w%3D230/sign=4e07a985fd039245a1b5e60cb795a4a8/024f78f0f736afc3f4f8602db219ebc4b6451285.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=1522ba04b151f819f1250449eab44a76/58ee3d6d55fbb2fb6f26643d4e4a20a44623dc8b.jpg",
            "http://d.hiphotos.baidu.com/pic/w%3D230/sign=348b736477c6a7efb926af25cdfbafe9/4034970a304e251f46503243a686c9177e3e53e2.jpg",
            "http://b.hiphotos.baidu.com/pic/w%3D230/sign=60e9d1767aec54e741ec1d1d89399bfd/d058ccbf6c81800a580ed546b03533fa838b478a.jpg",
            "http://b.hiphotos.baidu.com/pic/w%3D230/sign=3f09e4c9ca1349547e1eef67664f92dd/b812c8fcc3cec3fd9dd5fb3dd788d43f8694278a.jpg",
            "http://b.hiphotos.baidu.com/pic/w%3D230/sign=3f09e4c9ca1349547e1eef67664f92dd/b812c8fcc3cec3fd9dd5fb3dd788d43f8694278a.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=f95c1f21b3b7d0a27bc9039efbee760d/e1fe9925bc315c6060c0187c8cb1cb13485477cf.jpg",
            "http://f.hiphotos.baidu.com/pic/w%3D230/sign=3497a62dc8177f3e1034fb0e40ce3bb9/7a899e510fb30f24a7f8d898c995d143ac4b03ce.jpg",
            "http://a.hiphotos.baidu.com/pic/w%3D230/sign=f61a1f6efcfaaf5184e386bcbc5494ed/94cad1c8a786c917473fe571c83d70cf3bc757bd.jpg",
            "http://f.hiphotos.baidu.com/pic/w%3D230/sign=55b651b1279759ee4a5067c882fa434e/b7003af33a87e9506866c6d011385343fbf2b41c.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=3a06cb97cf1b9d168ac79d62c3dfb4eb/314e251f95cad1c8eb46a56f7e3e6709c83d51fc.jpg",
            "http://g.hiphotos.baidu.com/pic/w%3D230/sign=ea85ce6bf11f3a295ac8d2cda924bce3/c83d70cf3bc79f3d9e0d8b85bba1cd11738b2992.jpg",
            "http://h.hiphotos.baidu.com/pic/w%3D230/sign=8b92084b359b033b2c88fbd925cf3620/203fb80e7bec54e769690f51b8389b504ec26af3.jpg",
            "http://b.hiphotos.baidu.com/pic/w%3D230/sign=60e61a8883025aafd33279c8cbecab8d/060828381f30e924096cc0794d086e061c95f7aa.jpg",
            "http://a.hiphotos.baidu.com/pic/w%3D230/sign=e869d0a6d52a283443a631086bb4c92e/00e93901213fb80ef3dca16c37d12f2eb9389478.jpg",
            "http://e.hiphotos.baidu.com/pic/w%3D230/sign=b9aae94c0ff41bd5da53eff761db81a0/b64543a98226cffcdaa3b1d5b8014a90f703eac8.jpg",
            "http://d.hiphotos.baidu.com/pic/w%3D230/sign=3bde0aab08f79052ef1f403d3cf2d738/9213b07eca80653817adddab96dda144ac3482c6.jpg",
            "http://b.hiphotos.baidu.com/pic/w%3D230/sign=639f5a60a9d3fd1f3609a539004f25ce/b7fd5266d01609244a0c6b55d50735fae6cd3457.jpg"
        };
    }
}

4.最后我们来看下activity中是如何实现的。

package com.chen.photodemo;

import java.util.ArrayList;
import java.util.List;

import android.annotation.TargetApi;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Point;
import android.os.Build;
import android.os.Bundle;
import android.view.Display;
import android.view.Menu;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.android.volley.RequestQueue;
import com.android.volley.Response.Listener;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.Volley;
/**
 *
 * @author jianrong.zheng
 *
 */
@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2)
public class MainActivity extends Activity{
    private static final int column = 3;//3列
    private static final int pageCount = 12; //每页加载个数
    private int currentPage = 0; //当前页
    private int columnWidth = 0;//列宽
    private LinearLayout mianContainer;//主容器
    private RequestQueue queue;
    private List<LinearLayout> columnLayouts = new ArrayList<LinearLayout>();
    @SuppressWarnings("deprecation")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mianContainer = (LinearLayout) findViewById(R.id.mianContainer);
        queue = Volley.newRequestQueue(this);
        Display display = getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int width = size.x;
        columnWidth = (width - 4)/ 3 ;//4为中间2条空隙
        ((MyScrollView)findViewById(R.id.scrollView)).setScrollCallBack(new MyScrollCallBack());
        addColumn();

    }

    /**
     * 滚动回调
     */
    class MyScrollCallBack implements MyScrollView.ScrollCallBack {

        @Override
        public void onTop() {

        }

        @Override
        public void onBottom() {
            currentPage++;
            addImageView2Column();
        }

        @Override
        public void onScroll() {

        }

    }

    /**
     * 构造列
     */
    private void addColumn() {
        for(int i = 0;i < column;i++) {//构造列
            LinearLayout columnLayout = new LinearLayout(this);
            columnLayout.setLayoutParams(new LayoutParams(columnWidth, LayoutParams.MATCH_PARENT));
            columnLayout.setOrientation(LinearLayout.VERTICAL);
            columnLayouts.add(columnLayout);
            mianContainer.addView(columnLayout);
        }
        addImageView2Column();
    }

    /**
     * 构造完后开始加入imageView到列中
     */
    private void addImageView2Column() {
        //网上抄的方法,目前没发现什么BUG
        int columnIndex = 0;
        int imageCount = ImageConst.urls.length;
        for(int i = currentPage * pageCount;i< (currentPage +1)*pageCount && i < imageCount;i++) {
            columnIndex = columnIndex >= column ? columnIndex = 0 : columnIndex;
            ImageView itemImage = new ImageView(this);
            itemImage.setLayoutParams(new LayoutParams(columnWidth,LayoutParams.WRAP_CONTENT));
            itemImage.setPadding(2, 2, 2, 2);
            columnLayouts.get(columnIndex).addView(itemImage);
            downloadImage(itemImage,i);
            columnIndex++;
        }
    }

    /**
     * 下载图片，自带缓存
     * @param itemImage
     * @param index
     */
    private void downloadImage(final ImageView itemImage, int index) {
        //columnWidth这个是设置下载图片的maxWidth,0代表不限定
        ImageRequest request = new ImageRequest(ImageConst.urls[index], new Listener<Bitmap>() {
            @Override
            public void onResponse(Bitmap response) {
                itemImage.setImageBitmap(response);
            }
        }, columnWidth, 0, Config.RGB_565, null);
        request.setShouldCache(true);//设置缓存 缓存路径看我以前的帖子
        queue.add(request);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

如果大家有更好地方法，希望大家多多推荐，相互学习。

来看看效果图吧！