Framer 1.5.0

Framer 1.5.0

×

测试已测试✓
Lang语言 Obj-CObjective C
许可证 MIT
发布最后发布2016年10月

由Nikita Ermolenko维护。

Framer 1.5.0

  • 作者：
  • Nikita Ermolenko

Framer是一个非常棒的布局框架，通过优雅的链式语法将手动计算的frame封装起来。

它也针对Swift提供了支持，但与之对应的名称为Framezilla。

Framer正在积极维护。

用法

您可以非常快速且方便地配置与父视图的关系

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.top(10).and.bottom(10);
        framer.right(10).and.left(10);
    }];

...或者只是

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.edges(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

例如，您只想将子视图相对于父视图居中，并设置固定的宽度和高度。

使用Framer就可以如此简单地完成它

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(100).and.height(100);
        framer.super_centerX(0);
        framer.super_centerY(0);
    }];

两个视图之间的关系

alt Framer

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(100).and.height(100);
        framer.super_centerX(0);
        framer.super_centerY(0);
    }];

    [self.view2 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(50).and.height(50);
        framer.bottom_to(self.view1.nui_top, 0);
        framer.left_to(self.view1.nui_right, 0);
    }];

...或者可能是这样的？

alt Framer

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(100);
        framer.height(100);
        framer.super_centerX(0).and.super_centerY(0);
    }];

    [self.view2 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.top(10);
        framer.bottom(10);
        framer.left(10);
        framer.width_to(self.view2.nui_height, 0.5); // height*0.5
    }];

注意

对于两个视图来说，指出关系是非常重要的。

不正确

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.bottom_to(self.view1, 0);
    }];

正确

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.bottom_to(self.view1.nui_top, 0);
    }];

容器关系

alt Framer

注意

首先，您应该配置所有子视图，然后再配置容器。

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(200).and.height(200);
        framer.super_centerX(0);
        framer.super_centerY(0);
    }];

    [self.label1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.top(0).and.left(0);
        framer.sizeToFit();
    }];

    [self.label2 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.top_to(self.label1.nui_bottom, 0).and.left(0);
        framer.sizeToFit();
    }];

    [self.container installFrames:^(NUIFramer * _Nonnull framer) {
        framer.container();
        framer.super_centerX(0);
        framer.super_centerY(0);
    }];

状态

使用多个状态进行动画非常方便，因为您只需要在一个地方配置所有状态，当需要更改视图的frame时，只需应用所需的状态！太棒了，对吧？

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    /* Configure frame for '0' state */
    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(10);
        framer.height(10);
        framer.super_centerX(0).and.super_centerY(0);
    }];

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(40);
        framer.height(40);
        framer.super_centerX(0).and.super_centerY(0);
    } forState:@1];

    [self.view1 installFrames:^(NUIFramer * _Nonnull framer) {
        framer.width(100);
        framer.height(100);
        framer.super_centerX(0).and.super_centerY(0);
    } forState:@2];
}

设置新状态并动画化它

/* Next time when viewDidLayoutSubviews will be called, self.view1 configure frame for state 2. */
    self.view1.nui_state = @2;
    [self.view setNeedsLayout];
    [UIView animateWithDuration:1.0 animations:^{
        [self.view layoutIfNeeded];
    }];

宏

    CGFloat width = NUI_WIDTH(view);
    CGFloat midX = NUI_MID_X(view);

更新

v1.4

  • 添加了获取宽度、高度等的宏。

v1.3

  • 添加了centerX和centerY方法，来设置中心点。
  • 添加了width_to和height_to来配置相对于特定视图的高度/宽度。

v1.1

  • 为关系（左、右等）添加了前缀'nui'。
  • 添加了为特殊状态配置frame的功能。

v1.0

  • 第一个发布版本。配置frame块。

待办事项

  • 其他平台支持
  • Swift支持
  • 更多测试

作者

尼基塔·厄尔莫连科，[email protected]

许可

Framer可在MIT许可下使用。有关更多信息，请参阅LICENSE文件。