Layoutable

Layoutable is a swift reimplement of apple's Autolayout. It uses the same Cassowary algorithm as it's core and provides a set of api similar to Autolayout. The difference is that Layouable is more flexable and easy to use.Layoutable don't rely on UIView, it can be used in any object that conform to Layoutable protocol such as CALaye or self defined object.It can be used in background thread which is the core benefit of Layoutable. Layoutable also provides high level api and syntax sugar to make it easy to use.

Requirements

• iOS 8.0+
• Swift 4.2
• Xcode 10.0 or higher

Installation

Layoutable rely on Cassowary, you need to add both of them to your projetc.

Carthage

Carthage is a decentralized dependency manager for Cocoa application. To install the carthage tool, you can use Homebrew.

$ brew update
$ brew install carthage

To integrate Panda into your Xcode project using Carthage, specify it in your Cartfile:

github "https://github.com/nangege/Layoutable" "master"

Then, run the following command to build the Panda framework:

$ carthage update

At last, you need to set up your Xcode project manually to add the Panda,Layoutable and Cassowary framework.

On your application targets’ “General” settings tab, in the “Linked Frameworks and Libraries” section, drag and drop each framework you want to use from the Carthage/Build folder on disk.

On your application targets’ “Build Phases” settings tab, click the “+” icon and choose “New Run Script Phase”. Create a Run Script with the following content:

/usr/local/bin/carthage copy-frameworks

and add the paths to the frameworks you want to use under “Input Files”:

$(SRCROOT)/Carthage/Build/iOS/Layoutable.framework
$(SRCROOT)/Carthage/Build/iOS/Cassowary.framework

For more information about how to use Carthage, please see its project page.

Manually

`git clone [email protected]:nangege/Layoutable.git` ,
`git clone [email protected]:nangege/Cassowary.git`

then drag Layoutable.xcodeproj and Cassowary.xcodeproj file to your projrct

On your application targets’ “General” settings tab, in the “Linked Frameworks and Libraries” section,add Layoutable.framework and Cassowary.framework.

Usage

1. define your own Layout Object

   import Layoutable
   
   class TestNode: Layoutable{
   
     public init() {}
   
     lazy var manager  = LayoutManager(self)
   
     var layoutSize = InvaidIntrinsicSize
   
     weak var superItem: Layoutable? = nil
   
     var subItems = [Layoutable]()
   
     func addSubnode(_ node: TestNode){
       subItems.append(node)
       node.superItem = self
     }
   
     func layoutSubItems() {}
   
     func updateConstraint() {}
   
     var layoutRect: Rect = RectZero
   
     var itemIntrinsicContentSize: Size{
       return layoutSize
     }
   
     func contentSizeFor(maxWidth: Double) -> Size {
       return InvaidIntrinsicSize
     }
   
   }
   

2. use Layout object to Layout

   import Layoutable   
   
   // Layout node1 and node2  horizontalally in node,space 10 and equal center in Vertical
   
   let node = TestNode()
   let node1 = TestNode()
   let node2 = TestNode()
   
   node.addSubnode(node1)
   node.addSubnode(node2)
   
   node1.size == (30,30)
   node2.size == (40,40)
     
   [node,node1].equal(.centerY,.left)  
   [node2,node].equal(.top,.bottom,.centerY,.right)
   [node1,node2].space(10, axis: .horizontal)
     
   node.layoutIfEnabled()
   
   print(node.frame)       //  (0.0, 0.0, 80.0, 40.0)
   print(node1.frame)      //  (0.0, 5.0, 30.0, 30.0)
   print(node2.frame)      //  (40.0, 0.0, 40.0, 40.0)
   

Operation

1. basic attributes

   Like Autolayout, Layoutable support both Equal, lessThanOrEqual and greatThanOrEqualTo

    node1.left.equalTo(node2.left)
    node1.top.greatThanOrEqualTo(node2.top)
    node1.bottom.lessThanOrEqualTo(node2.bottom)

   or

    node1.left == node2.left   // can bve write as node1.left == node2  
    node1.top >= node2.top     // can bve write as node1.top >= node2
    node1.bottom <= node2.bottom // can bve write as node1.bottom <= node2
   

2. composit attribute

   beside basic attribute such as left,right, Layoutable also provide some Composit attribute like size ,xSide,ySide,edge

    node1.xSide.equalTo(node2,insets:(10,10))
    node1.edge(node2,insets:(5,5,5,5))
    node.topLeft.equalTo(node2, offset: (10,5))
      

   or

    node1.xSide == node2.xSide + (10,10) 
    //node1.xSide == node2.xSide.insets(10)
    //node1.xSide == node2.xSide.insets((10,10))
   
    node1.edge == node2.insets((5,5,5,5))
    // node1.edge == node2 + (5,5,5,5)
    
    node.topLeft == node2.topLeft.offset((10,5))
    

3. update Priority

   node1.width == 100 ~.strong 
   node1.height == 200 ~ 760.0

4. update constant

   let c =  node.left == node2.left + 10
   c.constant = 100
   

Supported attributes

Lisence

The MIT License (MIT)