Android waterfall photo wall to experience the beauty of irregular arrangement

The layout of the traditional interface is always in a clear line and orderly location. This layout is common. Unconsciously, everyone has had aesthetic fatigue about it. At this time, the appearance of waterfall layout has brought a refreshing feeling. Although this layout seems irregular, it has an unspeakable beauty, so that a large number of websites and applications have used this novel layout to design the interface.

I remember that I wrote an article about how to implement the photo wall function on Android before, but at that time, the GridView was used for layout. This layout method is only applicable to the situation that each picture on the "wall" has the same size. If the size of the picture is uneven, it will be very ugly to display in the GridView. This problem can be well solved by using the layout of waterfall flow. Therefore, today we will catch up with the trend and see how to realize the function of waterfall flow photo wall on Android.

First of all, let's talk about the implementation principle. Although the layout of waterfall flow seems to be arranged randomly, it actually has very scientific arrangement rules. The whole interface will be divided into several columns of equal width according to the width of the screen. Since the screen of the mobile phone is not very large, we will divide it into three columns here. Whenever a picture needs to be added, the width of the picture will be compressed to the same width as the column, and then the height of the picture will be compressed according to the same compression ratio. Then, find the column with the lowest current height among the three columns and add the picture to this column. After that, whenever you need to add a new picture, repeat the above operation to form a photo wall with waterfall flow pattern, as shown below.

After listening to me, you may think that the layout of waterfall flow is very simple. You only need to use three linearlayouts to divide the whole screen width equally, and then dynamically add view(). Indeed, if only to achieve the function, it is so simple. But don't forget that we are developing on mobile phones. If we keep adding pictures to LinearLayout, the program will soon oom. Therefore, we also need a reasonable scheme to release the image resources. Here we are still preparing to use the lrucache algorithm. Friends who are not familiar with this algorithm can refer to Android to efficiently load large and multi image schemes to effectively avoid program oom.

Now let's start the implementation, create a new Android project called photowallfallsdemo, and select the 4.0 API.

The first question to consider is, where can we collect these pictures of different sizes? Here, I searched many landscape pictures on Baidu in advance, and in order to ensure the stability of their access, I uploaded these pictures to my CSDN album, so just download the pictures from here. Create a new images class and configure the web addresses of pictures in all albums. The code is as follows:

Then create a new imageloader class to facilitate image management. The code is as follows:

Here, we set the imageloader class as a singleton, initialize the lrucache class in the constructor, and set its maximum cache capacity to 1 / 8 of the maximum available memory. Then it provides several other methods to operate lrucache, compress and read pictures.

Next, create a new myscrollview, which inherits from Scrollview. The code is as follows:

Myscrollview is the core class to implement waterfall flow photo wall. Let me focus on it. First, it is inherited from Scrollview, which allows users to browse more pictures by scrolling. A loadmoreimages () method is provided here, which is specially used to load the image of the next page. Therefore, in the onlayout () method, we need to call this method once to initialize the image of the first page. Then, in the ontouch method, whenever the event that the finger leaves the screen is monitored, a handler will be used to judge the scrolling state of the current Scrollview. If it is found that it has scrolled to the bottom, the loadmoreimages () method will be called again to load the picture of the next page.

Let's take a look at the internal details of the loadmoreimages () method. In this method, a loop is used to load each picture in this page, and a loadimagetask is opened each time to load the picture asynchronously. Then, in loadimagetask, first check whether the image already exists in the SD card. If it does not exist, download it from the network, and then store the image in lrucache. Then compress the picture according to a certain proportion, find the column with the smallest current height, and add the compressed picture.

In addition, in order to ensure that the pictures on the photo wall can be properly recycled, a visibility check method, checkvisibility () method, is added here. The core idea of this method is to check all the pictures on the current photo wall to determine which are visible and which are invisible. Then replace the invisible pictures with an empty picture, so that the program will not occupy too much memory. When these pictures become visible again, you just need to take them out of lrucache again. If an image has been removed from lrucache, a loadimagetask will be opened to reload the image into memory.

Then open or create a new activity_ main. XML, and set the layout of waterfall flow in it, as shown below:

As you can see, here we use the myscrollview just written as the root layout, and then put a direct sub layout LinearLayout in it to count the height of the current sliding layout, and then add three linearlayouts of equal width under this layout as the layout of the first column, the second column and the third column respectively, In this way, you can dynamically add pictures to the three linearlayouts in myscrollview.

Finally, because we use the functions of network and SD card storage, we also need to use Android manifest Add the following permissions to the XML:

In this way, all our coding work has been completed. Now we can try to run it. The effect is shown in the following figure:

The photo wall fruit of waterfall flow mode is really beautiful, and because we have a very perfect resource release mechanism, no matter how many pictures you add to the photo wall, the memory occupied by the program will always be kept within a reasonable range. In the next article, I will take you to further improve the program, add the click to view the large picture and the multi touch zoom function. If you are interested, please continue to read the actual combat of Android multi touch technology and zoom and move the pictures freely.

Source code download: http://xiazai.jb51.net/201610/yuanma/AndroidPhotoWallFalls (jb51.net). rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.