joshaber / swiftbox Goto Github PK
View Code? Open in Web Editor NEWFlexbox in Swift, using Facebook's css-layout.
License: Other
Flexbox in Swift, using Facebook's css-layout.
License: Other
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!
It would be nice to have swiftbox on cocoapods... but sadly the name is already taken for another project.
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
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?
Because git submodules are the worst!
Hey, I'd love to see this lib available in Swift 3 so I can implement it in my project.
Thanks π
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?
I'm trying to run the demo but it is not Swift 3 and Xcode won't run it as Swift 2.3.
I'm really excited that you found my little project useful :)
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".
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.