0

我有一个UIViewController四个UIButtons(2 x 2),我在界面构建器中布置,效果很好。我将拥有我的应用程序的免费且受广告支持的版本,因此我需要根据应用程序是付费版本还是受广告支持的版本重做该场景以加载。基于此,我正在尝试使用 Visual Formatting Language 来布置视图。UIButton尽管我在计算它们时考虑了它们,但我的身高却得到了不正确的值。我无法弄清楚我的错误(或遗漏?)。

这是我的界面生成器的屏幕截图。 在此处输入图像描述

我对界面生成器中的按钮没有限制,但我确实IBOutlets连接到MyViewController. MyViewController位于导航控制器中,底部有一个标签栏。

我创建了一个名为的方法layoutButtons,我在viewDidLoad之后调用它super.viewDidLoad()。这里是:

func layoutButtons() {
    // Configure layout constraints

    // Remove interface builder constraints from storyboard
    view.removeConstraints(view.constraints)

    // create array to dump constraints into
    var allConstraints = [NSLayoutConstraint]()

    // determine screen size
    let screenSize: CGRect = UIScreen.mainScreen().bounds

    let navBarRect = navigationController!.navigationBar.frame
    let navBarHeight = navBarRect.height

    let tabBarRect = tabBarController!.tabBar.frame
    let tabBarHeight: CGFloat = tabBarRect.height

    // calculate button width based on screen size

    // padding for left + middle + right = 8.0 + 8.0 + 8.0 = 24.0
    let buttonWidth = (screenSize.width - 24.0) / 2

    /*
    My buttons are extending under the top & bottom layout guides despite accounting
    for them when I set the buttonHeight.
    */

    // padding for top + middle + bottom = 8.0 + 8.0 + 8.0 = 24.0
    let buttonHeight = (screenSize.height - topLayoutGuide.length - bottomLayoutGuide.length - 24.0) / 2

    // create dictionary of metrics
    let metrics = ["buttonWidth": buttonWidth,
        "buttonHeight": buttonHeight,
        "navBarHeight": navBarHeight,
        "tabBarHeight": tabBarHeight,
        "bannerAdWidth": bannerAdWidth,
        "bannerAdHeight": bannerAdHeight]

    // create dictionary of views
    var views: [String : AnyObject] = ["firstButton": firstButton,
        "secondButton": secondButton,
        "thirdButton": thirdButton,
        "fourthButton": fourthButton,
        "topLayoutGuide": topLayoutGuide,
        "bottomLayoutGuide": bottomLayoutGuide]

    let topRowHorizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[firstButton(buttonWidth)]-[secondButton(buttonWidth)]-|",
        options: [.AlignAllCenterY],
        metrics: metrics,
        views: views)
    allConstraints += topRowHorizontalConstraints

    let bottomRowHorizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[thirdButton(buttonWidth)]-[fourthButton(buttonWidth)]-|",
        options: [.AlignAllCenterY],
        metrics: metrics,
        views: views)
    allConstraints += bottomRowHorizontalConstraints

    let leftColumnVerticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[topLayoutGuide]-[firstButton(buttonHeight)]-[thirdButton(buttonHeight)]-[bottomLayoutGuide]|",
        options: [],
        metrics: metrics,
        views: views)
    allConstraints += leftColumnVerticalConstraints

    let rightColumnVerticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[topLayoutGuide]-[secondButton(buttonHeight)]-[fourthButton(buttonHeight)]-[bottomLayoutGuide]|",
        options: [],
        metrics: metrics,
        views: views)
    allConstraints += rightColumnVerticalConstraints

    NSLayoutConstraint.activateConstraints(allConstraints)
}

我已经摆弄了我的buttonHeight变量,但是我尝试的每次迭代都会导致按钮在topLayoutGuideand下扩展bottomLayoutGuide。这是它在运行时的样子:

在此处输入图像描述

我欢迎任何建议在哪里寻找我的错误。感谢您的阅读。

4

1 回答 1

0

我最初遵循Ray Wenderlich 的 Visual Format Language 教程,该教程的设置与我的相似,subViews都在故事板上并连接MyViewControllerIBOutlets.

出于绝望,我对故事板进行了核对并创建了UIButtonsin 代码。一路上,我发现我的问题是我在按钮布局之前将图像设置在按钮上。这个故事的寓意是在它们被布置之前不要设置图像!UIButtons

下面是从我的一个方法调用的代码,viewDidLoad它布置了一个 2 x 2 的按钮网格:

    // Configure Buttons
    firstButton.translatesAutoresizingMaskIntoConstraints = false
    // code to customize button

    secondButton.translatesAutoresizingMaskIntoConstraints = false
    // code to customize button

    thirdButton.translatesAutoresizingMaskIntoConstraints = false
    // code to customize button

    fourthButton.translatesAutoresizingMaskIntoConstraints = false
    // code to customize button

    // Add buttons to the subview
    view.addSubview(firstButton)
    view.addSubview(secondButton)
    view.addSubview(thirdButton)
    view.addSubview(fourthButton)

    // create views dictionary
    var allConstraints = [NSLayoutConstraint]()

    let views: [String : AnyObject] = ["firstButton": firstButton,
        "secondButton": secondButton,
        "thirdButton": thirdButton,
        "fourthButton": fourthButton,
        "topLayoutGuide": topLayoutGuide,
        "bottomLayoutGuide": bottomLayoutGuide]

    // Calculate width and height of buttons
    // 24.0 = left padding + middle padding + right padding
    let buttonWidth = (screenSize.width - 24.0) / 2
    let buttonHeight = (screenSize.height - topLayoutGuide.length - bottomLayoutGuide.length - 24.0) / 2

    // Create a dictionary of metrics
    let metrics = ["buttonWidth": buttonWidth,
    "buttonHeight" : buttonHeight]

    let topVerticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[topLayoutGuide]-[firstButton(buttonHeight)]",
        options: [],
        metrics: metrics,
        views: views)
    allConstraints += topVerticalConstraints

    let topRowHorizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[firstButton(buttonWidth)]-[secondButton(==firstButton)]-|",
        options: NSLayoutFormatOptions.AlignAllCenterY,
        metrics: metrics,
        views: views)
    allConstraints += topRowHorizontalConstraints

    let bottomRowHorizontalContraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[thirdButton(buttonWidth)]-[fourthButton(==thirdButton)]-|",
        options: NSLayoutFormatOptions.AlignAllCenterY,
        metrics: metrics,
        views: views)
    allConstraints += bottomRowHorizontalContraints

    let leftColumnVerticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
        "V:[firstButton]-[thirdButton(==firstButton)]-[bottomLayoutGuide]-|",
        options: [],
        metrics: metrics,
        views: views)
    allConstraints += leftColumnVerticalConstraints

    let rightColumnVerticalConstriants = NSLayoutConstraint.constraintsWithVisualFormat(
        "V:[secondButton(buttonHeight)]-[fourthButton(==secondButton)]-[bottomLayoutGuide]-|",
        options: [],
        metrics: metrics,
        views: views)
    allConstraints += rightColumnVerticalConstriants

    NSLayoutConstraint.activateConstraints(allConstraints)

    // ** DON'T SET IMAGES ON THE BUTTONS UNTIL THE BUTTONS ARE LAID OUT!!!**
    firstButton.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
    firstButton.setImage(UIImage(named: "first.png"), forState: .Normal)

    secondButton.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
    secondButton.setImage(UIImage(named: "second.png"), forState: .Normal)

    thirdButton.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
    thirdButton.setImage(UIImage(named: "third.png"), forState: .Normal)

    fourthButton.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
    fourthButton.setImage(UIImage(named: "fourth.png"), forState: .Normal)
于 2016-01-26T02:13:26.493 回答