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

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. Install it with the following command:

$ gem install cocoapods

To integrate Layoutable into your Xcode project using CocoaPods, specify it to a target in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
target 'MyApp' do
  # your other pod
  # ...
  pod 'SwiftLayoutable'
end

Then, run the following command:

$ pod install

open the {Project}.xcworkspace instead of the {Project}.xcodeproj after you installed anything from CocoaPods.

For more information about how to use CocoaPods, see this tutorial.

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 git@github.com:nangege/Layoutable.git` ,
`git clone git@github.com: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 layoutManager  = LayoutManager(self)
      var layoutSize = CGSize(width: InvalidIntrinsicMetric, height: InvalidIntrinsicMetric)
      weak var superItem: Layoutable? = nil
      var subItems = [Layoutable]()
      func addSubnode(_ node: TestNode){
        subItems.append(node)
        node.superItem = self
      }
      func layoutSubItems() {}
      func updateConstraint() {}
      var layoutRect: CGRect = .zero
      var itemIntrinsicContentSize: CGSize{
        return layoutSize
      }
      func contentSizeFor(maxWidth: CGFloat) -> CGSize {
        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)