Android Waterfall streaming photo wall implementation, experience irregular arrangement of beauty

The traditional layout of the interface is always a clear line, located in an orderly manner, this layout is commonplace, in imperceptible everyone has been to it has produced aesthetic fatigue. This time the waterfall flow layout of the emergence of the people brought a refreshing feeling, this layout although seemingly irregular, but there is a sense of beauty, so that the emergence of a large number of Web sites and applications have to use this novel layout to design the interface.

I remember writing an article about how to implement a photo wall on Android, but at that time the GridView was used to lay out the layout that only works for each picture on the wall, if the size of the picture is uneven, It would be very ugly to show in the GridView. The waterfall flow layout is a good way to solve this problem, so today we're going to catch up on the trend and see how we can achieve the function of the waterfall streaming photo wall on Android.

First or talk about the implementation of the principle, waterfall flow layout Although it seems to arrange a very casual, in fact it is a very scientific arrangement of rules. The entire interface will be divided into several columns of equal width according to the width of the screen, because the cell phone's screen is not very large, here we are divided into three columns. Whenever you need to add a picture, compress the width of the picture as wide as the column, compress the height of the picture by the same compression ratio, and then find the smallest column in the three columns and add the picture to the column. Then whenever you need to add a new picture, to repeat the above operation, it will form a waterfall pattern of the photo wall, the schematic below is shown below.

After listening to this, you may find that the layout of the waterfall flow is very simple, only need to use three linearlayout to split the width of the entire screen, and then dynamically AddView (). Indeed, if only to achieve the function, it is so simple. But don't forget, we are on the mobile phone development, if keep to linearlayout add pictures, the program will soon oom. So we also need a reasonable solution to the image resource release, here is still ready to use the LRUCache algorithm, for this algorithm is unfamiliar to friends can first refer to the Android high-performance loading large graphics, multiple graphics scheme, effectively avoid the program oom.

Let's start with a new Android project, called Photowallfallsdemo, and choose the 4.0 API.

The first question to consider is where are we going to collect pictures of these uneven sizes? Here I have in advance in Baidu search for a lot of scenery pictures, and in order to ensure the stability of their access, I have these pictures uploaded to my csdn album, so as long as the download from here to the picture. Create a new images class that will configure the URLs of all the pictures in the album, as shown in the following code:

public class Images {public final static string[] Imageurls = new string[] {"Http://img.my.c Sdn.net/uploads/201309/01/1378037235_3453.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jp G "," http://img.my.csdn.net/uploads/201309/01/1378037235_9280.jpg "," http://img.my.csdn.net/up  
            Loads/201309/01/1378037234_3539.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037234_6318.jpg ", "Http://img.my.csdn.net/uploads/201309/01/1378037194_2965.jpg", "http://img.my.csdn.net/uploads/2013 09/01/1378037193_1687.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037193_1286.jpg "," H Ttp://img.my.csdn.net/uploads/201309/01/1378037192_8379.jpg "," http://img.my.csdn.net/uploads/201309/01/1378 037178_9374.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037177_1254.jpg "," http://img. my.csdn.net/uploads/201309/01/1378037177_6203.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037152_6352.jpg "," H Ttp://img.my.csdn.net/uploads/201309/01/1378037151_9565.jpg "," http://img.my.csdn.net/uploads/201309/01/1378 037151_7904.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037148_7104.jpg "," http://img. My.csdn.net/uploads/201309/01/1378037129_8825.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037128_529 1.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037128_3531.jpg "," http://img.my.csdn.ne  
            T/uploads/201309/01/1378037127_1085.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037095_7515.jpg ", "Http://img.my.csdn.net/uploads/201309/01/1378037094_8001.jpg", "http://img.my.csdn.net/uploads/  
            201309/01/1378037093_7168.jpg "," http://img.my.csdn.net/uploads/201309/01/1378037091_4950.jpg ", "Http://img.my.csdn.neT/uploads/201308/31/1377949643_6410.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949642_6939.jpg ", "Http://img.my.csdn.net/uploads/201308/31/1377949630_4505.jpg", "http://img.my.csdn.net/uploads/  
            201308/31/1377949630_4593.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949629_7309.jpg ", "Http://img.my.csdn.net/uploads/201308/31/1377949629_8247.jpg", "http://img.my.csdn.net/uploads/201308/31/ 1377949615_1986.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949614_8482.jpg "," http:// Img.my.csdn.net/uploads/201308/31/1377949614_3743.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949614 _4199.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949599_3416.jpg "," HTTP://IMG.MY.CSD N.net/uploads/201308/31/1377949599_5269.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949598_7858.jpg " , "http://Img.my.csdn.net/uploads/201308/31/1377949598_9982.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949578 _2770.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949578_8744.jpg "," HTTP://IMG.MY.CSD N.net/uploads/201308/31/1377949577_5210.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949577_1998.jpg " , "Http://img.my.csdn.net/uploads/201308/31/1377949482_8813.jpg", "Http://img.my.csdn.net/uplo  
            Ads/201308/31/1377949481_6577.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949480_4490.jpg ", "Http://img.my.csdn.net/uploads/201308/31/1377949455_6792.jpg", "http://img.my.csdn.net/uploads/201308 /31/1377949455_6345.jpg "," http://img.my.csdn.net/uploads/201308/31/1377949442_4553.jpg "," htt P://img.my.csdn.net/uploads/201308/31/1377949441_8987.jpg "," http://img.my.csdn.net/uploads/201308/31/137794  
      9441_5454.jpg ",      "Http://img.my.csdn.net/uploads/201308/31/1377949454_6367.jpg", "http://img.my.csdn.net/uploads/201308  
/31/1377949442_4562.jpg "}; }