Android GridView imitation wechat circle of friends display picture

The recent project requires uploading multiple pictures and displaying them regularly, just like the picture display of wechat circle of friends. GridView is perfect. GridView can dynamically load the number of pictures, and it is quite regular. Here is my idea:

Next, paste some source code and analyze it for you. First, the item of GridView

The squarelayout here is user-defined and will be explained in detail below. The sub item is a square layout with pictures nested inside

2、 Next, because the project requirements of the custom adapter are different, the adapter defined by yourself is not the same as that usually used. The source code will not be pasted here. In general, the images are downloaded locally and loaded with imageloader, but I have failed upload and new ones, so they are different.

3、 Finally, it is set in the activity used

By default, the number of columns in GridView is set to 3. The number of columns is dynamically set according to the number of pictures.

Finally, paste the source code of squarelayout and analyze it

The onmeasure () method is mainly rewritten here to set the height and width. It should be noted that when using squarelayout, its height and width should be match_ parent。 This will fill every item in the GridView. Next, let's show you:

If the property of ImageView's scaletype is set, fitxy will fill the square layout. If center is set, it will be displayed in the center. Let's talk about it in detail: 1) center: keep the size of the original image and display it in the center of ImageView. When the size of the original image is larger than the size of ImageView, part of it will be cropped. 2) Centercrop: for the purpose of filling the whole ImageView, align the center of the original image with the center of the ImageView, and enlarge the original image in equal scale until it is filled with the ImageView (meaning that the width and height of the ImageView should be filled). The part of the original image exceeding the ImageView shall be cropped. 3) Centerinside: for the purpose of fully displaying the original image, the content of the image is completely displayed in the center. By reducing the size of the original image in proportion, the width (height) is equal to or less than the width (height) of ImageView. If the size of the original image itself is smaller than the size of the ImageView, the size of the original image is displayed in the middle of the ImageView without any processing. 4) Matrix: without changing the size of the original image, draw the original image from the upper left corner of the ImageView, and the part of the original image that exceeds the ImageView will be cropped. 5) fitcenter: expand or reduce the original image to the height of the ImageView in proportion, and display it in the middle. 6) fitend: expand (reduce) the original image to the height of the ImageView in proportion, Display in the lower part of ImageView 7) fitstart: enlarge (reduce) the original image to the height of ImageView and display it in the upper part of ImageView 8) fitxy: display the original image in view according to the specified size, stretch the display image, do not maintain the original scale, and fill the ImageView

This article has been sorted into "Android wechat development tutorial summary", welcome to learn and read.

The above is the whole content of this article. I hope it will be helpful to your study.