Android瀑布流照片牆實現，體驗不規則排列的美感

lostinai發表於2013-09-14
Android

轉載請註明出處：http://blog.csdn.net/guolin_blog/article/details/10470797

傳統介面的佈局方式總是行列分明、坐落有序的，這種佈局已是司空見慣，在不知不覺中大家都已經對它產生了審美疲勞。這個時候瀑布流佈局的出現，就給人帶來了耳目一新的感覺，這種佈局雖然看上去貌似毫無規律，但是卻有一種說不上來的美感，以至於湧現出了大批的網站和應用紛紛使用這種新穎的佈局來設計介面。

記得我在之前已經寫過一篇關於如何在Android上實現照片牆功能的文章了，但那個時候是使用的GridView來進行佈局的，這種佈局方式只適用於“牆”上的每張圖片大小都相同的情況，如果圖片的大小參差不齊，在GridView中顯示就會非常的難看。而使用瀑布流的佈局方式就可以很好地解決這個問題，因此今天我們也來趕一下潮流，看看如何在Android上實現瀑布流照片牆的功能。

首先還是講一下實現原理，瀑布流的佈局方式雖然看起來好像排列的很隨意，其實它是有很科學的排列規則的。整個介面會根據螢幕的寬度劃分成等寬的若干列，由於手機的螢幕不是很大，這裡我們就分成三列。每當需要新增一張圖片時，會將這張圖片的寬度壓縮成和列一樣寬，再按照同樣的壓縮比例對圖片的高度進行壓縮，然後在這三列中找出當前高度最小的一列，將圖片新增到這一列中。之後每當需要新增一張新圖片時，都去重複上面的操作，就會形成瀑布流格局的照片牆，示意圖如下所示。

                                        

聽我這麼說完後，你可能會覺得瀑布流的佈局非常簡單嘛，只需要使用三個LinearLayout平分整個螢幕寬度，然後動態地addView()進去就好了。確實如此，如果只是為了實現功能的話，就是這麼簡單。可是別忘了，我們是在手機上進行開發，如果不停地往LinearLayout裡新增圖片，程式很快就會OOM。因此我們還需要一個合理的方案來對圖片資源進行釋放，這裡仍然是準備使用LruCache演算法，對這個演算法不熟悉的朋友可以先參考Android高效載入大圖、多圖方案，有效避免程式OOM 。

下面我們就來開始實現吧，新建一個Android專案，起名叫PhotoWallFallsDemo，並選擇4.0的API。

第一個要考慮的問題是，我們到哪兒去收集這些大小參差不齊的圖片呢？這裡我事先在百度上搜尋了很多張風景圖片，並且為了保證它們訪問的穩定性，我將這些圖片都上傳到了我的CSDN相簿裡，因此只要從這裡下載圖片就可以了。新建一個Images類，將所有相簿中圖片的網址都配置進去，程式碼如下所示：

[java] view plaincopy
  1. public class Images {  
  2.   
  3.     public final static String[] imageUrls = new String[] {  
  4.             "https://img-my.csdn.net/uploads/201309/01/1378037235_3453.jpg",  
  5.             "https://img-my.csdn.net/uploads/201309/01/1378037235_7476.jpg",  
  6.             "https://img-my.csdn.net/uploads/201309/01/1378037235_9280.jpg",  
  7.             "https://img-my.csdn.net/uploads/201309/01/1378037234_3539.jpg",  
  8.             "https://img-my.csdn.net/uploads/201309/01/1378037234_6318.jpg",  
  9.             "https://img-my.csdn.net/uploads/201309/01/1378037194_2965.jpg",  
  10.             "https://img-my.csdn.net/uploads/201309/01/1378037193_1687.jpg",  
  11.             "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg",  
  12.             "https://img-my.csdn.net/uploads/201309/01/1378037192_8379.jpg",  
  13.             "https://img-my.csdn.net/uploads/201309/01/1378037178_9374.jpg",  
  14.             "https://img-my.csdn.net/uploads/201309/01/1378037177_1254.jpg",  
  15.             "https://img-my.csdn.net/uploads/201309/01/1378037177_6203.jpg",  
  16.             "https://img-my.csdn.net/uploads/201309/01/1378037152_6352.jpg",  
  17.             "https://img-my.csdn.net/uploads/201309/01/1378037151_9565.jpg",  
  18.             "https://img-my.csdn.net/uploads/201309/01/1378037151_7904.jpg",  
  19.             "https://img-my.csdn.net/uploads/201309/01/1378037148_7104.jpg",  
  20.             "https://img-my.csdn.net/uploads/201309/01/1378037129_8825.jpg",  
  21.             "https://img-my.csdn.net/uploads/201309/01/1378037128_5291.jpg",  
  22.             "https://img-my.csdn.net/uploads/201309/01/1378037128_3531.jpg",  
  23.             "https://img-my.csdn.net/uploads/201309/01/1378037127_1085.jpg",  
  24.             "https://img-my.csdn.net/uploads/201309/01/1378037095_7515.jpg",  
  25.             "https://img-my.csdn.net/uploads/201309/01/1378037094_8001.jpg",  
  26.             "https://img-my.csdn.net/uploads/201309/01/1378037093_7168.jpg",  
  27.             "https://img-my.csdn.net/uploads/201309/01/1378037091_4950.jpg",  
  28.             "https://img-my.csdn.net/uploads/201308/31/1377949643_6410.jpg",  
  29.             "https://img-my.csdn.net/uploads/201308/31/1377949642_6939.jpg",  
  30.             "https://img-my.csdn.net/uploads/201308/31/1377949630_4505.jpg",  
  31.             "https://img-my.csdn.net/uploads/201308/31/1377949630_4593.jpg",  
  32.             "https://img-my.csdn.net/uploads/201308/31/1377949629_7309.jpg",  
  33.             "https://img-my.csdn.net/uploads/201308/31/1377949629_8247.jpg",  
  34.             "https://img-my.csdn.net/uploads/201308/31/1377949615_1986.jpg",  
  35.             "https://img-my.csdn.net/uploads/201308/31/1377949614_8482.jpg",  
  36.             "https://img-my.csdn.net/uploads/201308/31/1377949614_3743.jpg",  
  37.             "https://img-my.csdn.net/uploads/201308/31/1377949614_4199.jpg",  
  38.             "https://img-my.csdn.net/uploads/201308/31/1377949599_3416.jpg",  
  39.             "https://img-my.csdn.net/uploads/201308/31/1377949599_5269.jpg",  
  40.             "https://img-my.csdn.net/uploads/201308/31/1377949598_7858.jpg",  
  41.             "https://img-my.csdn.net/uploads/201308/31/1377949598_9982.jpg",  
  42.             "https://img-my.csdn.net/uploads/201308/31/1377949578_2770.jpg",  
  43.             "https://img-my.csdn.net/uploads/201308/31/1377949578_8744.jpg",  
  44.             "https://img-my.csdn.net/uploads/201308/31/1377949577_5210.jpg",  
  45.             "https://img-my.csdn.net/uploads/201308/31/1377949577_1998.jpg",  
  46.             "https://img-my.csdn.net/uploads/201308/31/1377949482_8813.jpg",  
  47.             "https://img-my.csdn.net/uploads/201308/31/1377949481_6577.jpg",  
  48.             "https://img-my.csdn.net/uploads/201308/31/1377949480_4490.jpg",  
  49.             "https://img-my.csdn.net/uploads/201308/31/1377949455_6792.jpg",  
  50.             "https://img-my.csdn.net/uploads/201308/31/1377949455_6345.jpg",  
  51.             "https://img-my.csdn.net/uploads/201308/31/1377949442_4553.jpg",  
  52.             "https://img-my.csdn.net/uploads/201308/31/1377949441_8987.jpg",  
  53.             "https://img-my.csdn.net/uploads/201308/31/1377949441_5454.jpg",  
  54.             "https://img-my.csdn.net/uploads/201308/31/1377949454_6367.jpg",  
  55.             "https://img-my.csdn.net/uploads/201308/31/1377949442_4562.jpg" };  
  56. }  
然後新建一個ImageLoader類，用於方便對圖片進行管理，程式碼如下所示：
[java] view plaincopy
  1. public class ImageLoader {  
  2.   
  3.     /** 
  4.      * 圖片快取技術的核心類，用於快取所有下載好的圖片，在程式記憶體達到設定值時會將最少最近使用的圖片移除掉。 
  5.      */  
  6.     private static LruCache<String, Bitmap> mMemoryCache;  
  7.   
  8.     /** 
  9.      * ImageLoader的例項。 
  10.      */  
  11.     private static ImageLoader mImageLoader;  
  12.   
  13.     private ImageLoader() {  
  14.         // 獲取應用程式最大可用記憶體  
  15.         int maxMemory = (int) Runtime.getRuntime().maxMemory();  
  16.         int cacheSize = maxMemory / 8;  
  17.         // 設定圖片快取大小為程式最大可用記憶體的1/8  
  18.         mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {  
  19.             @Override  
  20.             protected int sizeOf(String key, Bitmap bitmap) {  
  21.                 return bitmap.getByteCount();  
  22.             }  
  23.         };  
  24.     }  
  25.   
  26.     /** 
  27.      * 獲取ImageLoader的例項。 
  28.      *  
  29.      * @return ImageLoader的例項。 
  30.      */  
  31.     public static ImageLoader getInstance() {  
  32.         if (mImageLoader == null) {  
  33.             mImageLoader = new ImageLoader();  
  34.         }  
  35.         return mImageLoader;  
  36.     }  
  37.   
  38.     /** 
  39.      * 將一張圖片儲存到LruCache中。 
  40.      *  
  41.      * @param key 
  42.      *            LruCache的鍵，這裡傳入圖片的URL地址。 
  43.      * @param bitmap 
  44.      *            LruCache的鍵，這裡傳入從網路上下載的Bitmap物件。 
  45.      */  
  46.     public void addBitmapToMemoryCache(String key, Bitmap bitmap) {  
  47.         if (getBitmapFromMemoryCache(key) == null) {  
  48.             mMemoryCache.put(key, bitmap);  
  49.         }  
  50.     }  
  51.   
  52.     /** 
  53.      * 從LruCache中獲取一張圖片，如果不存在就返回null。 
  54.      *  
  55.      * @param key 
  56.      *            LruCache的鍵，這裡傳入圖片的URL地址。 
  57.      * @return 對應傳入鍵的Bitmap物件，或者null。 
  58.      */  
  59.     public Bitmap getBitmapFromMemoryCache(String key) {  
  60.         return mMemoryCache.get(key);  
  61.     }  
  62.   
  63.     public static int calculateInSampleSize(BitmapFactory.Options options,  
  64.             int reqWidth) {  
  65.         // 源圖片的寬度  
  66.         final int width = options.outWidth;  
  67.         int inSampleSize = 1;  
  68.         if (width > reqWidth) {  
  69.             // 計算出實際寬度和目標寬度的比率  
  70.             final int widthRatio = Math.round((float) width / (float) reqWidth);  
  71.             inSampleSize = widthRatio;  
  72.         }  
  73.         return inSampleSize;  
  74.     }  
  75.   
  76.     public static Bitmap decodeSampledBitmapFromResource(String pathName,  
  77.             int reqWidth) {  
  78.         // 第一次解析將inJustDecodeBounds設定為true，來獲取圖片大小  
  79.         final BitmapFactory.Options options = new BitmapFactory.Options();  
  80.         options.inJustDecodeBounds = true;  
  81.         BitmapFactory.decodeFile(pathName, options);  
  82.         // 呼叫上面定義的方法計算inSampleSize值  
  83.         options.inSampleSize = calculateInSampleSize(options, reqWidth);  
  84.         // 使用獲取到的inSampleSize值再次解析圖片  
  85.         options.inJustDecodeBounds = false;  
  86.         return BitmapFactory.decodeFile(pathName, options);  
  87.     }  
  88.   
  89. }  
這裡我們將ImageLoader類設成單例，並在建構函式中初始化了LruCache類，把它的最大快取容量設為最大可用記憶體的1/8。然後又提供了其它幾個方法可以操作LruCache，以及對圖片進行壓縮和讀取。

接下來新建MyScrollView繼承自ScrollView，程式碼如下所示：

[java] view plaincopy
  1. public class MyScrollView extends ScrollView implements OnTouchListener {  
  2.   
  3.     /** 
  4.      * 每頁要載入的圖片數量 
  5.      */  
  6.     public static final int PAGE_SIZE = 15;  
  7.   
  8.     /** 
  9.      * 記錄當前已載入到第幾頁 
  10.      */  
  11.     private int page;  
  12.   
  13.     /** 
  14.      * 每一列的寬度 
  15.      */  
  16.     private int columnWidth;  
  17.   
  18.     /** 
  19.      * 當前第一列的高度 
  20.      */  
  21.     private int firstColumnHeight;  
  22.   
  23.     /** 
  24.      * 當前第二列的高度 
  25.      */  
  26.     private int secondColumnHeight;  
  27.   
  28.     /** 
  29.      * 當前第三列的高度 
  30.      */  
  31.     private int thirdColumnHeight;  
  32.   
  33.     /** 
  34.      * 是否已載入過一次layout，這裡onLayout中的初始化只需載入一次 
  35.      */  
  36.     private boolean loadOnce;  
  37.   
  38.     /** 
  39.      * 對圖片進行管理的工具類 
  40.      */  
  41.     private ImageLoader imageLoader;  
  42.   
  43.     /** 
  44.      * 第一列的佈局 
  45.      */  
  46.     private LinearLayout firstColumn;  
  47.   
  48.     /** 
  49.      * 第二列的佈局 
  50.      */  
  51.     private LinearLayout secondColumn;  
  52.   
  53.     /** 
  54.      * 第三列的佈局 
  55.      */  
  56.     private LinearLayout thirdColumn;  
  57.   
  58.     /** 
  59.      * 記錄所有正在下載或等待下載的任務。 
  60.      */  
  61.     private static Set<LoadImageTask> taskCollection;  
  62.   
  63.     /** 
  64.      * MyScrollView下的直接子佈局。 
  65.      */  
  66.     private static View scrollLayout;  
  67.   
  68.     /** 
  69.      * MyScrollView佈局的高度。 
  70.      */  
  71.     private static int scrollViewHeight;  
  72.   
  73.     /** 
  74.      * 記錄上垂直方向的滾動距離。 
  75.      */  
  76.     private static int lastScrollY = -1;  
  77.   
  78.     /** 
  79.      * 記錄所有介面上的圖片，用以可以隨時控制對圖片的釋放。 
  80.      */  
  81.     private List<ImageView> imageViewList = new ArrayList<ImageView>();  
  82.   
  83.     /** 
  84.      * 在Handler中進行圖片可見性檢查的判斷，以及載入更多圖片的操作。 
  85.      */  
  86.     private static Handler handler = new Handler() {  
  87.   
  88.         public void handleMessage(android.os.Message msg) {  
  89.             MyScrollView myScrollView = (MyScrollView) msg.obj;  
  90.             int scrollY = myScrollView.getScrollY();  
  91.             // 如果當前的滾動位置和上次相同，表示已停止滾動  
  92.             if (scrollY == lastScrollY) {  
  93.                 // 當滾動的最底部，並且當前沒有正在下載的任務時，開始載入下一頁的圖片  
  94.                 if (scrollViewHeight + scrollY >= scrollLayout.getHeight()  
  95.                         && taskCollection.isEmpty()) {  
  96.                     myScrollView.loadMoreImages();  
  97.                 }  
  98.                 myScrollView.checkVisibility();  
  99.             } else {  
  100.                 lastScrollY = scrollY;  
  101.                 Message message = new Message();  
  102.                 message.obj = myScrollView;  
  103.                 // 5毫秒後再次對滾動位置進行判斷  
  104.                 handler.sendMessageDelayed(message, 5);  
  105.             }  
  106.         };  
  107.   
  108.     };  
  109.   
  110.     /** 
  111.      * MyScrollView的建構函式。 
  112.      *  
  113.      * @param context 
  114.      * @param attrs 
  115.      */  
  116.     public MyScrollView(Context context, AttributeSet attrs) {  
  117.         super(context, attrs);  
  118.         imageLoader = ImageLoader.getInstance();  
  119.         taskCollection = new HashSet<LoadImageTask>();  
  120.         setOnTouchListener(this);  
  121.     }  
  122.   
  123.     /** 
  124.      * 進行一些關鍵性的初始化操作，獲取MyScrollView的高度，以及得到第一列的寬度值。並在這裡開始載入第一頁的圖片。 
  125.      */  
  126.     @Override  
  127.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  128.         super.onLayout(changed, l, t, r, b);  
  129.         if (changed && !loadOnce) {  
  130.             scrollViewHeight = getHeight();  
  131.             scrollLayout = getChildAt(0);  
  132.             firstColumn = (LinearLayout) findViewById(R.id.first_column);  
  133.             secondColumn = (LinearLayout) findViewById(R.id.second_column);  
  134.             thirdColumn = (LinearLayout) findViewById(R.id.third_column);  
  135.             columnWidth = firstColumn.getWidth();  
  136.             loadOnce = true;  
  137.             loadMoreImages();  
  138.         }  
  139.     }  
  140.   
  141.     /** 
  142.      * 監聽使用者的觸屏事件，如果使用者手指離開螢幕則開始進行滾動檢測。 
  143.      */  
  144.     @Override  
  145.     public boolean onTouch(View v, MotionEvent event) {  
  146.         if (event.getAction() == MotionEvent.ACTION_UP) {  
  147.             Message message = new Message();  
  148.             message.obj = this;  
  149.             handler.sendMessageDelayed(message, 5);  
  150.         }  
  151.         return false;  
  152.     }  
  153.   
  154.     /** 
  155.      * 開始載入下一頁的圖片，每張圖片都會開啟一個非同步執行緒去下載。 
  156.      */  
  157.     public void loadMoreImages() {  
  158.         if (hasSDCard()) {  
  159.             int startIndex = page * PAGE_SIZE;  
  160.             int endIndex = page * PAGE_SIZE + PAGE_SIZE;  
  161.             if (startIndex < Images.imageUrls.length) {  
  162.                 Toast.makeText(getContext(), "正在載入...", Toast.LENGTH_SHORT)  
  163.                         .show();  
  164.                 if (endIndex > Images.imageUrls.length) {  
  165.                     endIndex = Images.imageUrls.length;  
  166.                 }  
  167.                 for (int i = startIndex; i < endIndex; i++) {  
  168.                     LoadImageTask task = new LoadImageTask();  
  169.                     taskCollection.add(task);  
  170.                     task.execute(Images.imageUrls[i]);  
  171.                 }  
  172.                 page++;  
  173.             } else {  
  174.                 Toast.makeText(getContext(), "已沒有更多圖片", Toast.LENGTH_SHORT)  
  175.                         .show();  
  176.             }  
  177.         } else {  
  178.             Toast.makeText(getContext(), "未發現SD卡", Toast.LENGTH_SHORT).show();  
  179.         }  
  180.     }  
  181.   
  182.     /** 
  183.      * 遍歷imageViewList中的每張圖片，對圖片的可見性進行檢查，如果圖片已經離開螢幕可見範圍，則將圖片替換成一張空圖。 
  184.      */  
  185.     public void checkVisibility() {  
  186.         for (int i = 0; i < imageViewList.size(); i++) {  
  187.             ImageView imageView = imageViewList.get(i);  
  188.             int borderTop = (Integer) imageView.getTag(R.string.border_top);  
  189.             int borderBottom = (Integer) imageView  
  190.                     .getTag(R.string.border_bottom);  
  191.             if (borderBottom > getScrollY()  
  192.                     && borderTop < getScrollY() + scrollViewHeight) {  
  193.                 String imageUrl = (String) imageView.getTag(R.string.image_url);  
  194.                 Bitmap bitmap = imageLoader.getBitmapFromMemoryCache(imageUrl);  
  195.                 if (bitmap != null) {  
  196.                     imageView.setImageBitmap(bitmap);  
  197.                 } else {  
  198.                     LoadImageTask task = new LoadImageTask(imageView);  
  199.                     task.execute(imageUrl);  
  200.                 }  
  201.             } else {  
  202.                 imageView.setImageResource(R.drawable.empty_photo);  
  203.             }  
  204.         }  
  205.     }  
  206.   
  207.     /** 
  208.      * 判斷手機是否有SD卡。 
  209.      *  
  210.      * @return 有SD卡返回true，沒有返回false。 
  211.      */  
  212.     private boolean hasSDCard() {  
  213.         return Environment.MEDIA_MOUNTED.equals(Environment  
  214.                 .getExternalStorageState());  
  215.     }  
  216.   
  217.     /** 
  218.      * 非同步下載圖片的任務。 
  219.      *  
  220.      * @author guolin 
  221.      */  
  222.     class LoadImageTask extends AsyncTask<String, Void, Bitmap> {  
  223.   
  224.         /** 
  225.          * 圖片的URL地址 
  226.          */  
  227.         private String mImageUrl;  
  228.   
  229.         /** 
  230.          * 可重複使用的ImageView 
  231.          */  
  232.         private ImageView mImageView;  
  233.   
  234.         public LoadImageTask() {  
  235.         }  
  236.   
  237.         /** 
  238.          * 將可重複使用的ImageView傳入 
  239.          *  
  240.          * @param imageView 
  241.          */  
  242.         public LoadImageTask(ImageView imageView) {  
  243.             mImageView = imageView;  
  244.         }  
  245.   
  246.         @Override  
  247.         protected Bitmap doInBackground(String... params) {  
  248.             mImageUrl = params[0];  
  249.             Bitmap imageBitmap = imageLoader  
  250.                     .getBitmapFromMemoryCache(mImageUrl);  
  251.             if (imageBitmap == null) {  
  252.                 imageBitmap = loadImage(mImageUrl);  
  253.             }  
  254.             return imageBitmap;  
  255.         }  
  256.   
  257.         @Override  
  258.         protected void onPostExecute(Bitmap bitmap) {  
  259.             if (bitmap != null) {  
  260.                 double ratio = bitmap.getWidth() / (columnWidth * 1.0);  
  261.                 int scaledHeight = (int) (bitmap.getHeight() / ratio);  
  262.                 addImage(bitmap, columnWidth, scaledHeight);  
  263.             }  
  264.             taskCollection.remove(this);  
  265.         }  
  266.   
  267.         /** 
  268.          * 根據傳入的URL，對圖片進行載入。如果這張圖片已經存在於SD卡中，則直接從SD卡里讀取，否則就從網路上下載。 
  269.          *  
  270.          * @param imageUrl 
  271.          *            圖片的URL地址 
  272.          * @return 載入到記憶體的圖片。 
  273.          */  
  274.         private Bitmap loadImage(String imageUrl) {  
  275.             File imageFile = new File(getImagePath(imageUrl));  
  276.             if (!imageFile.exists()) {  
  277.                 downloadImage(imageUrl);  
  278.             }  
  279.             if (imageUrl != null) {  
  280.                 Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(  
  281.                         imageFile.getPath(), columnWidth);  
  282.                 if (bitmap != null) {  
  283.                     imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);  
  284.                     return bitmap;  
  285.                 }  
  286.             }  
  287.             return null;  
  288.         }  
  289.   
  290.         /** 
  291.          * 向ImageView中新增一張圖片 
  292.          *  
  293.          * @param bitmap 
  294.          *            待新增的圖片 
  295.          * @param imageWidth 
  296.          *            圖片的寬度 
  297.          * @param imageHeight 
  298.          *            圖片的高度 
  299.          */  
  300.         private void addImage(Bitmap bitmap, int imageWidth, int imageHeight) {  
  301.             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
  302.                     imageWidth, imageHeight);  
  303.             if (mImageView != null) {  
  304.                 mImageView.setImageBitmap(bitmap);  
  305.             } else {  
  306.                 ImageView imageView = new ImageView(getContext());  
  307.                 imageView.setLayoutParams(params);  
  308.                 imageView.setImageBitmap(bitmap);  
  309.                 imageView.setScaleType(ScaleType.FIT_XY);  
  310.                 imageView.setPadding(5, 5, 5, 5);  
  311.                 imageView.setTag(R.string.image_url, mImageUrl);  
  312.                 findColumnToAdd(imageView, imageHeight).addView(imageView);  
  313.                 imageViewList.add(imageView);  
  314.             }  
  315.         }  
  316.   
  317.         /** 
  318.          * 找到此時應該新增圖片的一列。原則就是對三列的高度進行判斷，當前高度最小的一列就是應該新增的一列。 
  319.          *  
  320.          * @param imageView 
  321.          * @param imageHeight 
  322.          * @return 應該新增圖片的一列 
  323.          */  
  324.         private LinearLayout findColumnToAdd(ImageView imageView,  
  325.                 int imageHeight) {  
  326.             if (firstColumnHeight <= secondColumnHeight) {  
  327.                 if (firstColumnHeight <= thirdColumnHeight) {  
  328.                     imageView.setTag(R.string.border_top, firstColumnHeight);  
  329.                     firstColumnHeight += imageHeight;  
  330.                     imageView.setTag(R.string.border_bottom, firstColumnHeight);  
  331.                     return firstColumn;  
  332.                 }  
  333.                 imageView.setTag(R.string.border_top, thirdColumnHeight);  
  334.                 thirdColumnHeight += imageHeight;  
  335.                 imageView.setTag(R.string.border_bottom, thirdColumnHeight);  
  336.                 return thirdColumn;  
  337.             } else {  
  338.                 if (secondColumnHeight <= thirdColumnHeight) {  
  339.                     imageView.setTag(R.string.border_top, secondColumnHeight);  
  340.                     secondColumnHeight += imageHeight;  
  341.                     imageView  
  342.                             .setTag(R.string.border_bottom, secondColumnHeight);  
  343.                     return secondColumn;  
  344.                 }  
  345.                 imageView.setTag(R.string.border_top, thirdColumnHeight);  
  346.                 thirdColumnHeight += imageHeight;  
  347.                 imageView.setTag(R.string.border_bottom, thirdColumnHeight);  
  348.                 return thirdColumn;  
  349.             }  
  350.         }  
  351.   
  352.         /** 
  353.          * 將圖片下載到SD卡快取起來。 
  354.          *  
  355.          * @param imageUrl 
  356.          *            圖片的URL地址。 
  357.          */  
  358.         private void downloadImage(String imageUrl) {  
  359.             HttpURLConnection con = null;  
  360.             FileOutputStream fos = null;  
  361.             BufferedOutputStream bos = null;  
  362.             BufferedInputStream bis = null;  
  363.             File imageFile = null;  
  364.             try {  
  365.                 URL url = new URL(imageUrl);  
  366.                 con = (HttpURLConnection) url.openConnection();  
  367.                 con.setConnectTimeout(5 * 1000);  
  368.                 con.setReadTimeout(15 * 1000);  
  369.                 con.setDoInput(true);  
  370.                 con.setDoOutput(true);  
  371.                 bis = new BufferedInputStream(con.getInputStream());  
  372.                 imageFile = new File(getImagePath(imageUrl));  
  373.                 fos = new FileOutputStream(imageFile);  
  374.                 bos = new BufferedOutputStream(fos);  
  375.                 byte[] b = new byte[1024];  
  376.                 int length;  
  377.                 while ((length = bis.read(b)) != -1) {  
  378.                     bos.write(b, 0, length);  
  379.                     bos.flush();  
  380.                 }  
  381.             } catch (Exception e) {  
  382.                 e.printStackTrace();  
  383.             } finally {  
  384.                 try {  
  385.                     if (bis != null) {  
  386.                         bis.close();  
  387.                     }  
  388.                     if (bos != null) {  
  389.                         bos.close();  
  390.                     }  
  391.                     if (con != null) {  
  392.                         con.disconnect();  
  393.                     }  
  394.                 } catch (IOException e) {  
  395.                     e.printStackTrace();  
  396.                 }  
  397.             }  
  398.             if (imageFile != null) {  
  399.                 Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(  
  400.                         imageFile.getPath(), columnWidth);  
  401.                 if (bitmap != null) {  
  402.                     imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);  
  403.                 }  
  404.             }  
  405.         }  
  406.   
  407.         /** 
  408.          * 獲取圖片的本地儲存路徑。 
  409.          *  
  410.          * @param imageUrl 
  411.          *            圖片的URL地址。 
  412.          * @return 圖片的本地儲存路徑。 
  413.          */  
  414.         private String getImagePath(String imageUrl) {  
  415.             int lastSlashIndex = imageUrl.lastIndexOf("/");  
  416.             String imageName = imageUrl.substring(lastSlashIndex + 1);  
  417.             String imageDir = Environment.getExternalStorageDirectory()  
  418.                     .getPath() + "/PhotoWallFalls/";  
  419.             File file = new File(imageDir);  
  420.             if (!file.exists()) {  
  421.                 file.mkdirs();  
  422.             }  
  423.             String imagePath = imageDir + imageName;  
  424.             return imagePath;  
  425.         }  
  426.     }  
  427.   
  428. }  
MyScrollView是實現瀑布流照片牆的核心類，這裡我來重點給大家介紹一下。首先它是繼承自ScrollView的，這樣就允許使用者可以通過滾動的方式來瀏覽更多的圖片。這裡提供了一個loadMoreImages()方法，是專門用於載入下一頁的圖片的，因此在onLayout()方法中我們要先呼叫一次這個方法，以初始化第一頁的圖片。然後在onTouch方法中每當監聽到手指離開螢幕的事件，就會通過一個handler來對當前ScrollView的滾動狀態進行判斷，如果發現已經滾動到了最底部，就會再次呼叫loadMoreImages()方法去載入下一頁的圖片。

那我們就要來看一看loadMoreImages()方法的內部細節了。在這個方法中，使用了一個迴圈來載入這一頁中的每一張圖片，每次都會開啟一個LoadImageTask，用於對圖片進行非同步載入。然後在LoadImageTask中，首先會先檢查一下這張圖片是不是已經存在於SD卡中了，如果還沒存在，就從網路上下載，然後把這張圖片存放在LruCache中。接著將這張圖按照一定的比例進行壓縮，並找出當前高度最小的一列，把壓縮後的圖片新增進去就可以了。

另外，為了保證照片牆上的圖片都能夠合適地被回收，這裡還加入了一個可見性檢查的方法，即checkVisibility()方法。這個方法的核心思想就是檢查目前照片牆上的所有圖片，判斷出哪些是可見的，哪些是不可見。然後將那些不可見的圖片都替換成一張空圖，這樣就可以保證程式始終不會佔用過高的記憶體。當這些圖片又重新變為可見的時候，只需要再從LruCache中將這些圖片重新取出即可。如果某張圖片已經從LruCache中被移除了，就會開啟一個LoadImageTask，將這張圖片重新載入到記憶體中。

然後開啟或新建activity_main.xml，在裡面設定好瀑布流的佈局方式，如下所示：

[html] view plaincopy
  1. <com.example.photowallfallsdemo.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/my_scroll_view"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <LinearLayout  
  7.         android:layout_width="match_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:orientation="horizontal" >  
  10.   
  11.         <LinearLayout  
  12.             android:id="@+id/first_column"  
  13.             android:layout_width="0dp"  
  14.             android:layout_height="wrap_content"  
  15.             android:layout_weight="1"  
  16.             android:orientation="vertical" >  
  17.         </LinearLayout>  
  18.   
  19.         <LinearLayout  
  20.             android:id="@+id/second_column"  
  21.             android:layout_width="0dp"  
  22.             android:layout_height="wrap_content"  
  23.             android:layout_weight="1"  
  24.             android:orientation="vertical" >  
  25.         </LinearLayout>  
  26.   
  27.         <LinearLayout  
  28.             android:id="@+id/third_column"  
  29.             android:layout_width="0dp"  
  30.             android:layout_height="wrap_content"  
  31.             android:layout_weight="1"  
  32.             android:orientation="vertical" >  
  33.         </LinearLayout>  
  34.     </LinearLayout>  
  35.   
  36. </com.example.photowallfallsdemo.MyScrollView>  
可以看到，這裡我們使用了剛才編寫好的MyScrollView作為根佈局，然後在裡面放入了一個直接子佈局LinearLayout用於統計當前滑動佈局的高度，然後在這個佈局下又新增了三個等寬的LinearLayout分別作為第一列、第二列和第三列的佈局，這樣在MyScrollView中就可以動態地向這三個LinearLayout裡新增圖片了。

最後，由於我們使用到了網路和SD卡儲存的功能，因此還需要在AndroidManifest.xml中新增以下許可權：

[html] view plaincopy
  1. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
  2. <uses-permission android:name="android.permission.INTERNET" />  
這樣我們所有的編碼工作就已經完成了，現在可以嘗試執行一下，效果如下圖所示：

                                

瀑布流模式的照片牆果真非常美觀吧，而且由於我們有非常完善的資源釋放機制，不管你在照片牆上新增了多少圖片，程式佔用記憶體始終都會保持在一個合理的範圍內。在下一篇文章中，我會帶著大家對這個程式進行進一步的完善，加入點選檢視大圖，以及多點觸控縮放的功能，感覺興趣的朋友請繼續閱讀Android多點觸控技術實戰，自由地對圖片進行縮放和移動 。

好了，今天的講解到此結束，有疑問的朋友請在下面留言。

原始碼下載，請點選這裡

相關文章