Get Updates By E-mail 

Article Written By:
Johann Dowa

Open Source iOS Library Enabling View Layout With CSS Flexbox Style Syntax

  •  
  •  
  •  
  •  
  •  

Last month I mentioned an interesting library called Motif allowing UI theming with a CSS style syntax.

Here’s an open source library that allows you to layout your views using the familiar CSS flexbox syntax called Swiftbox from Josh Abernathy.

Swiftbox uses Facebook’s css-layout library to provide the CSS syntax.

Here’s a code snippet from the readme showing an example usage of Swiftbox.

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}}

You can find SwiftBox on Github here.

Robert Bohnke has also created a library for layoing out views inspired by SwiftBox called FLXView which can be found on Github here.

A nice way to layout views.


  •  
  •  
  •  
  •  
  •  

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments