ios - iOS Autolayout 与 2 个视图保持距离

Question

我想在屏幕顶部固定一些视图，在底部固定一些视图，在顶部视图和底部视图之间等距离放置一个固定大小的视图。

我无法弄清楚如何使用自动布局约束来做到这一点。我是否需要向 UI 添加一些间隔视图，或者以编程方式计算所需的位置？

Answer 1

您可以仅使用一个附加视图来执行此操作。它看起来像这样：

stuff_on_top
middle_view (with fixed size view inside)
stuff_on_bottom

stuff_on_top在&middle_view和middle_view&之间会有垂直间距限制stuff_on_bottom。fixed size view将在 中水平和垂直居中middle_view。

另一种方法是两个放置两个间隔视图： between stuff_on_top&middle_view和 between middle_view& stuff_on_bottom。然后，您将添加一个约束，即间距视图的高度相等。

Answer 2

查看此类别：https ://github.com/jrturton/UIView-Autolayout

然后你可以做一些像这样简单的事情......

#import "UIView+AutoLayout.h"

...

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *topView = [UIView autoLayoutView];
    UIView *centralContainerView = [UIView autoLayoutView];
    UIView *centralView = [UIView autoLayoutView];
    UIView *bottomView = [UIView autoLayoutView];

    topView.backgroundColor = [UIColor redColor];
    bottomView.backgroundColor = [UIColor redColor];
    centralView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:topView];
    [self.view addSubview:centralContainerView];
    [centralContainerView addSubview:centralView];
    [self.view addSubview:bottomView];


    //Pins the topView to the top, left and right edges of its superview (in iOS 7, it uses the topLayoutGuide)
    [topView pinToSuperviewEdges:JRTViewPinTopEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts (if a value is passed as zero, no constrain is applied to that axis)
    [topView constrainToSize:CGSizeMake(0, 75)];

    //Pins the centralContainerView to the left and right edges of its superview
    [centralContainerView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Pins the top of centralContainerView to the bottom of topView
    [centralContainerView pinEdge:NSLayoutAttributeTop toEdge:NSLayoutAttributeBottom ofItem:topView];
    //Pins the bottom of centralContainerView to the top of bottomView
    [centralContainerView pinEdge:NSLayoutAttributeBottom toEdge:NSLayoutAttributeTop ofItem:bottomView];

    //Centers centralView on the Y axis of its superview
    [centralView centerInContainerOnAxis:NSLayoutAttributeCenterY];
    //Pins the centralView to the left and right edges of its superview
    [centralView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Constrains the height of topView to 100pts
    [centralView constrainToSize:CGSizeMake(0, 100)];

    //Pins the topView to the bottom, left and right edges of its superview (in iOS 7, it uses the bottomLayoutGuide)
    [bottomView pinToSuperviewEdges:JRTViewPinBottomEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts
    [bottomView constrainToSize:CGSizeMake(0, 75)];

}

你会得到这样的输出：

编辑：

我没有看到 interface-builder 标记，只是匆匆下结论......界面构建器替代方案的工作方式与上面类似..您需要三个主要视图，一个固定在顶部，另一个固定在底部.. 然后一个具有灵活宽度的固定到其他两个视图。

然后，您可以在中间视图中以固定高度居中第四个视图。然后，这将为您提供您正在寻找的结果

Answer 3

我编码这个 https://github.com/damienromito/UIView-AutoYPositioning

但我认为存在自动布局的解决方案......