Giter VIP home page Giter VIP logo

flexboxobjc_deprecated's Introduction

FlexboxKit

Checkout FlexboxLayout if you're interested in the Swift port

A simple UIKit extension to wrap the flexbox properties in regular UIView. This project is based on the robust Facebook's C implementation of Flexbox.

The goal is to have a small standalone UIKit library to layout elements. It doesn't rely on the DOM model at all.

![Gif](demo.gif)

#Usage

The easiest way to use the flexbox layout facilities is to instantiate a FLEXBOXContainerView, set its flexbox properties (as exposed in the UIView category UIVIew+FLEXBOX), add all the subviews you want to it and additionaly set their flex properties.

If you have subviews which themselves will have subviews that you wish to layout using the flexbox engine, you simply have to set the UIView category property flexContainer to YES, and so on. You can also have nested FLEXBOXContainerViews.

e.g. Given a view (in this case a UITableViewCell) with these subviews:

FLEXBOXContainerView *contentView;
UIView *left, *right;
UILabel *title, *caption;

...

[contentView addSubview:left];
[contentView addSubview:right];
[contentView addSubview:time];

[right addSubview:title];
[right addSubview:caption];

The following flexbox layout code

contentView.flexDirection = FLEXBOXFlexDirectionRow;

left.flexFixedSize = (CGSize){A_FIXED_SIZE, A_FIXED_SIZE};
left.flexMargin = (UIEdgeInsets){SOME_MARGIN, SOME_MARGIN, SOME_MARGIN, SOME_MARGIN};
left.flexAlignSelf = FLEXBOXAlignmentCenter;

rigth.flexContainer = YES;
right.flex = 1;
right.flexJustifyContent = FLEXBOXJustificationCenter;

time.flexMargin = (UIEdgeInsets){SOME_MARGIN, SOME_MARGIN, SOME_MARGIN, SOME_MARGIN};
time.flexPadding = (UIEdgeInsets){SOME_PADDING, SOME_PADDING, SOME_PADDING, SOME_PADDING};
time.flexAlignSelf = FLEXBOXAlignmentCenter;

Results in:

![Gif](cell-example.png)

##Advanced usage

You can use FlexboxKit without using FLEXBOXContainerView by simply having a -[UIView layoutSubviews] implementation that calls the -[UIView flexLayoutSubviews] method defined in the UIView category UIVIew+FLEXBOX.

e.g.

- (void)layoutSubviews
{
    [super layoutSubviews];
    [self flexLayoutSubviews];
}

If you wish to run the layout engine on a background thread you can do so by calling [node layoutConstrainedToMaximumWidth:self.bounds.size.width] in a background thread and then set the computed frames in the main thread.

e.g.

- (void)flexLayoutSubviewsInBackground
{
    __weak __typeof(self) weakSelf = self;
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
        
        __strong __typeof(self) strongSelf = weakSelf;

        //run the flexbox engine on a backgroun thread...
        strongSelf.flexNode.dimensions = strongSelf.bounds.size;
        [strongSelf.flexNode layoutConstrainedToMaximumWidth:strongSelf.bounds.size.width];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            
            //assign the computed frames on the main thread...
            for (NSUInteger i = 0; i < strongSelf.flexNode.childrenCountBlock(); i++) {
                
                UIView *subview = self.subviews[i];
                FLEXBOXNode *subnode = strongSelf.flexNode.childrenAtIndexBlock(i);
                subview.frame = CGRectIntegral(subnode.frame);
            }
            
            strongSelf.frame = (CGRect){strongSelf.flexNode.frame.origin, strongSelf.flexNode.frame.size};
        });
        
    });

}

Attribuitions

It uses Facebook's flexbox implementation and was inspired by Josh Abernathy's SwiftBox and Robert Böhnke's FLXView.

flexboxobjc_deprecated's People

Contributors

alexdrone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flexboxobjc_deprecated's Issues

demo error in iphone 6s plus

hi alexdrone,
did you run your demo in iphone 6s plus?
when i run the demo with CellDemoTableViewController, and then scroll to top or to bottom.
iphone both cpu and memory will up to 99%.

The Flex Value Of Container

Hi, alexdrone
I recently made a Demo

    FLEXBOXContainerView *contaner = [FLEXBOXContainerView new];
    contaner.frame = self.view.bounds;
    contaner.flexDirection = FLEXBOXFlexDirectionColumn;
    contaner.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [self.view addSubview:contaner];

    FLEXBOXContainerView *topContainer = [FLEXBOXContainerView new];
    topContainer.flexFixedSize = CGSizeMake(0, 44);  // not work
    [contaner addSubview:topContainer];

I want topContainer size {0, 44}, but it not work.

I noticed this code :

@implementation FLEXBOXContainerView

- (void)layoutSubviews
{
    //default flexbox container attributes
    self.flex = self.flex < FLT_EPSILON ? 1 : self.flex;
    self.flexContainer = YES;  // It will take self.flex = 1.0 

    [super layoutSubviews];
    [self flexLayoutSubviews];
}

@end

Is it right ?
Sorry for my English

Why FLEXBoxNode not use minDimensions and maxDimensions

In The FLEXBoxNode.m

  • (void)setMinDimensions:(CGSize)size
    {
    _minDimensions = size;
    // _node->style.minDimensions[CSS_WIDTH] = size.width;
    // _node->style.minDimensions[CSS_HEIGHT] = size.height;
    }
  • (void)setMaxDimensions:(CGSize)size
    {
    _maxDimensions = size;
    // _node->style.maxDimensions[CSS_WIDTH] = size.width;
    // _node->style.maxDimensions[CSS_HEIGHT] = size.height;
    }

The staff is not working here

Does it support auto-compute cell height when it exists in tableview cell?

If i have uitableview cell which contains a view that has many items using flex layout.
how can I get the cell height before the item was being drawn on its container view ?
i knew about when the layout finished and it drew the items, then i get its height. but i still needs the height before drawing begins. because the method: heightforrowatindexpath

request

Will you please add a sample demo project implementing flexbox!
That would be helpful.

License

Hey,
This is a really cool project, but the lack of a standard license makes adopting it really tricky for any medium/large sized company which needs to audit licenses used in all software. Could you please reconsider simply using something standard? Great work.

Thanks,
Mark

Calculating the dimensions of FlexBoxContainer that would FIT all of its subviews, which are laid out with FlexboxKit

I want to self-size a CollectionView cell with Flexbox, because I've experienced both memory and performance issues when scrolling with my existing implementation, which uses Auto-layout declared in IB. There's about 10 constraints per item, and 12 items are displayed at any one time.

Let's say we're laying out a something like this Pinterest card here:

screen shot 2015-12-21 at 13 42 14

It's clear that the content dictates the height of the card: the card's width may be fixed, but its height is the sum of the height of the image and the height of each info section beneath it; which in turn, are determined by the height of the labels inside of each section.

Let's say we know the aspect ratio of the image, and the height of the text.

Rather than using Flexbox to 'lay out the subviews' , we actually want FlexBox to figure out just how tall our FlexBoxContainer needs to be!

This information can be used in, e.g. UICollectionViewCell's preferredLayoutAttributesFittingAttributes method.

Is this possible?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.