如何在Xcode故事板上显示具有灵活内容的界面

Question

我需要在视图控制器中显示咖啡馆的详细信息。 咖啡馆数据来自API调用，每个咖啡馆可能有不同的数据集。

通常，视图将按顺序显示以下内容：

• 咖啡馆名称
• 地址
  • 最小2行，最大4行。
• 联系电话
  • 可能为空，最多2套联系电话
• 电子邮件
  • 可能是空的
• 说明（HTML）
• 链接到社交媒体或网站
  • 可能为空，最多可达4组URL
• 地图

我需要的：

• 如果数据不为空，则在视图中显示数据
• 能够在前一个元素之前设置间距

我正在使用xcode storyboard，视图控制器嵌入在导航控制器和Tab栏控制器中。

处理灵活/动态界面的推荐方法是什么，我可以遵循任何指南或教程吗？ 到目前为止，我能找到的所有帮助都是将元素简单地放置在固定坐标中。 对于我的情况，某些元素大小可能会根据API调用返回的数据而改变。

Answer 1

有几种方法可以做到这一点..

有了这么多的数据，我将创建一个表格视图，并将每行数据（或相关数据段）放在自己的行中，这将为您提供一个自由滚动视图，您最需要动态内容的滚动视图。

至于确定单元格的高度，您可以计算文本将占据以显示适当高度的“边界框”的高度。 这是一个例子....

+ (CGFloat)heightForText:(NSString *)text {

    CGFloat topMargin = 10.0; // add a bit of padding to top
    CGFloat bottomMargin = 10.0; // add a bit of padding to bottom
    CGFloat minHeight = 44.0;

    NSAttributedString *string = [NSAttributedString attributedStringWithText:text lineHeight:23 font:[UIFont systemFontWithSize:15] color:[UIColor blackColor] alignment:NSTextAlignmentLeft];

    CGRect screenSize = [[UIScreen mainScreen] bounds];
    CGRect size = [string boundingRectWithSize:CGSizeMake(screenSize.size.width - 70, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin context:nil];
    return MAX(minHeight, size.size.height + topMargin + bottomMargin);
}

如果您想要更清晰，请告诉我。

您还可以使用故事板约束，如果正确完成将为您精美地计算所有内容，但您需要考虑用户可能需要滚动内容的事实，即您需要滚动视图。

Answer 2

您所描述的内容非常类似于电话（或联系人）应用中的联系人屏幕。 只需使用相同的解决方案：表视图。 咖啡馆名称一行。 地址的一行（包含文本视图）。 每个联系号码一行。 每个电子邮件地址一行。 一行带有用于描述的嵌入式Web视图（如果可以使用RTF代替HTML，则为文本视图）。 每个社交媒体链接一行。 一行带有嵌入式地图视图。

Answer 3

您绝对应该在接口构建器中使用约束。 有了约束，您可以设置每个控件/视图之间的间距。

这是官方指南 ：

这是关于iOS7中自动布局和约束如何工作的完整教程 （类似于iOS6）：

Answer 4

您可以使用故事板执行此操作，同时添加一个新的视图控制器，并使其尺寸灵活。

看到这个屏幕截图。