【问题标题】:Auto Layout : Adjust width base on related view自动布局:根据相关视图调整宽度
【发布时间】:2013-09-08 18:27:47
【问题描述】:

随着 iOS7 的到来,我正在从 Springs 和 Struts 迁移到 Auto Layout。在我想实现以下目标之前很好,

我有一个如下图所示的搜索表单。在某些情况下可以更改 UITextField 宽度。当文本字段的宽度发生变化时,搜索按钮的宽度也会发生变化,以保持彼此和它们的父视图之间的边距。

在 Springs 和 Struts 的时代,当我更改 textfield 的宽度时,我不得不自己计算搜索按钮的框架。但是,使用 Auto Layout,这是否可以自动完成,这样我只需要更改文本字段的大小而无需自己进行数学计算吗?

Container
- Constraint width 

Textfield
- Constraint Bottom, Top, Leading space to super view
- Constraint Trailing space to button
- fix width (will be adjust later)

Button
- Constraint Bottom, Top, trailing space to super view
- Constraint Leading space to textfield

谢谢

附:我还有另一个问题,但与 SOF 无关,当我在 XCode 中对齐、固定或排列某些内容时,我可以禁用编辑器焦点的更改吗?当我想向一个对象添加多个自动布局约束时,这有点烦人。

【问题讨论】:

  • 是的,当您更改文本字段的大小时,搜索按钮的大小将根据您的约束自动更改其大小(您应该通过更改其宽度约束,而不是通过设置它的框架)。

标签: ios autolayout


【解决方案1】:

刚刚试了一下,对我来说效果很好。

//Parent view constraint
NSLayoutConstraint *viewTopCon = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
NSLayoutConstraint *viewBottomCon = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:70.0];
NSLayoutConstraint *viewLeftCon = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
NSLayoutConstraint *viewRightCon = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:10.0];

//Text field constraint
NSLayoutConstraint *textTopCon = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1.0 constant:10.0];
NSLayoutConstraint *textBottomCon = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10.0];
NSLayoutConstraint *textLeftCon = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20.0];
NSLayoutConstraint *textRightCon = [NSLayoutConstraint constraintWithItem:text attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:btn attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-20.0];

//Button constraint
NSLayoutConstraint *btnTopCon = [NSLayoutConstraint constraintWithItem:btn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1.0 constant:10.0];
NSLayoutConstraint *btnBottomCon = [NSLayoutConstraint constraintWithItem:btn attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10.0];
NSLayoutConstraint *btnRightCon = [NSLayoutConstraint constraintWithItem:btn attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30.0];

[self.view addConstraints:@[viewBottomCon,viewLeftCon,viewRightCon,viewTopCon]];
[view addConstraints:@[textBottomCon,textLeftCon,textRightCon,textTopCon]];
[view addConstraints:@[btnBottomCon,btnRightCon,btnTopCon]];

这里的 view 是 UIView 的一个对象,它是 searchField 和 button 的父视图。

【讨论】:

  • 谢谢,我试试。看起来有点吓人,因为我是 AL 的新手,哈哈。
  • 大声笑,即使我在练习 AL。你可以参考这个链接进入它tutorialspoint.com/ios/ios_auto_layouts.htm
  • 谢谢老哥,图片越来越清晰了。 AL 对我来说是一片迷雾 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-10-21
  • 1970-01-01
  • 1970-01-01
  • 2016-04-18
  • 2014-01-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多