【问题标题】:Grid view in iOS [closed]iOS中的网格视图[关闭]
【发布时间】:2011-01-16 22:36:42
【问题描述】:

我想在我的 iPhone 应用程序中创建一个类似于iPad photos app 中所示的网格视图。是否有可用于添加此类功能的库或框架(非 SDK)?理想情况下,我想最终开发一个 iPad 版本的应用程序,其中网格的纵向宽度为 3 个项目,横向宽度为 4 个,但是目前我希望纵向宽度为 2 个项目,横向宽度为 3 个。

我能想到的唯一方法是继承 UITableView 并拥有一个创建 2 或 3 个项目的自定义单元格。然而,这似乎很混乱,我相信有更好的方法。

一个典型的项目会有一个图片、标签和按钮——没什么太复杂的。

【问题讨论】:

    标签: ios iphone uitableview ipad gridview


    【解决方案1】:

    要在表格视图中创建简单的网格视图,请创建类“GridViewCell”并在头文件中添加:

    @interface GridViewCell : UITableViewCell
    
    @property (nonatomic, strong)  UIButton *column1;
    @property (nonatomic, strong)  UIButton *column2;
    @property (nonatomic, strong)  UIButton *column3;
    
    @end
    

    在 .m 文件中添加以下代码:

    #define CELL_WIDTH 100
    #define CELL_HEIGHT 80
    
    #import "GridViewCell.h"
    
    @implementation GridViewCell
    
    @synthesize column1, column2, column3;
    
    - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        column1 = [[UIButton alloc] initWithFrame:CGRectMake(5, 5, CELL_WIDTH, CELL_HEIGHT)];
        [self addSubview:column1];
        column2 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH+ 10, 5, CELL_WIDTH, CELL_HEIGHT)];
        [self addSubview:column2];
        column3 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH + CELL_WIDTH + 15, 5, CELL_WIDTH, CELL_HEIGHT)];
        [self addSubview:column3];
    }
    return self;
    }
    
    @end
    

    当您创建表格时,在委托 cellForRowAtIndexPath 中使用新类“GridView”:

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
        GridViewCell *cell = (GridViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[GridViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        }
        [cell.column1 setBackgroundColor:[UIColor blackColor]];
        [cell.column2 setBackgroundColor:[UIColor blackColor]];
        [cell.column3 setBackgroundColor:[UIColor blackColor]];
    
        return cell;
    }
    

    【讨论】:

    • 这也是我能想到的最简单的方法,无需使用 UICollectionView(仅从 iOS 6 开始可用)或 3rd 方库。但我也在阅读那些 3rd 库的源代码,看看有没有更好的方法,但它们似乎更难以理解。不知道我是否错过了任何关键部分。
    【解决方案2】:

    对于 iOS 6 及更高版本,我推荐 UICollectionViewPSTCollectionView

    目标是在 iOS 4/5 上使用 PSTCollectionView 作为后备和 在 iOS6 上切换到 UICollectionView。我们甚至使用某些运行时技巧 在运行时为旧版本的 iOS 创建 UICollectionView。 理想情况下,您只需链接文件,一切都适用于旧版本 系统。

    2010年我推荐AQGridView

    【讨论】:

    • 我想补充一点,目前水平布局模式有问题。如果您对此功能感兴趣,请考虑使用其他功能。
    • @Nailer,我更新了我的答案以推荐 UICollectionView 而不是 AQGridView。
    【解决方案3】:

    NRGridView 似乎是最好的方法。你可以找到它here

    它具有与 UITableView 类似的方法。可以根据需要自定义单元格。

    【讨论】:

      【解决方案4】:

      我会推荐使用自定义 UITableViewCells。在 iOS 5 中,您不必对它们进行子类化。 只需将 tableView 添加到您的项目,使用 Xcode 将原型单元格(=自定义单元格)添加到 tableView,给它们一个唯一标识符并在 cellForRowAtIndexPath 中使用此标识符来出列并实例化您的自定义单元格。然后设置单元格并返回它。

      【讨论】:

        【解决方案5】:

        我知道这已经很老了,但我一直在寻找答案并测试了几种解决方案。我发现 GMGridView 是最好的、错误最少的解决方案之一。查看https://github.com/gmoledina/GMGridView

        【讨论】:

        • 自从这篇文章之后,我最近转而在我的项目中使用 KKGridView。查看github.com/kolinkrewinkel/KKGridView
        • 想评论一下你为什么转行?只是好奇这些差异。
        • @morcutt 我使用过 GMGridView 并发现它非常好(到目前为止)。也想知道你为什么切换..
        • @Ben 是的,我发现 GMGridView 也很好。我唯一的抱怨是它不支持设置垂直和水平网格单元格间距。我在 10 分钟内解决了这个问题,为此引入了单独的值,而不仅仅是一个 itemSpacing 属性。
        【解决方案6】:

        您仍然可以为此使用 UITableView,并且不需要对其进行子类化。就像您说的那样,您所要做的就是创建自己的自定义单元格,这并不复杂。一点也不乱:)

        【讨论】:

        • 图片会正常显示,但是如果我想点击图片怎么办。在这种情况下,将选择整行而不是自定义 UITableViewCell 中的单个 UIView。
        • 使用附加到每个 UIImageView 的 UITapGestureRecognizer 而不是使用 didSelectRowAtIndexPath
        猜你喜欢
        • 1970-01-01
        • 2014-08-07
        • 2020-09-28
        • 1970-01-01
        • 2012-07-11
        • 1970-01-01
        • 2017-04-27
        • 2011-04-05
        • 1970-01-01
        相关资源
        最近更新 更多