Facade 1.1.1

您希望将以下内容添加到 Podfile 中：

target 'MyApp' do
  pod 'Facade', '~> 1.1'
end

然后在您的终端内或从 CocoaPods.app 中运行 pod install 命令。

或者为了测试运行，运行以下命令：

pod try Facade

Facade 1.1.1

作者：
Mike Amaral
MikeAmaral

Façade

是什么？

Façade 是一个 UIView 分类，允许您使用 现实世界的术语 构建您的 UI，就像您在与某人交谈时解释布局一样。它是一组便利方法，将大量的烦人并且乏味的框架代数封装成人类可读的格式。正因为如此，它足够 轻量级 和灵活，可以允许您 快速轻松地构建外观漂亮的 UI，并基于设备方向或类型定义独特的布局体验。

[_headerImageView anchorTopCenterFillingWidthWithLeftAndRightPadding:0 topPadding:0 height:250];

NSArray *shareButtons = @[_facebookButton, _twitterButton, _googleButton, _pinterestButton];
[_headerImageView groupVertically:shareButtons centerRightWithRightPadding:7 spacing:7 width:45 height:45];

[_avatarImageView alignUnder:_headerImageView matchingCenterWithTopPadding:-50 width:100 height:100];
[_nameLabel alignUnder:_avatarImageView centeredFillingWidthWithLeftAndRightPadding:7 topPadding:14 height:28];
[_usernameLabel alignUnder:_nameLabel centeredFillingWidthWithLeftAndRightPadding:7 topPadding:2 height:19];

[_bioLabel sizeToFit];
[_bioLabel alignUnder:_usernameLabel centeredFillingWidthWithLeftAndRightPadding:15 topPadding:10 height:CGRectGetHeight(_bioLabel.frame)];

[_followButton alignUnder:_bioLabel matchingCenterWithTopPadding:20 width:250 height:44];

[_scrollView groupHorizontally:@[_messageButton, _statsButton, _addButton] centeredUnderView:_followButton topPadding:30 spacing:40 width:60 height:60];
[_messageLabel alignUnder:_messageButton matchingCenterWithTopPadding:7 width:80 height:13];
[_statsLabel alignUnder:_statsButton matchingCenterWithTopPadding:7 width:80 height:13];
[_addLabel alignUnder:_addButton matchingCenterWithTopPadding:7 width:80 height:13];

如何使用它？

将 pod 'Facade' 添加到您的 Podfile 中，并运行 pod install。
在您的视图控制器中导入 UIView+Facade.h。
像平时一样创建您的视图组件，自定义它们，并将它们作为子视图添加到相应的父视图中。 不要设置它们的框架 - 让我们为您处理。
在适当的时候，例如在视图控制器的 layoutSubviews 方法中，调用相应的 UIView+Facade 便利方法，以定义您希望您的 UI 如何布局。

创建锚点视图

许多 UI 布局从将一个视图锚定到屏幕的顶部/角落开始，例如左上角有一个头像的个人资料视图。使用 Façade 做这种事情很容易 - 只需告诉视图将自身锚定到何处，并提供相应的填充/大小参数，然后它会为您完成剩下的工作。在 viewWillLayoutSubviews 中这样做还允许 Façade 在两种方向上保持该布局的一致性，如下所示

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];

    [self layoutFacade];
}

- (void)layoutFacade {
    CGFloat padding = 10;
    CGFloat size = 50;

    [_redView anchorTopLeftWithLeftPadding:padding topPadding:padding width:size height:size];
    [_orangeView anchorTopCenterWithTopPadding:padding width:size height:size];
    [_yellowView anchorTopRightWithRightPadding:padding topPadding:padding width:size height:size];
    [_greenView anchorCenterRightWithRightPadding:padding width:size height:size];
    [_blueView anchorBottomRightWithRightPadding:padding bottomPadding:padding width:size height:size];
    [_purpleView anchorBottomCenterWithBottomPadding:padding width:size height:size];
    [_cyanView anchorBottomLeftWithLeftPadding:padding bottomPadding:padding width:size height:size];
    [_brownView anchorCenterLeftWithLeftPadding:padding width:size height:size];
    [_grayView anchorInCenterWithWidth:size height:size];
}

相对布局

大多数布局从一个或多个锚点视图开始，其余组件通常相对于其他同级视图进行布局，并且它们的尺寸通常依赖于这些同级视图和父视图。我们已经整理了最常见的相对布局类型，以使此过程尽可能容易。下面是一些示例，显示了两种方向的结果

[_redView anchorTopLeftWithLeftPadding:10 topPadding:10 width:100 height:100];
[_orangeView alignToTheRightOf:_redView matchingTopAndFillingWidthWithLeftAndRightPadding:10 height:20];
[_greenView alignUnder:_orangeView matchingLeftAndFillingWidthWithRightPadding:10 topPadding:5 height:20];
[_blueView alignUnder:_greenView matchingLeftAndFillingWidthWithRightPadding:10 topPadding:5 height:50];
[_brownView alignUnder:_redView matchingLeftAndFillingWidthWithRightPadding:10 topPadding:10 height:30];
[_purpleView alignUnder:_brownView matchingRightWithTopPadding:10 width:100 height:40];
[_yellowView alignUnder:_purpleView centeredFillingWidthAndHeightWithLeftAndRightPadding:10 topAndBottomPadding:10];

您也可以将视图垂直或水平地放置在两个视图之间。

[_purpleView alignBetweenLeft:_orangeView andRight:_yellowView matchingTopWithLeftAndRightPadding:10 height:50];
[_brownView alignBetweenTop:_orangeView andBottom:_greenView matchingLeftWithTopAndBottomPadding:10 width:50];
[_grayView alignBetweenLeft:_greenView andRight:_blueView matchingTopWithLeftAndRightPadding:10 height:50];
[_cyanView alignBetweenTop:_yellowView andBottom:_blueView matchingLeftWithTopAndBottomPadding:10 width:50];

视图组

有时您希望将多个视图组件组合在一起，并使这个组合作为一个整体相对于另一个视图进行布局。一个常见的例子就是分享按钮——可能是在图片上方有Facebook、Pinterest、Twitter等分享图标。通过告诉相应的父视图以特定的布局、填充和尺寸组合一系列子视图，可以轻松实现这一点。这里是两个例子合在一起的。

[_redView groupVertically:@[_orangeView, _yellowView, _greenView] inUpperRightWithRightPadding:10 topPadding:10 spacing:10 width:50 height:50];
[self.view groupHorizontally:@[_blueView, _purpleView, _brownView] centeredUnderView:_redView topPadding:10 spacing:10 width:50 height:50];

这个功能的酷之处在于，它可以让您在不重新计算每个视图的框架的情况下添加、删除或重新组织视图到组中。

[_redView groupVertically:@[_orangeView, _yellowView] inUpperRightWithRightPadding:10 top:10 spacing:10 width:50 height:50];
[self.view groupHorizontally:@[_greenView, _blueView, _purpleView, _brownView, _blackView] centeredUnderView:_redView topPadding:10 spacing:10 width:50 height:50];

考虑事项

我实在没有时间去考虑每一个布局场景，因此它可能并不适合所有的情况。我投入了大量时间观看无数移动应用程序的截图，以了解每个视图如何布局其组件，并在尽量保持API尽可能简单的同时，做出了一些假设，我认为这些假设对绝大多数移动UI来说都是足够的，但您的结果可能有所不同。我几乎肯定遗漏了可能也常用的某些方法——如果有的话，请开启一个issue或pull request！
我知道API非常罗嗦——这是故意的。我有意选择了可读性、清晰性和明确性而不是简洁性，因为在这种情况下，我认为选择您需要达到目标的方法会更容易，您不必依赖于文档，维护也会更加愉快，因为任何查看代码的人都会很快明白它的确切含义。

社区

如果您想做出贡献，请开启一个pull request。请尽可能地保持与当前项目的风格/格式的一致性，并确保添加测试！
如果您有任何问题、功能请求等，我更愿意您创建一个issue而不是直接给我发邮件。

许可证

本项目基于MIT许可证提供。详情请参见LICENSE.txt文件。