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; } }
如果大家有更好地方法，希望大家多多推荐，相互学习。
来看看效果图吧！
