iphone - iphone sdk中带有分页的图像网格

Question

我想在带有分页的滚动视图中显示图像网格。所有图像都来自服务器。我知道使用带有分页的滚动视图。但是我们如何在带有分页的滚动视图中显示图像。我可以知道如何做到这一点吗？

Answer 1

最好使用您自己的逻辑在滚动视图中排列图像

创建一个启用分页的 UiScrollView.. 要做到这一点，请参考此链接

通过调整imageView的X 和 Y 坐标创建一个 for 循环

从上面的链接，下面这两种方法将帮助您实现功能

- (void)scrollViewDidScroll:(UIScrollView *)sender {
    // Update the page when more than 50% of the previous/next page is visible
    CGFloat pageWidth = self.scrollView.frame.size.width;
    int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    self.pageControl.currentPage = page;
}


- (IBAction)changePage {
    // update the scroll view to the appropriate page
    CGRect frame;
    frame.origin.x = self.scrollView.frame.size.width * self.pageControl.currentPage;
    frame.origin.y = 0;
    frame.size = self.scrollView.frame.size;
    [self.scrollView scrollRectToVisible:frame animated:YES];
}

Answer 2

干得好：

// an array of uiimageviews (will be easier to deal with than UIImages
NSMutableArray * images = [[NSMutableArray alloc] init]; 

[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]]];



//we're going to split them into groups of four
NSMutableArray * groupsOfFour = [[NSMutableArray alloc] init];
for(NSInteger i = 0; i < [images count]; i+=4)
{

    NSRange theRange;
    theRange.location = i;
    theRange.length = 4;

    if( [images count] - i < 4)
    {
        theRange.length = [images count] - i;
    }

    if([images subarrayWithRange:theRange])
        [groupsOfFour addObject:[images subarrayWithRange:theRange]];

}

//groupsOfFour will now contain arrays of groups of 4 images

//from that we can work out the content width of out scrollview
float contentWidth = 320*[groupsOfFour count];

//make the scrollview
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,320,480)];
scroll.contentSize = CGSizeMake( contentWidth , 480);
scroll.showsHorizontalScrollIndicator = YES;
scroll.pagingEnabled = YES; //set paging enabled
[self.view addSubview:scroll];

//no we loop through the groups of 4 and add each image we find into a uiview
//this is important because then each group will be separate, 
//and so the paging will automatically lock to them

for(NSInteger i = 0; i < [groupsOfFour count]; i++)
{
    NSMutableArray * thisGroup = [groupsOfFour objectAtIndex:i];

    UIView * groupOfFourView = [[UIView alloc] initWithFrame:CGRectMake(i*320, 0, 320, 480)];

    UIImageView*topLeft = [thisGroup objectAtIndex:0];
    topLeft.frame = CGRectMake(0, 0, 160, 240);
    [groupOfFourView addSubview:topLeft];


    //these if statements check that there is an image for this position 
    //(the last page is likely to have only 1 or 2 images on it)

    if([thisGroup count] > 1)
    {
        UIImageView*topRight = [thisGroup objectAtIndex:1];
        topRight.frame = CGRectMake(160, 0, 160, 240);
        [groupOfFourView addSubview:topRight];
    }

    if([thisGroup count] > 2)
    {
        UIImageView*bottomLeft = [thisGroup objectAtIndex:2];
        bottomLeft.frame = CGRectMake(0, 240, 160, 240);
        [groupOfFourView addSubview:bottomLeft];
    }
    if([thisGroup count] > 3)
    {
        UIImageView*bottomRight = [thisGroup objectAtIndex:3];
        bottomRight.frame = CGRectMake(160, 240, 160, 240);
        [groupOfFourView addSubview:bottomRight];
    }


    //finally add the group of four to our scrollview
    [scroll addSubview:groupOfFourView];
}