Declarative, configurable & highly reusable UI development as making Lego bricks.

@wangshengjia I created this PR just for you to take a look. Two things to mention:

1. For test dependency (Quick, Nimble), i pointed to my fork to get it compiled. But i didn't fix syntax in test target
2. There are exceptions raised when i push twitter and details page demo. from this function lg_setupCustomStyle which i haven't looked into.

Thanks and can't wait to get this more mature to use it. Keep up.

This pull request corrects the spelling of CocoaPods 🤓 https://github.com/CocoaPods/shared_resources/tree/master/media

One day I’ll make a bot that looks through the READMEs of all Pods, looks to see if it uses “Cocoapods” and PRs “CocoaPods” :D

— Ørta (@orta) February 10, 2016

Created with cocoapods-readme.

It would be nice to iterate over the child bricks like so:

  func update(_ targetView: UIView, with brick: Brick) {
        for child in brick.bricks {
            switch targetView {
            case let label as UILabel where brick == FooBrickBuilder.name:
                label.text = name
            case let label as UILabel where brick == FooBrickBuilder.address:
                label.text = address
            default:
                break
            }
        }
    }

Fixing Issue 73 so that it's possible to access the child bricks of a Brick instance.

Renamed Bricks.bricks to Bricks.childBricks to convey what the developer will be accessing. Exposed UIView.lg_brickName so that you can bind views to bricks with children:

//Boilerplate for example
let name = "Example name"
let address = "Example address"

//BrickDataSource implemented
func update(_ targetView: UIView, with brick: Brick) {
    brick.childBricks?.forEach { brick in
        let viewsForBrick = ([targetView] + targetView.subviews)
            .filter({$0.lg_brickName == brick.name})
        
        for view in viewsForBrick {
            switch view {
            case let label as UILabel where brick == FooBrickBuilder.name:
                label.text = name
            case let label as UILabel where brick == FooBrickBuilder.address:
                label.text = address
            default: ()
            }
        }
    }
}

Now your UI binding code looks like the following:

let title = "title".build(UILabel.self).style([.numberOfLines(0), .text("Lorem Ipsum is simply dummy text of the printing industry")])
let description = "description".build(UILabel.self).style([.textColor(UIColor.lightGray), .numberOfLines(0), .font(UIFont.systemFont(ofSize: 14)), .text("Lorem Ipsum has been the industry's standard dummy text ever since the 1500s")])
let redBlock = "red".build().style(Style.redBlockStyle)
let greenBlock = "green".build().style(Style.greenBlockStyle)
let blueBlock = "blue".build(UIImageView.self).style(Style.blueBlockStyle + [Appearance.custom(["shadowColor": UIColor.brown, "shadowOpacity": Float(1.0)])])

let blocks = Brick.union("blocks", bricks: [
    redBlock.height(50),
    greenBlock.height(80),
    blueBlock.height(30)],
    axis: .horizontal, align: .top, distribution: .fillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10)).style(Style.blocksStyle)

let brick = "details".build().bricks(title, description, blocks) {
    title, description, blocks in
    Layout(bricks: [title, description, blocks], axis: .vertical, align: .fill, distribution: .flow(3), metrics: LayoutMetrics(84, 20, 20, 20, 10, 10))
}

self.view.lg_configure(as: brick, updatingStrategy: .always)

// This example is assuming that ClassThatHandlesUpdates would
// change, say, the text of the UILabel created by the title brick
ClassThatHandlesUpdates().update(self.view, with: brick)

In Xcode 9.4.1 (Swift 4.1.2) if you try to get the child bricks for a Brick instance, the compiler complains: Ambiguous reference to member 'bricks(_:layout:)'

Example (using code from DetailsViewController in the Demo App):

let title = "title".build(UILabel.self).style([.numberOfLines(0), .text("Lorem Ipsum is simply dummy text of the printing industry")])
let description = "description".build(UILabel.self).style([.textColor(UIColor.lightGray), .numberOfLines(0), .font(UIFont.systemFont(ofSize: 14)), .text("Lorem Ipsum has been the industry's standard dummy text ever since the 1500s")])
let redBlock = "red".build().style(Style.redBlockStyle)
let greenBlock = "green".build().style(Style.greenBlockStyle)
let blueBlock = "blue".build(UIImageView.self).style(Style.blueBlockStyle + [Appearance.custom(["shadowColor": UIColor.brown, "shadowOpacity": Float(1.0)])])

let blocks = Brick.union("blocks", bricks: [
    redBlock.height(50),
    greenBlock.height(80),
    blueBlock.height(30)],
    axis: .horizontal, align: .top, distribution: .fillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10)).style(Style.blocksStyle)

Then call add the line:

print(blocks.blocks.count) //Generates compiler error: Ambiguous reference to member 'bricks(_:layout:)'

Left out some warnings as they are not critical. 5 test cases fail. Comented some code. Not yet tested if it works.

I really liked the idea, but do not like the library being in swift 3.

Also is it supported in any way or is this project abandoned? Anyway i'm going to look into your code and maybe write a simplified bicycle copy of it for myself.

eg.

import LeeGo

let titleBrick: Brick = "title".build(UILabel).style([.text("Showcase"), .backgroundColor(UIColor.lightGrayColor())])

could become

import LeeGo

let titleBrick: Brick = "title".build(UILabel).style([.text("Showcase"), .backgroundColor(.lightGrayColor())])

and

let bricks = ["red".build().style(Style.redBlockStyle).height(50),
 "green".build().style(Style.greenBlockStyle).height(80),
 "blue".build().style(Style.blueBlockStyle).height(30)]

let layout = Layout(bricks: bricks, axis: .Horizontal, align: .Top, distribution: .FillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10))
let viewBrick = "view".build().style(Style.blocksStyle).bricks(bricks, layout: layout).height(100)

could become

let bricks = ["red".build().style(.redBlockStyle).height(50),
 "green".build().style(.greenBlockStyle).height(80),
 "blue".build().style(.blueBlockStyle).height(30)]

let layout = Layout(bricks: bricks, axis: .Horizontal, align: .Top, distribution: .FillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10))
let viewBrick = "view".build().style(.blocksStyle).bricks(bricks, layout: layout).height(100)

But I understand if this was done intentionally; it is clearer and more easily readable (?) in the examples.

If this wasn't done deliberately, I'd gladly help using implicit type inference. :)

When making a pull request, the following error is generated by Travis CI and the build fails: ❌ “Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

With the NSLayoutAnchor, we can now use it to avoid the layout format language. Imagine, in your function that defines layout, we could pass the view and return an array of objects. Like this:

let title = "title".build(UILabel.self).style([.numberOfLines(0), .text("test")])
let subtitle = "subtitle".build(UILabel.self).style([.numberOfLines(0), .text("subtitle")])

let brick = "details".build().bricks(title) { container, title in
    return [
        title.centerXAnchor.constraint(equalTo: container.centerXAnchor),
        title.centerYAnchor.constraint(equalTo: container.centerYAnchor),
    ]
}

However, this approach will require some refactoring. I can volunteer, if you want :)

Hi Wang,

Congrats on the great tool, nicely done !! I was wondering what's your plan for providing actions for components, like Button, swipe, tap, or anything? Blockable actions?

Be able to show/hide one of the component (and its relevant margin layout) with or without animation.

Some inspirations https://github.com/forkingdog/UIView-FDCollapsibleConstraints