Waterfalllayout of Android custom ViewGroup (II)

In the previous article, we learned the basic steps of customizing the ViewGroup and made an example of customgridlayout. In this article, we continue to talk about customizing the ViewGroup. In Android, when there are a lot of photos to show, we can use GridView as the photo wall, but GridView is too neat. Sometimes irregularity is also a kind of beauty. Waterfall flow model is such an irregular display wall. Next, we try to use custom ViewGroup to realize waterfall flow. There are many ways to realize waterfall flow. Let's work together:

1、 In fact, we only need to modify this implementation method based on the previous blog. The main modifications are as follows: • layoutparams because the width of each picture in the waterfall flow is set to the same, the height will be different, and the bottom cannot be obtained by adding a fixed height to the top, so I simply define all four parameters here

• onmeasure here, each picture is the same width and higher than the zoom, so it will lead to the layout of waterfalllayout_ Height is useless. At the same time, an array top [colonies] is used to record the current height of each column, so that it can be added to the column with the lowest height when adding pictures next time.

• onlayout because layoutparams defines four parameters of view, you can set them directly

Here is a point to note. Before setting the layoutparams of the subview, you need to clear the top [] array, because onmeasure and onlayout will be called twice, so as to ensure that the parameters are set correctly next time. Extension: why do the onmeasure and onlayout methods in a custom ViewGroup call twice? Because when we new viewgroup(), the values obtained through getwidth() and getheight() are first 0 and 0, and then the size of the view will be measured by calling the onmeasure() and onlayout() methods. At this time, the width and height of the view will change, and the onmeasure and onlayout methods will be called again (these two methods will be called when the view changes). At this time, you can see the measured width and height through the getWidth and getHeight methods. That's why they are called twice.

• click event callback

Use waterfalllayout to add pictures:

We use Scrollview as the outermost layer here, because the photo wall can add photos indefinitely, so that the number of photos can be scrolled after exceeding the frequency screen range. In addition, imageviews are written in XML here. Of course, we can also dynamically add imageviews to this ViewGroup in Java, and the code is more beautiful. Implement the click event callback function of waterfall flow picture:

Let's see the operation effect:

Extension: generally, our custom controls nested in Scrollview will display incompletely. This problem is very tangled. However, when you open the source code of Scrollview, you will find a place. At the same time, you can understand the problem of incomplete display when nested viewpager, GridView and listview in Scrollview.

Here is a trick to make the nested viewpager and listview display completely. For example, we can define our own othergridview, inherit the GridView, and override the onmeasure method. The same is true for other viewgroups:

2、 Inherits Scrollview inherits the waterfall flow model of Scrollview. When there are too many pictures, you need to slide, so you don't have to nest another Scrollview outside. At this time, you do not need to rewrite onmesure, but onlayout • onlayout

• load pictures

Here you can display the waterfall flow photo wall, isn't it very convenient? However, this method also has limitations. For example, the column width here is written as 3 columns, which has no good scalability.

In the code, we don't see that the custom ViewGroup implements the layout method of each childview, so how does the childview layout? In fact, the layout of childview is realized through LinearLayout, that is, the layout method of each childview is called inside LinearLayout. Is this very similar to the composite control when we talked about custom view?

findColumnToAdd(imageView,imageHeight).addView(imageView);

• define picture click callback interface

• when using scrollwaterfalllayout, because only three columns are specified in the code, XML needs three horizontal linearlayouts

Implement the click event callback function of waterfall flow picture:

Operation effect:

Source code download: http://xiazai.jb51.net/201609/yuanma/Android-WaterfallLayout (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.