Android GridView 3 x 6 Cropping Images

I would like to create a grid of square images, but I cannot get the images to appear as needed. I started with the GridView tutorial:

http://developer.android.com/resources/tutorials/views/hello-gridview.html

which seemed close to what I want.

The only difference that I see is that I want exactly 18 images, and they should all be square. I set the number of columns to 3, and then upload 18 images, which should be in 6 rows. I want the images to completely fill each line and not leave extra unnecessary gaps. I do not know the size of the images until they are downloaded to the phone. Hopefully they will be almost square for a start, but I need to crop the center to make them perfectly square, and then scale them to completely fill 3 columns. I need images to keep their proportions.

I cannot find the settings or code to make this work. Images overlap, have spaces, do not scale properly, or something else is wrong.

The closest I got is to change the GridView tutorial as follows when my emulator is set to 480x800:

 imageView.setLayoutParams (new GridView.LayoutParams (480/3, 480/3));
 imageView.setScaleType (ImageView.ScaleType.CENTER_CROP);
 imageView.setPadding (0, 0, 0, 0);
 imageView.setAdjustViewBounds (true);

 ====

 & lt GridView 
     xmlns: android = "http://schemas.android.com/apk/res/android" 
     android: id = "@ + id / gridview" 
     android: layout_width = "fill_parent" 
     android: layout_height = "fill_parent" 
     android: numColumns = "3" 
     android: stretchMode = "columnWidth" 
     android: gravity = "fill | clip_horizontal | clip_vertical"
 /> 

This is almost correct. The square test images that I use pass a couple of pixels, and not the square images are not cropped, but instead are placed inside with a black box to preserve the coefficient, and hard-coded values ​​are fragile and will not work on all phones, orientations or layouts. I'm curious that the CENTER_CROP documentation seems to claim that it will do what I want, expanding to fit the image, but instead CENTER_INSIDE seems to be.

I feel close, but never get what I want. Maybe I should use something other than a GridView? Any suggestions?

Please do not joke.

Thanks.

+4
source share
1 answer

CENTRE_CROP is CENTRE_CROP right answer, but can you upload a screenshot so I can figure it out and help you with the problem you are facing?

I also suggest you download the item_layout xml file.

Make sure you use the width of the <ImageView> for a specific size.

For different screen size flexibility, I suggest you get the screen width programmatically , divide the width by 3 and subtract the indent from it, and after that set the same value for the width and height of the image, this will give you a square image on any screen.

0
source

Source: https://habr.com/ru/post/1343872/


All Articles