問題描述

我有一個從 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.

現(xiàn)在我當(dāng)前的代碼是這樣的

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.

推薦答案

如果我明白你在說什么，你應(yīng)該能夠編寫一個簡單的代碼塊，根據(jù)圖像編號分配位置.

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 值，我從屏幕左側(cè)的最小距離 (leftInset) 開始.然后，我將一張圖像左側(cè)到下一張圖像的距離相加，乘以列 (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.

你讓我進(jìn)一步解釋，所以我會看看我能做什么.

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

好的，所以我希望能夠?qū)D像編號(從 0 開始)輸入到我的函數(shù)中，并且我想要返回原點(左上角點).

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 是同一行上一個圖像的左邊緣到下一個圖像的左邊緣的距離.所以，如果我將它設(shè)置為 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 是圖像上邊緣到其下圖像上邊緣的距離.如果我將此設(shè)置為 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 很簡單.它只是每行的圖像數(shù)量.

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

為了計算圖像左上角的x值，我總是從leftInset開始，因為它是常數(shù).如果我在一行的第一張圖片上，那將是整個 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.

為此，我使用模數(shù) (%) 運算符.它給了我除法運算的余數(shù)，所以當(dāng)我說 imageNumber % numPerRow 時，我要求的是 imageNumber/numPerRow 的余數(shù).如果我在第一張圖像上(imageNumber = 0)，那么 3 不會進(jìn)入 0，余數(shù)是 0.如果我在第二張圖像上(imageNumber = 1)，那么我有 1/3.3 進(jìn)入 1 0 次，但余數(shù)為 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 對應(yīng) 0、1 和 2.我會得到 1 對應(yīng) 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.

這篇關(guān)于自動在 UIScrollView 中布局圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！