FLKAutoLayout 1.0.1

FLKAutoLayout 1.0.1

测试已测试
Lang语言 Obj-CObjective C
许可证 MIT
发布最新版本2017年3月

Florian KuglerOrta Therox维护。



  • Florian Kugler

FLKAutoLayout 是一个包含在 UIView 上的类集合,使得在代码中设置布局约束变得简单。

FLKAutoLayout 使用可读的语法创建简单的约束,并提供许多便捷方法来同时设置多个视图之间更复杂的约束。它自动将约束添加到视图的最近共同父视图,并将这些视图的 translatesAutoresizingMaskIntoConstraints 属性设置为 NO

FLKAutoLayout 为 UIView 的实例提供了创建简单的布局约束(如宽度和高度,或将一个视图的边缘约束到另一个视图)的方法。此外,它还提供了与 UIView 类相关的方法,用于处理涉及两个以上视图的更复杂的布局约束。

有关如何设置约束的示例,请参阅示例项目

示例

假设我们有一系列标签和相等数量的文本框,我们希望将它们优雅地排列成网格状

// align the first label with its superview
[labels[0] alignTop:@"20" leading:@"20" toView:labels[0].superview];
// give it a minimum width of 200 and a maximum width of 300
[labels[0] constrainWidth:@">=200,<=300"];
// now constrain all labels to this size
[UIView alignLeadingAndTrailingEdgesOfViews:labels];
// space the labels out vertically with 10 points in between
[UIView spaceOutViewsVertically:labels predicate:@"10"];

// now let's take care of the text fields.
// the first one has a fixed space of 20 to its label
[textFields[0] constrainLeadingSpaceToView:labels[0] predicate:@"20"];
// constrain the right edge to its superview with 20 points padding
[textFields[0] alignTrailingEdgeWithView:textFields[0].superview predicate:@"20"];
// constrain all other text fields to the same width
[UIView alignLeadingAndTrailingEdgesOfViews:textFields];
// and finally let's align the baseline of each label with the baseline of each text field
[UIView alignAttribute:NSLayoutAttributeBaseline ofViews:labels toViews:textFields predicate:@"0"];

FLKAutoLayout 实例方法

FLKAutoLayout 扩展了 UIView 实例,提供了一种可读的格式来设置简单的约束。

将一个视图的边缘与另一个视图对齐

 // constrain the leading edge of the view to the leading edge of another
[view alignLeadingEdgeWithView:otherView predicate:@"0"];

 // same as before but use a 20 point offset
[view alignLeadingEdgeWithView:otherView predicate:@"20"];

 // same as before but give this constraint a priority of 750
[view alignLeadingEdgeWithView:otherView predicate:@"20@750"];

// aligning some other edge types
[view alignTopEdgeWithView:otherView predicate:@"0"];
[view alignBottomEdgeWithView:otherView predicate:@"0"];
[view alignTrailingEdgeWithView:otherView predicate:@"0"];
[view alignBaselineWithView:otherView predicate:@"0"];
[view alignCenterXWithView:otherView predicate:@"0"];
[view alignCenterYWithView:otherView predicate:@"0"];

// centering two views
[view alignCenterWithView:otherView];

将视图约束到另一个视图

// constrain leading edge of the view to the trailing edge of the other
 [view constrainLeadingSpaceToView:otherView predicate:@"0"];

 // constrain trailing edge of the view to the leading edge of the other
 [view constrainTrailingSpaceToView:otherView predicate:@"0"];

 // constrain top edge of the view to the bottom edge of the other
 [view constrainTopSpaceToView:otherView predicate:@"0"];

 // constrain bottom edge of the view to the top edge of the other
 [view constrainBottomSpaceToView:otherView predicate:@"0"];

约束宽度和高度

[view constrainWidth:@"400"];
[view constrainHeight:@"300"];
// or combined:
[view constrainWidth:@"400" height:@"300"];
// or relative to another view
[view constrainWidthToView:otherView predicate:@"*.3"]; // 30% of otherView's width
[view constrainHeightToView:otherView predicate:@">=*.5"]; // at least 50% of otherView's height

将两个视图间距设置一致

// creating a >=20 points space between the top edge of one view to the bottom edge of the other
[view constrainTopSpaceToView:otherView predicate:@">=20"];
// creating a >=20 points space between the leading edge of one view to the trailing edge of the other
[view constrainLeadingSpaceToView:otherView predicate:@">=20"];

如果您需要更精确地控制一个视图的哪个布局属性应该约束到另一个视图的哪个布局属性,可以使用一个通用辅助方法

[view alignAttribute:NSLayoutAttributeCenterX to Attribute:NSLayoutAttributeTrailing ofView:otherView predicate:@"20"];

此方法在 Swift 中的表述简洁易懂(查看链接)

view.alignAttribute(.CenterX, toAttribute: .Trailing, ofView: otherView, predicate: "0")

FLKAutoLayout 类方法

FLKAutoLayout 为一次性配置两个以上视图提供了对 UIView 的类方法的扩展。

一次性将多个视图对齐

// align all views in the views array along their leading edge
[UIView alignLeadingEdgesOfViews:views];
// align all views in the views array along their bottom edge
[UIView alignBottomEdgesOfViews:views];
// see UIView+FLKAutoLayout.h for more...

同时约束多个视图的宽度和高度

// constrain all views to the same height
[UIView equalHeightForViews:views];
// constrain all views to the same width
[UIView equalWidthForViews:views];

将多个视图间距设置一致

// space out views horizontally with 20 points in between
[UIView spaceOutViewsHorizontally:views predicate:@"20"];
// space out views vertically with no space in between
[UIView spaceOutViewsVertically:views predicate:@"0"];

// Distribute views according to their horizontal center
[UIView distributeCenterXOfViews:views inView:containerView];
// Distribute views according to their vertical center
[UIView distributeCenterYOfViews:views inView:containerView];

请注意,将视图分布在其中心会使得第一个视图的中央与容器视图的边缘对齐。

谓词参数

许多方法都接受一个类似于 Apple 在其视觉格式语言中使用的字符串语法的谓词字符串,并且还允许指定一个乘数。

[[ == | >= | <= ]] [ *乘数] [常数] [ @优先级],...

例如

// greater than or equal to 300points, small then 500 points
[view constrainWidth:@">=300,<=500"];
// equal to 300 points
[view constrainWidth:@"300"];
// greater than or equal to 300 points with priority of 250
[view constrainWidth:@">=300@250"];

// greater than or equal to 1/2 of the otherView width
[view constrainWidthToView:otherView predicate:@">=*.5"];
// greater than or equal to 1/2 of the otherView width, smaller than or equal to 600 points with a priority of 100
[view constrainWidthToView:otherView predicate:@">=*.5,<=600@100"];

UILayoutGuide / FLKAutoLayoutGuide

如果您的操作系统支持 iOS9 以下版本,可以使用 flk_topLayoutGuideflk_bottomLayoutGuide 与 UIViewControllers 的布局指南一起使用。

- (void)viewWillLayoutSubviews
{
    [self.webView constrainTopSpaceToView:self.flk_topLayoutGuide predicate:@"0"];
    [self.webView alignLeading:@"0" trailing:@"0" toView:self.view];
    [self.webView alignBottomEdgeWithView:self.view predicate:@"0"];
}

对于 iOS9 及以上版本,您可以使用 UIKit 方法。

创建者

Florian Kugler (@floriankugler).

许可证

FLKAutoLayout 基于 MIT 许可证可用。有关更多信息,请参阅 LICENSE 文件。