如何创建像 iPhone 主屏幕这样的图标网格？答案

【问题标题】：How do I create a grid of icons like the iPhone home screen?如何创建像 iPhone 主屏幕这样的图标网格？
【发布时间】：2010-10-05 05:21:00
【问题描述】：

我应该如何在 iPhone 上创建类似于 Springboard（主屏幕）的 UI？我想要一个间隔均匀的按钮网格，其中包含可以响应按钮点击的图像。

UITable 合适吗？我应该使用普通的 UIView 并在 DrawRect 中手动定位图标吗？是否有替代方案可以自动均匀地间隔按钮、允许重新组织并根据 iPhone 方向调整布局？

我来自 C#/Winforms 背景，现在正在使用 2.2.1 标头在 Open Toolchain 上开始 iPhone 开发。

【问题讨论】：

也许您应该提供更多域信息。并使用您用于开发的框架标记问题。
“域信息”？就像...应用程序的目的？它将是一个图标网格，按下时会播放声音。有哪些框架？我是新手，不知道所有的名字是什么。如何确定我使用的是哪个框架？

标签： iphone cocoa-touch uitableview uibutton quartz-graphics

【解决方案1】：

您需要添加您的图标（它们是某种 UIView）作为“跳板”视图的子视图。不需要自定义绘图，UITable 是绝对错误的方法。您只需进行数学运算以正确放置它们（通过设置它们的框架）。

【讨论】：

手动数学路线？我曾希望有一个更简单的方法。那好吧。谢谢！我对 UITable 并不聪明。为什么不合适？
UITable 非常适合列表。每个对象在其自己的行中。不过，UIView 允许您布置自己的网格，并在任何您想要的地方使用视图。
有道理。从 .NET 的角度来看，UITable 更像是 GridView 而不是 TableLayout。
在 iPhone 上，一个 UITableView 只有一列。总是。所以它不适合网格。它更像是一个精美的轮廓列表视图。

【解决方案2】：

@August：我听取了您的建议并将 UIButtons 添加为 UIView 的子视图，而不是进一步查看 UITable。谢谢！

希望下面的代码能帮助其他人快速入门。我在网格中静态放置了 4 个按钮。根据父 UIView 的边界和方向放置任意数量的按钮应该不会太难。

@implementation IconView
- (id)initWithFrame:(struct CGRect)windowRect{
  self = [super initWithFrame: windowRect];
  if (self != nil){
    for(int i = 0; i < 4; i++){
      buttons[i] = [self buildButton];
      [self addSubview: buttons[i]];
    }
    [self reInit];
  }
  return self;
}
- (UIButton *) buildButton{
  UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
  [button setBackgroundImage: [[UIImage imageNamed:@"icon.png"] stretchableImageWithLeftCapWidth:60 topCapHeight:0] forState:UIControlStateNormal];
  return [button autorelease];
}
- (void)reInit{
  CGRect rect;
  rect = buttons[0].frame;
  rect.origin = CGPointMake(5, 5);
  buttons[0].frame = rect;

  rect = buttons[1].frame;
  rect.origin = CGPointMake(70, 5);
  buttons[1].frame = rect;

  rect = buttons[2].frame;
  rect.origin = CGPointMake(5, 70);
  buttons[2].frame = rect;

  rect = buttons[3].frame;
  rect.origin = CGPointMake(70, 70);
  buttons[3].frame = rect;
}
@end

【讨论】：

什么是“按钮”？你是如何得到 UIButton 的集合的？
一个 UIButton 只是一个带有一些额外方法的 UIView。将示例更改为使用 UIView 而不是 UIButton 将是微不足道的。

【解决方案3】：

使用 Arijasoft 的 gridView 实现。它是一个静态库，可让您使用回调和委托方法生成网格类型的视图以进行优化

【讨论】：

这是一个商业图书馆吗？如果有，费用是多少？
他们说网站上上传的演示版可以工作到最后一天 2 月。如果您需要商业图书馆，请联系他们

【解决方案4】：

我已经编写了一些示例代码来做这样的事情。请参阅我的 Tiles 博客条目，或直接下载代码：Tiles-v1.0.zip。

我的代码将图标创建为核心动画层，而不是 UIView，但确实演示了如何检测点击并允许重新组织图标。它不处理方向变化。

【讨论】：

【解决方案5】：

旧线程，但您也应该查看 Alan Quartrmain 的 AQGridView。

【讨论】：

我仔细研究了 AQGridView - 它似乎可以做所有事情，并且在一些商业应用程序中使用它。最终决定反对它，因为（1）它很大，很多代码让我感到困惑，不能那么难吗？！（2）当我拖动图标时它崩溃了。将其与大型代码库结合起来，您可以推断出，当您可以编写自己的代码时，您最终将花费大量时间来修复其他人的代码。我喜欢 AQGridView 采用的方法——它基于 UITableView，带有委托和源，以及可重用的单元格。但我会自己动手。

【解决方案6】：

如上所述，使用 UIView 并通过数学计算来布局视图是最简单的选择。

查看 developer.apple.com https://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007795 的示例代码

根据您的要求，您可能不需要使用任何外部框架。

【讨论】：