自动在 UIScrollView 中布局图像

问题描述

我有一个从 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.我会得到 1 对应 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);

如果这不起作用，请扔掉

If that doesn't work, throw in

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

以确保您确实从 getImageOrigin 中得到了返回.

to make sure that you are actually getting something back from getImageOrigin.

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