fra

Framer

Good framework that wraps working with frames with a nice chaining syntax.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

68

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Categories

Readme

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 "Framer"

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, nikita.ermolenko@rosberry.com

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100