[英]Autolayout / masonry center multiple views
I use Masonry to create autolayout constraints in code. 我使用Masonry在代码中创建自动布局约束。
This is what I have so far: 这是我到目前为止:
Using the following code: 使用以下代码:
- (void)viewDidLoad {
[super viewDidLoad];
[self.view setBackgroundColor:[UIColor whiteColor]];
UIView *container = [[UIView alloc] init];
[self.view addSubview:container];
UIView *itemContainer = [[UIView alloc] init];
[itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
[container addSubview:itemContainer];
UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
[itemContainer addSubview:itemImage];
UILabel *itemTitle = [[UILabel alloc] init];
[itemTitle setNumberOfLines:1];
[itemTitle setText:@"Lorem ipsum dolor sit amet."];
[itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
[itemTitle setTextColor:[UIColor blackColor]];
[itemContainer addSubview:itemTitle];
UILabel *itemText = [[UILabel alloc] init];
[itemText setNumberOfLines:2];
[itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
[itemText setTextColor:[UIColor blackColor]];
[itemText setFont:[UIFont systemFontOfSize:10]];
[itemContainer addSubview:itemText];
[container makeConstraints:^(MASConstraintMaker *make) {
UIView *topLayoutGuide = (id)self.topLayoutGuide;
make.top.equalTo(topLayoutGuide.bottom);
make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
[itemContainer makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.equalTo(container);
make.height.equalTo(@80);
}];
[itemImage makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.left.equalTo(itemContainer);
make.width.equalTo(itemImage.height);
}];
[itemTitle makeConstraints:^(MASConstraintMaker *make) {
make.top.right.equalTo(itemContainer);
make.left.equalTo(itemImage.right).offset(5);
}];
[itemText makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(itemTitle);
make.top.equalTo(itemTitle.bottom).offset(5);
}];
}
Now I want to center the labels vertically, like so: 现在我想垂直居中标签,如下所示:
My approaches so far have failed. 到目前为止我的方法都失败了。 Any idea how to achieve this with autolayout / Masonry?
任何想法如何通过autolayout / Masonry实现这一目标?
-- EDIT - 编辑
Using spacer views like chris838 suggested is working. 使用像chris838建议的spacer视图是有效的。 This is the updated code:
这是更新的代码:
- (void)viewDidLoad {
[super viewDidLoad];
[self.view setBackgroundColor:[UIColor whiteColor]];
UIView *container = [[UIView alloc] init];
[self.view addSubview:container];
UIView *itemContainer = [[UIView alloc] init];
[itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
[container addSubview:itemContainer];
UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
[itemContainer addSubview:itemImage];
UIView *spacer1 = [[UIView alloc] init];
[itemContainer addSubview:spacer1];
UIView *spacer2 = [[UIView alloc] init];
[itemContainer addSubview:spacer2];
UILabel *itemTitle = [[UILabel alloc] init];
[itemTitle setNumberOfLines:1];
[itemTitle setText:@"Lorem ipsum dolor sit amet."];
[itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
[itemTitle setTextColor:[UIColor blackColor]];
[itemContainer addSubview:itemTitle];
UILabel *itemText = [[UILabel alloc] init];
[itemText setNumberOfLines:2];
[itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
[itemText setTextColor:[UIColor blackColor]];
[itemText setFont:[UIFont systemFontOfSize:10]];
[itemContainer addSubview:itemText];
[container makeConstraints:^(MASConstraintMaker *make) {
UIView *topLayoutGuide = (id)self.topLayoutGuide;
make.top.equalTo(topLayoutGuide.bottom);
make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
[itemContainer makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.equalTo(container);
make.height.equalTo(@80);
}];
[itemImage makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.left.equalTo(itemContainer);
make.width.equalTo(itemImage.height);
}];
[spacer1 makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(itemContainer.top);
make.height.equalTo(spacer2);
}];
[itemTitle makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(spacer1.bottom);
make.right.equalTo(itemContainer);
make.left.equalTo(itemImage.right).offset(5);
}];
[itemText makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(itemTitle);
make.top.equalTo(itemTitle.bottom).offset(5);
make.bottom.equalTo(spacer2.top);
}];
[spacer2 makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(itemContainer.bottom);
make.height.equalTo(spacer1);
}];
}
Often when using auto-layout, I find I have to add additional 'spacer' views to achieve the layout I want. 通常在使用自动布局时,我发现我必须添加额外的“spacer”视图来实现我想要的布局。 See the red coloured views in the example below:
请参阅以下示例中的红色视图:
Once you have the layout you want, you can set the views to hidden. 获得所需的布局后,可以将视图设置为隐藏。 Typically the constraints you would need for your spacer view (in this case) would be:
通常,您的间隔视图(在本例中)所需的约束将是:
The equal heights bit is obviously the key to getting the content centred! 等高位显然是让内容居中的关键!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.