为以编程方式生成的视图实现自动布局 [英] Implementing auto layout for views generated programmatically

问题描述

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

I have an app whose views are generated programmatically. Example:

-(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编程了.

Yes. I will update to NIBs and use interface builder and storyboard in the future but I have not done ios programming in a year.

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

With the new iPhone 5 having a different screen size, the app just does not look good and I need to implement auto layout of some sort. Is there a way to do it programmatically for now instead of using IB?

非常感谢！

推荐答案

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

Yes there is, by using two methods in NSLayoutConstraint

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

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

The visual format language is all packaged up into an NSString So I'll take your iouTableView for example.

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

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

The pipe symbol "|" represents the superview's edge. The [] represent a view. So what we did there was we hooked the iouTableView's left and right edge to the left and right edge of its superview.

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

Another example of the visual format: Let's hook your table view, summary label and summary table vertically.

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

现在这将所有三个视图在它们的每条边上垂直连接起来，NSLayoutFormatAlignAllLeft 告诉所有视图向左对齐，它们将根据其他约束来这样做，在这种情况下，前一个约束.() 用于指定视图的大小.

Now this links up all three views vertically on each of their edges, NSLayoutFormatAlignAllLeft tells all the views to align left and they'll do so based on other constraints, in this case, the previous constraint. The ()s are used to specify the size of the views.

有点像不平等和优先级以及-"间隔符号，但 查看苹果文档

There's a bit more like inequalities and priorities as well as the "-" spacer symbol but check out the apple docs for that

更正了示例以使用constraintsWithVisualFormat，如方法签名中所示.

Corrected the examples to use constraintsWithVisualFormat as shown in the method signature.

这篇关于为以编程方式生成的视图实现自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！