joshaber/swiftbox

Flexbox in Swift, using Facebook's css-layout.

SwiftBox

A Swift wrapper around Facebook's implementation of CSS's flexbox.

Example

let parent = Node(size: CGSize(width: 300, height: 300),
                  childAlignment: .Center,
                  direction: .Row,
                  children: [
    Node(flex: 75,
         margin: Edges(left: 10, right: 10),
         size: CGSize(width: 0, height: 100)), 
    Node(flex: 15,
         margin: Edges(right: 10),
         size: CGSize(width: 0, height: 50)),
    Node(flex: 10,
         margin: Edges(right: 10),
         size: CGSize(width: 0, height: 180)),
])

let layout = parent.layout()
println(layout)

//{origin={0.0, 0.0}, size={300.0, 300.0}}
//	{origin={10.0, 100.0}, size={195.0, 100.0}}
//	{origin={215.0, 125.0}, size={39.0, 50.0}}
//	{origin={264.0, 60.0}, size={26.0, 180.0}}

Alternatively, you could apply the layout to a view hierarchy (after ensuring Auto Layout is off):

layout.apply(someView)

See SwiftBoxDemo for a demo.

swiftbox's Issues

NodeImpl not recognised

Hi,

I am getting

Use of undeclared type 'NodeImpl'

in my project. I have copied all the files and I am able to navigate to NodeImpl file through xcode. Not sure whats causing the error.

Please help me.

Thanks,
Kanishka

Swift 3 compatibility

Hey, I'd love to see this lib available in Swift 3 so I can implement it in my project.

Thanks 😄

SwiftBox name is allready taken on cocoapods

It would be nice to have swiftbox on cocoapods... but sadly the name is already taken for another project.

https://cocoapods.org/pods/SwiftBox

I am using xcode 8 and it says that this project is developed by using swift 2.x. I think that it has been migrated to swift 3

Super cool :)

I'm really excited that you found my little project useful :)

Layout wasn't returning correct width/height when child nodes get a bit more complicated

Here's the setup I encountered issue

let imageText = Node(
    direction: .Column,
    padding: Edges(top: 20, bottom: 20),
    children: strings.map { (text : String) -> Node in
        let image = Node(
            size: CGSizeMake(100, 100)
        )
        let text = Node(
            measure: { w in
                println("\(w)") // Nan
                label.text = text
                label.preferredMaxLayoutWidth = w
                return label.sizeThatFits(CGSizeMake(w, CGFloat.max))
        })
        let row = Node(
            direction: Direction.Row,
            children:[image, text]
        )
        return row
    }
)
println(imageText.layout(maxWidth: 375).frame)  // (0.0, 0.0, 7704.0, 240.0)

Notice the width wasn't obeying the maxWidth we've put into our layout.

So Basically I want to implement something like this:

I had some sample data setup here:

let strings : [String] = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ex dolor, imperdiet vel tellus sollicitudin, ultrices maximus nunc. Ut non vehicula magna. Etiam sit amet varius lectus, et luctus dui. Sed eget blandit turpis. Nullam laoreet at felis non fermentum. Integer elit sem, tempus eget ex non, mattis porta lorem. Sed ut quam vel nibh luctus bibendum quis sed mi.",
    "Fusce scelerisque rhoncus elementum. Maecenas ultricies est ex, ut varius mauris cursus at. Maecenas sollicitudin orci posuere, ultricies lacus vel, scelerisque nibh. Nullam a turpis a urna elementum posuere. Integer porttitor vestibulum urna lobortis tincidunt. Aliquam consectetur sem metus, et laoreet libero rutrum nec. Donec sed justo dapibus, mollis nibh volutpat, sollicitudin sem. Suspendisse tempor, velit ac ullamcorper pretium, sapien risus molestie enim, aliquam cursus ex massa a nisl. Duis gravida, diam eget rutrum sagittis, dui est malesuada mi, a dapibus eros odio sit amet tellus. Nunc porttitor nunc nec massa mollis, et pellentesque est egestas. Vivamus venenatis dignissim massa in euismod. Vestibulum rutrum ex a interdum varius. Donec convallis gravida dui eget viverra. Suspendisse tempor, lorem sit amet consequat mattis, libero ex dictum quam, eget iaculis felis velit eu nunc. Morbi eros lectus, aliquet at pulvinar sed, tempor malesuada elit. Integer blandit gravida felis.",
    ]

// Also setting up a label to calculate the size
let label = UILabel()
label.numberOfLines = 0

I tried a simpler setup and works as expected:

let textOnly = Node(
    direction: .Column,
    padding: Edges(top: 20, bottom: 20),
    children: strings.map { (text : String) -> Node in
        let text = Node(
            measure: { w in
                println("\(w)") // 375
                label.text = text
                label.preferredMaxLayoutWidth = w
                return label.sizeThatFits(CGSizeMake(w, CGFloat.max))
        })
        return text
    }
)

println(textOnly.layout(maxWidth: 375).frame) // (0.0, 0.0, 375.0, 669.0)

So is there something wrong with my setup or it's a bug that I encountered?
Thanks for helping out!

Support Swift 2.0

There are a few issues with compiling SwiftBox in Xcode 7 (mostly around Printable and DebugPrintable no longer being around). Would it be possible to add a Swift 2.0-compatible branch? Thanks!

make available as a CocoaPod or Carthage Package

Because git submodules are the worst!

Position: absolute?

css-layout has support for position: absolute, i.e. elements that don't participate in the flexbox layout and instead have an explicit position. I don’t see this option exposed anywhere in the SwiftBox API. Am I missing something, or is this just not implemented yet?

Demo not up to date with Swift

I'm trying to run the demo but it is not Swift 3 and Xcode won't run it as Swift 2.3.

Example in README doesn't produce indicated output

If you run the example as given, you don't get the indicated output, because the default direction for a Node is ".Column" instead of ".Row".

Using it in TableView

Hello Josh!

Cool project, first step in bringing technologies from React Native to real native code, without js! I wonder if this can be used to calculate layout of reusable cells in table view. It seems to be nice fit there since you have to provide height of cell before you provide actual cell to table view. Also, it enables easy caching of cells layout and simple reuse model where views and layout of views already separated from each other.

My question is there any way to calculate height with fixed width? Cells can have different heights that depends on content size (text size in my case) so in first we have to have some way to provide information about text size then calculate height and other stuff then apply in to view hierarchy.

As I see I should calculate text size by hand, then create Node hierarchy with that sizes and then ask about final height. Any thoughts how can it be?