歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

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

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

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

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

本文源碼下載:

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2013年資料/9月/23日/Android瀑布流照片牆實現,體驗不規則排列的美感

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

 

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

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

public class Images {

 public final static String[] imageUrls = new String[] {
   "http://www.linuxidc.com/upload/2013_09/1378037235_3453.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037235_7476.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037235_9280.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037234_3539.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037234_6318.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037194_2965.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037193_1687.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037193_1286.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037192_8379.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037178_9374.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037177_1254.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037177_6203.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037152_6352.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037151_9565.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037151_7904.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037148_7104.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037129_8825.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037128_5291.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037128_3531.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037127_1085.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037095_7515.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037094_8001.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037093_7168.jpg",
   "http://www.linuxidc.com/upload/2013_09/1378037091_4950.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949643_6410.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949642_6939.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949630_4505.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949630_4593.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949629_7309.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949629_8247.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949615_1986.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949614_8482.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949614_3743.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949614_4199.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949599_3416.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949599_5269.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949598_7858.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949598_9982.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949578_2770.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949578_8744.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949577_5210.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949577_1998.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949482_8813.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949481_6577.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949480_4490.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949455_6792.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949455_6345.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949442_4553.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949441_8987.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949441_5454.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949454_6367.jpg",
   "http://www.linuxidc.com/upload/2013_09/1377949442_4562.jpg" };
}

Copyright © Linux教程網 All Rights Reserved