Latest 0.1-beta
Homepage https://github.com/nangege/Layoutable
License MIT
Platforms ios 8.0, requires ARC
Dependencies SwiftCassowary
Authors

Carthage compatible
[SwiftLayoutable]()
[Swift 4.0]()

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

Layoutable NSLayoutAttribute
Layoutable.left NSLayoutAttributeLeft
Layoutable.right NSLayoutAttributeRight
Layoutable.top NSLayoutAttributeTop
Layoutable.bottom NSLayoutAttributeBottom
Layoutable.width NSLayoutAttributeWidth
Layoutable.height NSLayoutAttributeHeight
Layoutable.centerX NSLayoutAttributeCenterX
Layoutable.centerY NSLayoutAttributeCenterY
Layoutable.size width and height
Layoutable.center centerX and centerY
Layoutable.xSide left and right
Layoutable.ySide top and bottom
Layoutable.edge top,left,bottom,right
Layoutable.topLeft top and left
Layoutable.topRight top and right
Layoutable.bottomLeft bottom and left
Layoutable.bottomRight bottom and right

Lisence

The MIT License (MIT)

Latest podspec

{
    "name": "SwiftLayoutable",
    "version": "0.1-beta",
    "summary": "Swift reimplement of Autolayout",
    "description": "Layoutable is a swift reimplement of apple's Autolayout. n* It uses the same Cassowary algorithm as it's core and provides a set of api similar to Autolayout. n* 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.n* 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.",
    "homepage": "https://github.com/nangege/Layoutable",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "nangege": "[email protected]"
    },
    "swift_version": "4.2",
    "platforms": {
        "ios": "8.0"
    },
    "module_name": "Layoutable",
    "source": {
        "git": "https://github.com/nangege/Layoutable.git",
        "tag": "0.1-beta"
    },
    "source_files": [
        "Layoutable/Sources/*.swift",
        "Layoutable/Layoutable.h"
    ],
    "public_header_files": [
        "Layoutable/Layoutable.h"
    ],
    "requires_arc": true,
    "dependencies": {
        "SwiftCassowary": [
            "~> 0.1-beta"
        ]
    }
}

Pin It on Pinterest

Share This