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

时间:2009-05-04 15:25:04

标签: iphone uikit view uiscrollview

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

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

4 个答案:

答案 0 :(得分:2)

我在我的应用程序中做了一些非常相似的事情 - 一个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]

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

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)