按钮和自动布局

Posted 2023-03-15

【中文标题】按钮和自动布局

【英文标题】：Buttons and auto layout

【发布时间】：2013-07-30 15:03:21

【问题描述】：

我想构建这样的界面：

在禁用自动布局的情况下，我成功创建了这 6 个按钮，并通过代码根据屏幕高度对它们进行了很好的调整。但是，当禁用自动布局时，所有其他控制器变得“混乱”，所以我尝试创建/调整启用自动布局的那些按钮。并且没有办法在启用自动布局的情况下实现这样的界面。我的问题是，在启用自动布局的情况下调整这 6 个按钮是否有任何技巧和解决方案？或者也许有一个图书馆？我真的很累。 感谢您的帮助。

【问题讨论】：

调整是什么？

@MaxMacLeod：每个按钮的高度为 screen_height/3，宽度为 screen_width/2。

“没有办法在启用自动布局的情况下实现这样的界面”——当然有。自动布局可以做任何事情，而且比支柱和弹簧更多。您到底想实现什么布局？这6个按钮应该占据整个屏幕吗？你想让他们适应屏幕尺寸吗？要轮换吗？

@rdelmar：这 6 个按钮之间的边距必须为 0（如上图所示），是的，它们占据了整个屏幕。我的问题是正常（非视网膜屏幕）一切正常，当我更改为 3.5 或 4 英寸屏幕时，它们是相关的，但我在底部有一个白边。问题是如何定义屏幕尺寸函数的约束。

@rdelmar：它们在非视网膜屏幕中的高度是 150，如何在视网膜屏幕中将它们更改为 180（或 190）。我将所有按钮的高度和宽度约束配置为相等。

【参考方案1】：

我看到您找到了答案，但我还是会发布我的答案，因为它使用了不同的方法。当 6 个按钮之间存在如此多的依赖关系时（因为系统在 IB 中为您添加的约束），尝试在 IB（在 ios 6 中）中正确地获得约束是很困难的，所以我在代码中做到了。我这样做的方式是让按钮以任何尺寸的屏幕或任何方向占据整个屏幕，而无需检查屏幕尺寸：

@interface ViewController ()
@property (strong,nonatomic) NSMutableDictionary *viewsDict;
@end

@implementation ViewController

- (void)viewDidLoad 
    [super viewDidLoad];
    self.viewsDict = [NSMutableDictionary dictionary];
    for (int i=1; i<7; i++) 
        UIButton *b = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [b setTitle:[NSString stringWithFormat:@"Button%d",i] forState:UIControlStateNormal];
        [b setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.viewsDict setObject:b forKey:[NSString stringWithFormat:@"b%d",i]];
        [self.view addSubview:b];
    

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b1][b2(==b1)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b3][b4(==b3)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[b5][b6(==b5)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[b1][b3(==b1)][b5(==b1)]|" options:0 metrics:nil views:self.viewsDict]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[b2][b4(==b2)][b6(==b2)]|" options:0 metrics:nil views:self.viewsDict]];

【讨论】：

老实说，我找到的答案并没有 100% 帮助我，我总是遇到问题。我会试试你的解决方案。

成功了！但是，您能向我解释一下代码吗？ constraintsWithVisualFormat。非常感谢。

@androniennn，这需要很多时间来解释。如果您有具体问题，我可以回答。否则，我建议您观看有关该主题的 3 个 WWDC 2012 视频。该文档还涵盖了可视格式语言的语法。

感谢您的回答，它运行良好，但是，出于某种原因，我需要与 IB 合作：/.

@androniennn，为什么？那么祝你好运，这是一个真正的痛苦。不过我认为 iOS 7 会更好。

【参考方案2】：

使用自动布局，您肯定希望将这六个视图包装在另一个 UIView 中，以防止按钮和其他视图之间的布局交互。如果那个 UIView 有一个固定的高度和宽度，它可能就这么简单。

【讨论】：

你是说我在基本的 UIView 里面加了一个 UIView 吗？