您将如何在iPhone应用程序中实现可滚动网格？

Question

我有大约50张每张50 x 50像素大小的图像。我希望用户选择其中一个。所以首先我想到了一个UITableView，但这不是正确的事情。它浪费了很多屏幕空间。而不是将所有图像放在另一个之下，最好显示一个6个列和n行的网格。

我会使用UIScrollView并用UIView对象填充它，我会自动排列它们，使它们看起来像一个网格。这是要走的路吗？还是其他任何建议？

Answer 1

我在我的应用程序中做了一些非常相似的事情 - 一个NxN网格，下面有一个图像，另一个子视图在顶部绘制“线条”，全部由UIScrollView拥有。我建议使用单独的视图来绘制图像，例如：

-(void) drawRect(CGRect rect) {
    CGRect smallerRect = CGRectMake(x, y, width, height);
    [yourImage drawRect: smallerRect];
    // repeat as needed to draw the grid
 }

另一张海报提到，如果您的视图归UIScrollView所有，您将无法获得触摸事件 - 这根本不是真的。我有它的工作。您可能需要设置以下内容：

[yourScrollView setUserInteractionEnabled: YES]
[yourGridView setUserInteractionEnabled: YES]

Answer 2

three20 library 有一个类可以执行此操作。

Answer 3

表格视图并不一定意味着每行显示一个图像，如您所建议的那样。可以自定义表格单元格，并且具有六个50x50 UIImageViews的单元格子类将非常简单。它可能不如滚动视图灵活，但如果每行六个图像是你的目标，那么表格视图是获得它的最快方式。

Answer 4

three20很可怕，香港专业教育学院使用它，我不推荐它...显示网格很容易......

    - (void) reloadGridView
    {

        scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(5, 54, scrollViewWidth, scrollViewHeight8)];
        scrollView.delegate = self;
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.userInteractionEnabled = YES;
        scrollView.scrollEnabled = YES;

        [self.view addSubview:scrollView];


        int x = 10;
        int y = 10;

        divisor = 1;

        for (int i = 0; i < [self.photosArray count]; i++) {

            int buttonTag = divisor;

            UIImage *thumb = [UIImage imageWithContentsOfFile:[self thumbPathAtIndex:i]];
            //********* CREATE A BUTTON HERE **********
            //********* use the thumb as its backgroundImage *******


            if(divisor%4==0){
                y+=70; 
                x = 10;

            }else{
               x += 70;
            }

            divisor++;
        }
        [scrollView setContentSize:CGSizeMake(scrollViewWidth, ([self.photosArray count]%4 == 0) ? y : y+100)];

}

如果你想在风景中想要6张图片 - 为isLandscape设置BOOL

if (isLandscape) {
    //change the divisor to change @ 6 instead of 4
}

如果您需要更高级的gridView，请查看AQGridView（Google it）