使用视觉格式语言的 UIButtons 之间的等间距

Posted

技术标签:

【中文标题】使用视觉格式语言的 UIButtons 之间的等间距【英文标题】:Equal spacing between UIButtons using visual format language 【发布时间】:2015-10-15 20:05:38 【问题描述】:

我有一堆 UIButtons 我想在容器视图中均匀地间隔,现在我有这个间距限制:

someView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-(>=0)-[M]-(>=0)-[T]-(>=0)-[W]-(>=0)-[ T]-(>=0)-[F]-(>=0)-[S]-(>=0)-[S]-(>=0)-|",选项:NSLayoutFormatOptions.AlignAllCenterY,指标:无,视图:buttonsArray))

但是这使得按钮看起来像这样:

问题是我想要的间距是这样计算的:

间距 = (someView.frame.width - (someView.frame.height * 0.6) * 7) / 8

someView.frame.height * 0.6 是按钮的边长。我不知道该怎么办。

【问题讨论】:

到底是什么问题?你想有一个恒定的空间还是不能有像 10 , 12, 20 固定数字这样的间距。你真的需要计算吗? 这不可能完全像你描述的那样。一些约束不能用可视格式语言创建,必须使用更详细的初始化器NSLayoutConstraint 或使用NSLayoutAnchor 创建。要创建多个相同宽度的空白空间,您还需要调查UILayoutGuide 【参考方案1】:

这是一个简单的代码,它确实在视图中准确地分配按钮之间的空间,我希望这将帮助您了解您的用例,

    let containerView = UIView(frame: CGRect.zero)
    containerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(containerView)

    let M = UIButton(type: .System)
    M.translatesAutoresizingMaskIntoConstraints = false
    M.backgroundColor = UIColor.lightGrayColor()
    M.setTitle("M", forState: .Normal)
    containerView.addSubview(M)

    let T = UIButton(type: .System)
    T.translatesAutoresizingMaskIntoConstraints = false
    T.setTitle("T", forState: .Normal)
    T.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(T)

    let W = UIButton(type: .System)
    W.translatesAutoresizingMaskIntoConstraints = false
    W.setTitle("W", forState: .Normal)
    W.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(W)

    let Th = UIButton(type: .System)
    Th.translatesAutoresizingMaskIntoConstraints = false
    Th.setTitle("T", forState: .Normal)
    Th.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(Th)

    let F = UIButton(type: .System)
    F.translatesAutoresizingMaskIntoConstraints = false
    F.setTitle("F", forState: .Normal)
    F.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(F)

    let S = UIButton(type: .System)
    S.translatesAutoresizingMaskIntoConstraints = false
    S.setTitle("S", forState: .Normal)
    S.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(S)

    let Su = UIButton(type: .System)
    Su.translatesAutoresizingMaskIntoConstraints = false
    Su.setTitle("Su", forState: .Normal)
    Su.backgroundColor = UIColor.lightGrayColor()
    containerView.addSubview(Su)

    let views = [
        "M": M,
        "T": T,
        "W": W,
        "Th":Th,
        "F": F,
        "S": S,
        "Su": Su
    ]

    let horizontalSpacing = 20
    let cornerMargin = 30

    let metrics = [
        "horizontalSpacing": horizontalSpacing,
        "cornerMargin": cornerMargin
    ]

    views.values.forEach  view in
        view.clipsToBounds = true
        view.layer.cornerRadius = 10
    


    let verticalCenter = NSLayoutConstraint(item: containerView, attribute: .CenterY, relatedBy: .Equal, toItem: view, attribute: .CenterY, multiplier: 1.0, constant: 0)
    let horizontalCenter = NSLayoutConstraint(item: containerView, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1.0, constant: 0)

    view.addConstraint(verticalCenter)
    view.addConstraint(horizontalCenter)


    let horizontalFormat = "H:|-(==cornerMargin)-[M]-horizontalSpacing-[T]-horizontalSpacing-[W]-horizontalSpacing-[Th]-horizontalSpacing-[F]-horizontalSpacing-[S]-horizontalSpacing-[Su]-(==cornerMargin)-|"
    let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(horizontalFormat, options: .AlignAllCenterY, metrics: metrics, views: views)
    view.addConstraints(horizontalConstraints)


    let verticalFormat = "V:|-[M]-|"
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(verticalFormat, options: .AlignAllCenterY, metrics: metrics, views: views)
    view.addConstraints(verticalConstraints)

结果如下,

【讨论】:

以上是关于使用视觉格式语言的 UIButtons 之间的等间距的主要内容,如果未能解决你的问题,请参考以下文章

使用视觉格式语言的“宽度等于高度”约束

在 Auto Layout 的视觉格式语言中使用可选值

设置视觉格式语言时 iAutoLayout 崩溃

使用视觉格式化语言在代码中自动布局 UIViewController

AutoLayout Circular UIButton - 等效垂直和水平尺寸

不能满足约束 - 视觉格式语言