HQPhotoBrowser 0.0.4

HQPhotoBrowser 0.0.4

测试测试
语言语言 Obj-CObjective C
许可 MIT
发布上次发布2017年9月

HanQi维护。



  • 作者
  • hq

#Masonry

Masonry 仍在积极维护中,我们致力于修复错误并从更广泛的社区中合并高质量 PR。但是,如果您在项目中使用 Swift,我们建议使用 SnapKit,因为它提供了更好的类型安全和更简单的 API。

Masonry 是一个轻量级的布局框架,它可以使用更简洁的语法封装 AutoLayout。Masonry 有自己的布局 DSL,它以链式方式描述您的 NSLayoutConstraints,从而得到更简明易读的布局代码。Masonry 支持 iOS 和 Mac OS X。

为了获取示例,请查看 Masonry 工作空间中的 Masonry iOS 演示项目。下载后,您需要运行 pod install

NSLayoutConstraint 有何不足之处?

在底层,Auto Layout 是一种强大灵活的方式,可以组织和布局您的视图。然而,从代码中创建约束既冗长又不具有描述性。想象一个简单的示例,您想要一个视图填充其父视图,但每边缩进 10 个像素。

UIView *superview = self.view;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[

    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

 ]];

即使在这样的简单示例中,所需的代码也非常冗长,当您有 2 个或 3 个以上的视图时,代码很快就会变得难以阅读。另一个选择是使用视觉格式语言(VFL),这比 VFL 要短一些。但是,ASCII 类型的语法有其自身的缺陷,并且还更难以动画,因为 NSLayoutConstraint constraintsWithVisualFormat: 返回一个数组。

准备迎接您的创造者!

以下是用 MASConstraintMaker 创建的相同约束

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

或者更短

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

请注意,在第一个示例中,我们不得不将约束添加到父视图 [superview addConstraints:...。然而,Masonry 将自动将约束添加到适当的视图。

Masonry 还会帮您调用 view1.translatesAutoresizingMaskIntoConstraints = NO;

不是所有的事物都是相同的

.equalTo 等同于 NSLayoutRelationEqual

.lessThanOrEqualTo 等同于 NSLayoutRelationLessThanOrEqual

.greaterThanOrEqualTo 等同于 NSLayoutRelationGreaterThanOrEqual

这三个相等约束接受一个参数,可以是以下之一

1. MASViewAttribute

make.centerX.lessThanOrEqualTo(view2.mas_left);
MASViewAttribute NSLayoutAttribute
view.mas_left NSLayoutAttributeLeft
view.mas_right NSLayoutAttributeRight
view.mas_top NSLayoutAttributeTop
view.mas_bottom NSLayoutAttributeBottom
view.mas_leading NSLayoutAttributeLeading
view.mas_trailing NSLayoutAttributeTrailing
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX
view.mas_centerY NSLayoutAttributeCenterY
view.mas_baseline NSLayoutAttributeBaseline

2. UIView/NSView

如果你想让 view.left 大于等于 label.left

//these two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);

3. NSNumber

Auto Layout 允许将宽度和高度设置为常量值。如果你想设置 view 的最小和最大宽度,可以向等式块传递一个数字

//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)

然而,Auto Layout 不允许将左、右、centerY 等对齐属性设置为常量值。所以,如果你为这些属性传递一个 NSNumber,Masonry 将将其转换为相对于视图的父视图的约束

//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)

除了使用 NSNumber 之外,你还可以使用原始数据类型和结构体来构建你的约束,如下所示

make.top.mas_equalTo(42);
make.height.mas_equalTo(20);
make.size.mas_equalTo(CGSizeMake(50, 100));
make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));
make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

默认情况下,支持 自动装箱 的宏带有前缀 mas_。在不带前缀的情况下,可以在导入 Masonry 之前定义 MAS_SHORTHAND_GLOBALS

4. NSArray

包含任何前述类型的混合数组的混合类型

make.height.equalTo(@[view1.mas_height, view2.mas_height]);
make.height.equalTo(@[view1, view2]);
make.left.equalTo(@[view1, @100, view3.right]);

学习如何优先排序

.priority 允许你指定一个精确的优先级

.priorityHigh 等价于 UILayoutPriorityDefaultHigh

.priorityMedium 在高和低之间

.priorityLow 等价于 UILayoutPriorityDefaultLow

优先级可以像这样附加到约束链的末尾

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

make.top.equalTo(label.mas_top).with.priority(600);

组合,组合,再组合

Masonry 还提供了一些方便的方法,可以同时创建多个约束。这些被称为 MASCompositeConstraints。

边缘

// make top, left, bottom, right equal view2
make.edges.equalTo(view2);

// make top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

大小

// make width and height greater than or equal to titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// make width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

中心

// make centerX and centerY = button1
make.center.equalTo(button1)

// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

您可以使用链中的视图属性来提高可读性

// All edges but the top should equal those of the superview
make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);

绝望地抓住

有时您需要修改现有的约束,以便进行动画或删除/替换约束。在 Masonry 中,有几种不同的方法来更新约束。

1. 参考项

您可以通过将约束生成表达式的结果分配给局部变量或类属性来保留对特定约束的引用。您也可以将多个约束存储在数组中以进行引用。

// in public/private interface
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// when making constraints
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// then later you can call
[self.topConstraint uninstall];

2. mas_updateConstraints

或者,如果您只想更新约束的常量值,则可以使用方便的方法 mas_updateConstraints,而不是 mas_makeConstraints

// this is Apple's recommended place for adding/updating constraints
// this method can get called multiple times in response to setNeedsUpdateConstraints
// which can be called by UIKit internally or in your code if you need to trigger an update to your constraints
- (void)updateConstraints {
    [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];

    //according to apple super should be called at end of method
    [super updateConstraints];
}

3. mas_remakeConstraints

mas_updateConstraints 比较适用于更新一组约束条件,但除了更新常量值之外,其它操作可能会变得很繁琐。这就是 mas_remakeConstraints 的作用所在。

mas_remakeConstraintsmas_updateConstraints 类似,但它会先将所有约束条件移除后再重新安装,不再需要保留想要删除的约束条件引用即可提供不同的约束条件。

- (void)changeButtonPosition {
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
        	make.top.and.left.offset(10);
        } else {
        	make.bottom.and.right.offset(-10);
        }
    }];
}

Masonry iOS 示例 项目中,您可以找到关于上述所有三种方法的更详细示例。

当遭遇严重故障时!

布局视图并不总是按计划进行。所以当事情真正出问题时,您不希望看到这样的控制台输出

Unable to simultaneously satisfy constraints.....blah blah blah....
(
    "<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>",
    "<NSAutoresizingMaskLayoutConstraint:0x839ea20 h=--& v=--& V:[MASExampleDebuggingView:0x7186560(416)]>",
    "<NSLayoutConstraint:0x7189c70 UILabel:0x7186980.bottom == MASExampleDebuggingView:0x7186560.bottom - 10>",
    "<NSLayoutConstraint:0x7189560 V:|-(1)-[UILabel:0x7186980]   (Names: '|':MASExampleDebuggingView:0x7186560 )>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>

Masonry 为 NSLayoutConstraint 添加了一个类别,它覆盖了默认的 - (NSString *)description 实现方法。现在您可以给视图和约束起有意义的名称,并且可以轻松地找出 Masonry 创建的约束。

这意味着您的控制台输出现在可以看起来像这样

Unable to simultaneously satisfy constraints......blah blah blah....
(
    "<NSAutoresizingMaskLayoutConstraint:0x8887740 MASExampleDebuggingView:superview.height == 416>",
    "<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>",
    "<MASLayoutConstraint:BottomConstraint UILabel:messageLabel.bottom == MASExampleDebuggingView:superview.bottom - 10>",
    "<MASLayoutConstraint:ConflictingConstraint[0] UILabel:messageLabel.top == MASExampleDebuggingView:superview.top + 1>"
)

Will attempt to recover by breaking constraint
<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>

有关如何设置此内容的例子,请查看 Masonry 工作区中的 Masonry iOS 示例 项目。

我应该在哪里创建我的约束条件?

@implementation DIYCustomView

- (id)init {
    self = [super init];
    if (!self) return nil;

    // --- Create your views here ---
    self.button = [[UIButton alloc] init];

    return self;
}

// tell UIKit that you are using AutoLayout
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}

// this is Apple's recommended place for adding/updating constraints
- (void)updateConstraints {

    // --- remake/update constraints here
    [self.button remakeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(self.buttonSize.width));
        make.height.equalTo(@(self.buttonSize.height));
    }];
    
    //according to apple super should be called at end of method
    [super updateConstraints];
}

- (void)didTapButton:(UIButton *)button {
    // --- Do your changes ie change variables that affect your layout etc ---
    self.buttonSize = CGSize(200, 200);

    // tell constraints they need updating
    [self setNeedsUpdateConstraints];
}

@end

安装

使用 orsome CocoaPods

在你的 Podfile 中

pod 'Masonry'

如果您想使用不带烦人的 `'mas_'` 前缀的 Masonry,请在导入 Masonry 之前将 #define MAS_SHORTHAND 添加到 prefix.pch 中

#define MAS_SHORTHAND

开始 Masonry 编程之旅

#import "Masonry.h"

代码片段

将包含的代码片段复制到 ~/Library/Developer/Xcode/UserData/CodeSnippets 中,以编写 Masonry 块,速度飞快!

mas_make -> [<view> mas_makeConstraints:^(MASConstraintMaker *make){<code>}];

mas_update -> [<view> mas_updateConstraints:^(MASConstraintMaker *make){<code>}];

mas_remake -> [<view> mas_remakeConstraints:^(MASConstraintMaker *make){<code>}];

特性

  • 不仅限于 Auto Layout 的子集。任何 NSLayoutConstraint 能做的事情,Masonry 也能。
  • 出色的调试支持,可以为视图和约束提供有意义的名称。
  • 约束条件可读性好。
  • 没有任何疯狂的宏魔法。Masonry 不会用宏污染全局命名空间。
  • 不是基于字符串或字典的,因此您获得了编译时检查。

待办事项

  • 视觉糖果
  • Mac 示例项目
  • 更多测试和示例