为以编程方式生成的视图实现自动布局答案

【问题标题】：Implementing auto layout for views generated programmatically为以编程方式生成的视图实现自动布局
【发布时间】：2012-09-17 13:44:48
【问题描述】：

我有一个应用程序，它的视图是以编程方式生成的。示例：

-(void)loadView
{
    [super loadView];

// SET TOP LEFT BTN FOR NEXT VIEW
UIBarButtonItem *topLeftBtn = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStyleBordered target:nil action:nil];
self.navigationItem.backBarButtonItem = topLeftBtn;
[topLeftBtn release];

// programmatically set up the view for cart tableView
CGRect iouTableViewFrame = CGRectMake(0, 0, 320, 348);
iouTableView = [[UITableView alloc]initWithFrame:iouTableViewFrame style:UITableViewStylePlain];
[[self iouTableView] setDelegate:self];
[[self iouTableView] setDataSource:self];
[[self view] addSubview:iouTableView];

// set up the summary label
CGRect summaryTableFrame = CGRectMake(0, 348, 320, 18);
UILabel *summaryTableLabel = [[UILabel alloc] initWithFrame:summaryTableFrame];
[summaryTableLabel setFont:[UIFont fontWithName:@"Helvetica" size:14]];
[summaryTableLabel setText:@"   Summary"];
UIColor *labelColor = UIColorFromRGB(MiddleBlueColor);
[summaryTableLabel setBackgroundColor:labelColor];
[summaryTableLabel setTextColor:[UIColor whiteColor]];
[[self view] addSubview:summaryTableLabel];

// set up the summary table
CGRect summaryTableViewFrame = CGRectMake(0, 366, 320, 44);
summaryTableView = [[UITableView alloc]initWithFrame:summaryTableViewFrame style:UITableViewStylePlain];
[summaryTableView setScrollEnabled:NO];
[[self summaryTableView] setDelegate:self];
[[self summaryTableView] setDataSource:self];
[[self view] addSubview:summaryTableView];
}

是的。以后会更新到NIB，用interface builder和storyboard，但是一年没做ios编程了。

随着新 iPhone 5 的屏幕尺寸不同，应用程序看起来不太好，我需要实现某种自动布局。现在有没有办法以编程方式而不是使用 IB？

非常感谢！

【问题讨论】：

标签： ios uiview interface-builder ios6 autolayout

【解决方案1】：

是的，通过在 NSLayoutConstraint 中使用两种方法

-(NSArray*)constraintsWithVisualFormat:options:metrics:views:
-(NSLayoutConstraint*)constraintWithItem:attribute:relatedBy:toItem:attribute:
    multiplier:constant:

视觉格式语言全部打包成一个 NSString 所以我以你的 iouTableView 为例。

[self.view addConstraints:[NSLayoutConstraint 
    constraintsWithVisualFormat:@"|[iouTableView]|" 
    options:0 
    metrics:nil 
    views:NSDictionaryOfVariableBindings(iouTableView)]];

管道符号“|”代表superview的边缘。 [] 代表一个视图。所以我们在那里所做的就是将 iouTableView 的左右边缘连接到其父视图的左右边缘。

视觉格式的另一个例子：让我们垂直挂钩您的表格视图、汇总标签和汇总表。

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:
    @"V:|[iouTableView(348)][summaryTableLabel(18)][summaryTableView(44)]"
    options:NSLayoutFormatAlignAllLeft
    metrics:nil
    views:NSDictionaryOfVariableBindings(iouTableView, summaryTableLabel, summaryTableView)]];

现在这将所有三个视图在它们的每个边缘上垂直连接起来，NSLayoutFormatAlignAllLeft 告诉所有视图左对齐，并且它们将根据其他约束（在本例中为前一个约束）这样做。 ()s 用于指定视图的大小。

有点像不等式和优先级以及“-”分隔符，但check out the apple docs for that

编辑：更正示例以使用方法签名中所示的 constraintsWithVisualFormat。

【讨论】：

您的第二个示例是否还需要将另外两个视图添加到对象的 NSDictionary 绑定名称中？ IE。 NSDictionaryOfVariableBindings(iouTableView, summaryTableLabel, summaryTableView) 而不是 iouTableView 那里？
是的，我现在修复它！
@David Wong 是否也可以使用 UITableView 和 UIButton？使用该方法时，我有一个由 [self.view addConstraints...] 触发的未捕获的 NSException
您不应该在 UITableView 中添加不是单元格/页脚/页眉/部分等的内容。如果您想要表格视图上的按钮，最好执行一些视图控制器遏制。如果这不是您要寻找的答案，请考虑提出一个新问题。

【解决方案2】：

除了 Aplle 提供的方法之外，您还可以使用 Parus lib 从代码中操作 AutoLayout。

例如，您可以指定：

PVVFL(@"[view1]-20-[view2]").fromRightToLeft.withViews(views).asArray

代替

[NSLayoutConstraint constraintsWithVisualFormat:@"[view1]-20-[view2]"
                                        options:NSLayoutFormatDirectionRightToLeft
                                        metrics:nil
                                          views:views]

您还可以对布局设置进行分组，混合 VFL 而不是 VFL 约束。 Parus 能够防止常见错误，区分 location 和 parameters 约束，并提供出色的自动完成支持。

【讨论】：