Latest 1.5.2
Homepage https://github.com/RookieZn/Framer
License MIT
Platforms ios 8.0, requires ARC
Authors

Framer

Build Status
Version
License
Platform

Framer is a great layout framework which wraps manually calculation frames with a nice-chaining syntax.

It’s also available for Swift but with another name – Framezilla

Installation with CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over eighteen thousand libraries and can help you scale your projects elegantly. You can install it with the following command:

$ sudo gem install cocoapods

To install Framer, simply add the following line to your Podfile:

pod "MXFramer"

then add

#import <Framer/Framer.h>

USAGE

You can configure relations with superview very fast and convenient:

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

… or just

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

For example, you just want to centered subview relative superview with constant width and height.

So easy to do it with Framer :

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

Relation between two views:

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);
    }];

… or maybe so?

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
    }];

NOTE

That’s important to point out relations for two views.

Incorrect:

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

Correct:

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

Container relation:

alt Framer

NOTE

At first you should configurate all subviews and then configure container.

    [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);
    }];

States:

It’s very convenient use many states for animations, because you can just configure all states in one place and when needed change frame for view – just apply needed state! Awesome, is’n it?


- (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];
}

set new state and animate it:

/* 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];
    }];

Macroses:

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

Updates:

v1.5

  • Updated documentation.
  • Added widthToFit and heightToFit.

v1.4

  • Added macroses for getting width, height etc.

v1.3

  • Added centerX and centerY methods for just setting center point.
  • Added width_to and height_to for configure height/width relatively specific view.

v1.1

  • Added ‘nui’ prefix to relations(left, right etc).
  • Added possibility to configure frame for special state.

v1.0

  • First release version. Configure frame blocks.

TODO

  • Other platforms support
  • Swift support
  • More tests

Author

Nikita Ermolenko, [email protected]

License

Framer is available under the MIT license. See the LICENSE file for more info.

Latest podspec

{
    "name": "MXFramer",
    "version": "1.5.2",
    "summary": "Comfortable syntax for working with frames",
    "description": "Fork from the original Framer with some enhancement.nFramer is a good framework which wraps working with frames with a nice chaining syntax.",
    "homepage": "https://github.com/RookieZn/Framer",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "rookiezn": "[email protected]"
    },
    "source": {
        "git": "https://github.com/RookieZn/Framer.git",
        "tag": "1.5.2"
    },
    "requires_arc": true,
    "platforms": {
        "ios": "8.0"
    },
    "source_files": "Framer/Classes/*.{h,m}"
}

Pin It on Pinterest

Share This