自动在UIScrollView中布局图像 [英] laying out images in UIScrollView automatically

问题描述

我有一个从xml中检索到的图像列表，我希望按顺序将它们填充到uiscrollview，使其看起来像这样。

i have a list of images retrieved from xml i want to populate them to a uiscrollview in an order such that it will look like this.

如果只有10张图片就停在这里。

if there is only 10 images it will just stop here.

现在我的当前代码是这个

right now my current code is this

for (int i = 3; i<[appDelegate.ZensaiALLitems count]-1; i++) {
        UIButton *zenbutton2 =[UIButton buttonWithType:UIButtonTypeCustom];
        Items *ZensaiPLUitems = [appDelegate.ZensaiALLitems objectAtIndex:i];
        NSURL *ZensaiimageSmallURL = [NSURL URLWithString:ZensaiPLUitems.ZensaiimageSmallURL];
        NSLog(@"FVGFVEFV :%@", ZensaiPLUitems.ZensaiimageSmallURL);
        NSData *simageData = [NSData dataWithContentsOfURL:ZensaiimageSmallURL];
        UIImage *itemSmallimage = [UIImage imageWithData:simageData];
        [zenbutton2 setImage:itemSmallimage forState:UIControlStateNormal];
        zenbutton2.frame=CGRectMake( (i*110+i*110)-660 , 300, 200, 250);
        [zenbutton2 addTarget:self action:@selector(ShowNextZensaiPage) forControlEvents:UIControlEventTouchUpInside];
        [scrollView addSubview:zenbutton2];
}

注意CGRectMake，我必须手动分配固定值来定位它们。
有没有办法在不手动分配的情况下填充它们。
例如，一旦第一行有3张图像，图像将自动向下移动一个位置，然后用于其余图像。

notice the CGRectMake , i have to manually assign fixed values to position them. Is there any way to populate them out without manually assigning. for e.g the images will automatically go down a position once the first row has 3 images and subsequently for the rest.

推荐答案

如果我理解你在说什么，你应该能够编写一个简单的代码块，根据图像编号指定一个位置。

If I understand what you are saying, you should be able to write a simple block of code that assigns a position based on the image number.

这样的东西（其中i是图像编号，从0开始）：

Something like this (where i is the image number, starting from 0):

- (CGPoint)getImageOrigin:(NSInteger)imageNumber {

    CGFloat leftInset = 30;
    CGFloat xOffsetBetweenOrigins = 80;
    CGFloat topInset = 20;
    CGFloat yOffsetBetweenOrigins = 80;

    int numPerRow = 3;

    CGFloat x = leftInset + (xOffsetBetweenOrigins * (imageNumber % numPerRow));
    CGFloat y = topInset + (yOffsetBetweenOrigins * floorf(imageNumber / numPerRow));

    CGPoint imageOrigin = CGPointMake(x, y);

    return imageOrigin;

}

这里计算的原点是每个的左上角图像。

The origin being calculated here is the upper left corner of each image.

要计算x值，我从屏幕左侧的最小距离（leftInset）开始。然后，我将从一个图像左侧到下一个图像的距离乘以列（ imageNumber％numPerRow ）。

To calculate the x value, I start with the minimum distance from the left side of the screen (leftInset). Then, I add the distance from the left side of one image to the next image, multiplied by the column (imageNumber % numPerRow).

Y以类似的方式计算，但为了计算行，我使用 imageNumber / numPerRow 向下舍入。

Y is calculated in a similar fashion, but to calculate the row, I use the imageNumber / numPerRow rounded down.

编辑：

你让我进一步解释，所以我会看到我能做些什么。

You asked me to explain further, so I'll see what I can do.

好的，所以我希望能够将图像编号（从0开始）输入到我的函数中，然后我想要原点（左上角点）。

OK, so I want to be able to input the image number (starting at 0) into my function, and I want the origin (upper left corner point) back.

leftInset 是视图左边缘与第一张图像左边缘之间的距离。

leftInset is the distance between the left edge of the view, and the left edge of the first image.

xOffsetBetweenOrigins 是从一个图像的左边缘到同一行的下一个图像的左边缘的距离。因此，如果我将其设置为80并且我的图像宽度为50px，则同一行中的两个图像之间将存在30px的间隙。

xOffsetBetweenOrigins is the distance from the left edge of one image to the left edge of the next image on the same row. So, if I set it to 80 and my image is 50px wide, there will be a 30px gap between two images in the same row.

topInset 就像是左边的插图。它是从顶视图的顶边到顶行图像顶边的距离。

topInset is like left inset. It is the distance from the top edge of the view to the top edge of the images in the top row.

yOffsetBetweenOrigins 是图像上边缘到下方图像上边缘的距离。如果我将其设置为80，并且我的图像高度为50px，那么行之间将存在30px的垂直间隙。

yOffsetBetweenOrigins is the distance from the top edge of an image to the top edge of the image below it. If I set this to 80, and my image is 50px tall, then there will be a 30px vertical gap between rows.

numPerRow 很简单。它只是每行图像的数量。

numPerRow is straightforward. It is just the number of images per row.

要计算图像左上角的x值，我总是从leftInset开始，因为它是常量。如果我在一行的第一个图像上，那将是整个x值。如果我在行的第二个图像上，我需要添加 xOffsetBetweenOrigins 一次，如果我在第三个，我需要添加两次。

To calculate the x value of the upper left corner of the image, I always start with the leftInset, because it is constant. If I am on the first image of a row, that will be the entire x value. If I am on the second image of the row, I need to add xOffsetBetweenOrigins once, and if I am on the third, I need to add it twice.

为此，我使用模数（％）运算符。它给了我除法运算的余数，所以当我说imageNumber％numPerRow时，我要求imageNumber / numPerRow的剩余部分。
如果我在第一张图像上（imageNumber = 0），那么3次没有进入0，余数为0.如果我在第二张图像上（imageNumber = 1），那么我有1/3 。 3进入1 0次，但​​剩余部分是1，所以我得到xOffsetBetweenOrigins * 1.

To do this, I use the modulus (%) operator. It gives me the remainder of a division operation, so when I say imageNumber % numPerRow, I am asking for the remainder of imageNumber/numPerRow. If I am on the first image (imageNumber = 0), then 3 goes into 0 no times, and the remainder is 0. If I am on the second image (imageNumber = 1), then I have 1/3. 3 goes into 1 0 times, but the remainder is 1, so I get xOffsetBetweenOrigins*1.

对于y值，我做了类似的事情，但没有采取模数，我只是将imageNumber / numPerRow除以并向下舍入。这样做，我会得到0表示0,1和2.我会得到3表示3,4和5。

For the y value, I do something similar, but instead of taking the modulus, I simply divide imageNumber/numPerRow and round down. Doing this, I will get 0 for 0, 1, and 2. I will get 1 for 3, 4, and 5.

编辑：

我突然想到你可能真的一直在问如何使用这种方法。在你的代码中，你会说类似

It occurred to me that you might actually have been asking how to use this method. In your code, you would say something like

CGRect newFrame = zenbutton2.frame;
newFrame.origin = [self getImageOrigin:i];
zenbutton2.frame = newFrame;

另一个编辑：

也许你可以试试这个？

CGPoint origin = [self getImageOrigin:i];
zenbutton2.frame = CGRectMake(origin.x, origin.y, width, height);

如果不起作用，请投入

NSLog("Origin Values: %f,%f", origin.x, origin.y);

确保您实际上从 getImageOrigin 。

这篇关于自动在UIScrollView中布局图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！