eonist/FlexBox

FlexBox for swift

FlexBox is a layout distributor:

Proportionally distribute items
Easy to use
Supports min and max stops
Supports fixed, proportional-values, and parent-based-values.

Example code:

CustomContainer and CustomItem Extend FlexBoxContainerKind and FlexBoxItemKind respectively

let container = self.addSubView(CustomContainer(frame.size.w,frame.size.h,.flexStart,.flexStart))/*Create FlexBoxContainer*/
container.flexBoxItems = [1,1,1,3].enumerated().map{ (i,grow) in
    return container.addSubView(CustomItem(80, 80, "item-" + i.string, grow, nil,i.string))
}
container.flex()/*init layout distribution*/

Examples:

Grow: 1-1-1-3

Stretch-grow

Center-stretch

JustifyContent: Space-Around

JustifyContent: Space-Between

Justify:Center, Align-Items:flexStart

Justify:Center, Align-Items:flexEnd

Justify:Center, Align-Items:center

Justify:flexEnd

Justify:flexStart

Grow:1-1-1-3

Grow:2-1-2-1

Flexible is a protocol which views must adhere to. Basically must have settable/gettable size and position
FlexBoxItemKind If you want items to flex, then the items must adhere to this protocol
FlexBoxContainerKind If you want flex items, then the container must adhere to this protocol
FlexBoxContainer Holds the FlexItems and flex props that these should adhere to
FlexBoxItem Has a ref to the Flexible instance, and individual flex props that apply

Concept:

You can implement FlexBoxItemKind and FlexBoxContainerKind

If you can add variables to the class you can implement the FlexBoxItemKind and FlexBoxContainerKind

struct CustomItem:NSImage,FlexBoxItemKind{
    /*create vars for initRect,grow,shrink,basis*/
}
struct CustomContainer:NSView,FlexBoxContainerKind{
    /*create vars for rect,flexBoxItems,justifyContent,alignItems*/
}

Or you can extend classes with the Flexible protocol and then decorate with FlexBoxItem and FlexBoxContainer

extension NSImage:Felxible{
    var flexSize {/*add getter and setter here*/}
    var flexPoint{/*add getter and setter here*/}
}

Working on:

Implementing min max support
Implementing shrink
Interactive resize-demo
Overflow support
Add protocols to support FlexBox w/o decoration
Column support (FlexBoxContainer it self must be able to flex I think)

Some useful links while doing flexbox research:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://cssreference.io/flexbox/

https://yoksel.github.io/flex-cheatsheet/#flex-grow

https://chriswrightdesign.com/experiments/flexbox-adventures/

eonist / FlexBox