自动在 UIScrollView 中布局图像

Question

我有一个从 xml 检索到的图像列表，我想将它们按如下顺序填充到 uiscrollview 中。

1 2 3

4 5 6

7 8 9

10

如果只有 10 张图片，它将停在这里。

现在我当前的代码是这样的

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 个图像，图像将自动下降一个位置，然后是其余的。

Answer 1

如果我明白你在说什么，你应该能够编写一个简单的代码块，根据图像编号分配位置。

类似这样（其中 i 是图像编号，从 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;

}

这里计算的原点是每张图片的左上角。

为了计算 x 值，我从屏幕左侧的最小距离 (leftInset) 开始。然后，我将一张图像左侧到下一张图像的距离相加，乘以列 (imageNumber % numPerRow)。

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

编辑：

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

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

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

xOffsetBetweenOrigins 是同一行上一张图像的左边缘到下一张图像的左边缘的距离。所以，如果我将它设置为 80 并且我的图像是 50px 宽，那么同一行中的两个图像之间会有 30px 的间隙。

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

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

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

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

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

对于 y 值，我做了类似的事情，但我没有取模，而是简单地将 imageNumber/numPerRow 相除并向下取整。这样做，我会得到 0 对应 0、1 和 2。我会得到 1 对应 3、4 和 5。

编辑：

我突然想到，您实际上可能一直在问如何使用此方法。在您的代码中，您会说类似

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 得到了回报。

Answer 2

我认为您可能希望将循环包装在另一个循环中，以获得我将称之为 2D 循环的内容：

for (int row = 0; row < num_rows; row++) {
   for (int col = 0; col < num_cols; col++) {
        // code before
        zenButton2.frame = CGRectMake(origin x dependent on col,
                                      origin y dependent on row,
                                      width,
                                      height);
        // code after
   }
}

CGRectMake() 的 x 和 y 分别是图像宽度和高度乘以行和列的倍数。希望这是有道理的。