layoutbox / flexlayout Goto Github PK

I have a tableView and three cells. Each cell has two labels: timeLabel and titleLabel. The first two titleLabels, whose background colors are red, have the same text "未命名". The first one show full text, but the second one not.
My code in the cell:

self.contentView.flex.direction(.row).define { (flex) in
    flex.addItem(timeLabel)
    flex.addItem(titleLabel).marginLeft(10).shrink(1).backgroundColor(UIColor.red)
}

I'm new to use FlexLayout, and I want to layout 2~9 imageViews (aspectRatio 1:1) like this:

But I try my best, not really exact:

My code is here, hope you can give me some solution😆 :

import UIKit
import FlexLayout
import PinLayout

class TestView: UIView {
    fileprivate let rootFlexContainer = UIView()
    
    init() {
        super.init(frame: .zero)
        backgroundColor = .white
        rootFlexContainer.backgroundColor = .yellow
        addSubview(rootFlexContainer)
        
        var picViews = [UIImageView]()
        for _ in 0..<9 {
            let imageView = UIImageView(image: UIImage(named: "method"))
            imageView.contentMode = .scaleAspectFill
            imageView.clipsToBounds = true
            picViews.append(imageView)
            rootFlexContainer.addSubview(imageView)
        }
        
        rootFlexContainer.flex.direction(.row).wrap(.wrap)
            .marginLeft(50).marginTop(100).define { flex in
            for (i, imgV) in picViews.enumerated() {
                flex.addItem(imgV).width(30%).aspectRatio(1)
                if i % 3 > 0 { // 右2列
                    imgV.flex.marginLeft(10)
                }
                if i / 3 > 0 { // 下2行
                    imgV.flex.marginTop(10)
                }
            }
        }
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        rootFlexContainer.pin.top().horizontally().width(87%)
        rootFlexContainer.flex.layout(mode: .adjustHeight)
    }
}

I have a question about UIImageView's size, look through the project there does not have UIImageView related special things, but when set an image to UIImageView, the UIImageView auto have a size, as Apple's document says, set image will not set the UIImageView's size but call sie sizeToFit method to set the size, so my question is how the UIImageView's size work in Yoga?

Addtionly, I have a situation that I want to add a button in a UIImageView object, but after added the button, the image resize to the button's size, not keep the image object's size, how to solve it? here is my code

flex.addItem().direction(.row).padding(10).define({ (flex) in
    let imageView = UIImageView()
    imageView.image = UIImage(named: "ui-icons_2e83ff_256x240")
    flex.addItem(imageView).define({ (flex) in
        flex.alignItems(.center)
        flex.justifyContent(.center)
        
        let button = UIButton()
        flex.addItem(button).backgroundColor(.red).define({ (flex) in
            flex.width(50)
            flex.height(50)
        })
    })
})

Thank you very much.

Hello. I want to ask a question. I have an UIImageView as this:

imageView.flex.size(someSize)

If I don't want the size constraint in some conditions and use imageView's intrinsic size, how can I remove the size constraints to the imageView?

I am trying to make a dynamic height TableViewCell using FlexLayout. I follow the TableViewExample in FlexLayoutSample and found a problem, if the height of the Cell changes, the margin of the subview using the FlexLayout layout will not meet expectations.

I use FlexLayoutSample as an example. After a simple modification, I can reproduce this problem. The marginTop will be based on the parent container instead of the sibling item.

I want to ask how to solve this problem. I don't know if this is a bug of Yoga, it's more like a FlexLayout usage issue.

Snapshot

Code

diff --git a/Example/FlexLayoutSample/UI/Examples/TableViewExample/Subviews/MethodCell.swift b/Example/FlexLayoutSample/UI/Examples/TableViewExample/Subviews/MethodCell.swift
index 3fc6df2..7209c16 100644
--- a/Example/FlexLayoutSample/UI/Examples/TableViewExample/Subviews/MethodCell.swift
+++ b/Example/FlexLayoutSample/UI/Examples/TableViewExample/Subviews/MethodCell.swift
@@ -21,7 +21,7 @@ class MethodCell: UITableViewCell {
     fileprivate let padding: CGFloat = 10

     fileprivate let nameLabel = UILabel()
-    fileprivate let descriptionLabel = UILabel()
+    fileprivate let descriptionLabel = CustomView()

     override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
@@ -34,8 +34,8 @@ class MethodCell: UITableViewCell {
         nameLabel.font = UIFont.boldSystemFont(ofSize: 14)
         nameLabel.lineBreakMode = .byTruncatingTail

-        descriptionLabel.font = UIFont.systemFont(ofSize: 12)
-        descriptionLabel.numberOfLines = 0
+//        descriptionLabel.font = UIFont.systemFont(ofSize: 12)
+//        descriptionLabel.numberOfLines = 0

         // Use contentView as the root flex container
         contentView.flex.padding(12).define { (flex) in

diff --git a/Example/FlexLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift b/Example/FlexLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift
index 57ce16c..fac7d55 100644
--- a/Example/FlexLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift
+++ b/Example/FlexLayoutSample/UI/Examples/TableViewExample/TableViewExampleView.swift
@@ -76,4 +76,16 @@ extension TableViewExampleView: UITableViewDataSource, UITableViewDelegate {
         // WANRING: You must also set the UITableView.estimatedRowHeight for this to work.
         return UITableViewAutomaticDimension
     }
+
+    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        tableView.deselectRow(at: indexPath, animated: true)
+
+        let cell = tableView.cellForRow(at: indexPath) as! MethodCell
+        let randomIndex = Int(arc4random_uniform(UInt32(methods.count) - 1))
+        let method = methods[randomIndex]
+        cell.configure(method: method)
+
+        tableView.beginUpdates()
+        tableView.endUpdates()
+    }
 }

import UIKit

final class CustomView: UIView {
  
  var text: String? {
    didSet {
      label.text = text
    }
  }
  
  private let label: UILabel = {
    let label = UILabel()
    label.font = .systemFont(ofSize: 12)
    label.numberOfLines = 0
    return label
  }()
  
  override init(frame: CGRect) {
    super.init(frame: frame)
    
    flex.addItem(label)
  }
  
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
  override func layoutSubviews() {
    super.layoutSubviews()
    
    flex.layout(mode: .adjustHeight)
  }
}

You can also check out the custom_view_layout branch of my fork.

Per documentation:

It is possible to access the flex items's UIView using flex.view. This is particularly useful when using flex.define() method.

1.3.4 eliminates that by making flex.view a private method alongside fixing the retain cycle issue. This is a breaking change to the API that I don't think should be happening on a ..z version bump.

It's really convenient to attach an extension to Flex class to do stuff like drop shadow, borders in a chainable way--it makes view descriptions very declarative. Would prefer that we don't make this var private -- developers can easily read the weak tag and understand the limitations there.

How to recalculate the entire container if one object is hidden and the container is compressed ?

Hi @lucdion. Gives an error in Xcode 9.1

//
//  TestViewController.swift
//  FlexLayoutSample
//
//  Created by ciel on 2018/5/2.
//  Copyright © 2018年 Mirego. All rights reserved.
//

import UIKit
import FlexLayout
import PinLayout

class TestViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .red
        
        // Do any additional setup after loading the view.
        self.view.flex.define { (flex) in
            flex.addItem().define({ (flex) in
                flex.view?.backgroundColor = .white
                flex.height(100)
                flex.direction(.row)
                flex.wrap(.noWrap)
                let v = UIView()
                v.backgroundColor = .green
                
                flex.marginTop(100)
                flex.addItem(v).define({ (flex) in
                    flex.size(CGSize(width: 30, height: 30))
                })
                flex.addItem().direction(.column).define({ (flex) in
                    flex.marginLeft(10)
                    flex.view?.backgroundColor = .gray
                    for _ in 0...3 {
                        let btn = UIButton(type: .custom)
                        btn.backgroundColor = .blue
                        flex.addItem(btn).define({ (flex) in
                            flex.width(100)
                            flex.marginTop(10)
                        })
                    }
                })
            })
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.view.flex.layout()
    }

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

With the latest version, and code above, blue items out of the bounds of the container

I think this should be wrong.

Hi,

I'm trying to make a simple view composed of one row of two columns : the first column contains two labels (title and subtitle below) and the second col contains a button with a static size and centered vertically.

My goal is to make the labels fill the remaining horizontal space to always have the button on the right side of the view. It works well when the text inside the labels is short and it's pushing the button outside the container once the text is long enough to cause the label to expand vertically.

What am I doing wrong ?

here's what i'm trying to achieve (green outline is the frame) :

here's the result on simulator :

here's the code :

class MyView: BaseView {
    
    var titleLabel = UILabel()
    var subtitleLabel = UILabel()
    var infoButton = MyButton()
    var mainContainer = UIView()
    
    override init() {
        super.init()
        setup()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    fileprivate func setup() {
        subtitleLabel.numberOfLines = 0

        mainContainer.flex.direction(.row).define { (flex) in
            flex.addItem().grow(1).define({ (flex) in
                flex.addItem(titleLabel)
                flex.addItem(subtitleLabel).marginTop(Dimen.spacing.tiny)
            })
            flex.addItem().shrink(0).define({ (flex) in
                flex.addItem(infoButton).width(30).height(30).alignSelf(.center)
            })
        }
        
        addSubview(mainContainer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        mainContainer.flex.layout()
    }
}

you can assume BaseView is a regular UIView and Dimen.spacing.tiny is just a CGFloat constant

Hi, I decided to try FlexLayout / PinLayout and have some questions about combining them and the workflow of "layers" and nested views.

Below is a super ugly sketch of the desired outcome:

It's a UITableViewCell containing:

• One container (red): Which holds the row containing:

  • One circular UIView: (white) with green border
    • The circular UIView holds an UIImageView
  • One multi line label that scales

• Two lines (Green): From the top of the cell (no margin) to the top of the circular container and from the bottom of the cell to the bottom of the circular container

This was my approach after some mixing, checking your UITableView sample:
FlexLayout:

• Add a container with margin or padding, holding the row of items
• First item in row, add a rounded UIView with padding and call addItem on it to add the imageview within
• Add the multi line label to the container

Pin:
Add two UIViews and pin one to top, topCenter of the imageContainer while pinning the other one to bottom and bottomCenter of the imageContainer

(The red container is in reality transparent)

fileprivate let iconImageView = UIImageView()
fileprivate let nameLabel = UILabel()
fileprivate let imageContainer = UIView()
fileprivate let topLine = UIView()
fileprivate let bottomLine = UIView()
fileprivate let containerView = UIView()
let padding: CGFloat = 16

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    selectionStyle = .none
    separatorInset = .zero
    iconImageView.contentMode = .scaleAspectFit
    contentView.backgroundColor = .white
    containerView.backgroundColor = .clear
    nameLabel.font = .getFont()
    nameLabel.numberOfLines = 0
    designLines()
    addLines()
    containerView.flex.define { (flex) in
        flex.addItem().direction(.row).padding(padding).define({ (flex) in
        flex.addItem(imageContainer).size(40).alignSelf(.center).padding(5)
            .addItem(iconImageView).size(30).aspectRatio(1)
            flex.addItem(nameLabel).marginLeft(padding).grow(1).shrink(1)
        })
    }
    addSubview(containerView)
}
private func addLines() {
    contentView.addSubview(topLine)
    contentView.addSubview(bottomLine)
}
private func designLines() {
    topLine.backgroundColor = .green
    bottomLine.backgroundColor = .green
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

func configure(_ text: String) {
    nameLabel.text = text
    nameLabel.flex.markDirty()
}

override func layoutSubviews() {
    super.layoutSubviews()
    imageContainer.setupCircleView(backgroundColor: .white, borderThickness: 2.0, borderColor: .green)
    contentView.flex.layout(mode: .adjustHeight)
}

// MARK: - Pin the lines to top / bottom of the cell and centered by imageContainer
private func pinLines() {
    topLine.pin.top().bottomCenter(to: imageContainer.anchor.topCenter).width(2)
    bottomLine.pin.bottom().topCenter(to: imageContainer.anchor.bottomCenter).width(2)
}

fileprivate func layout(_ size: CGSize) {
    containerView.pin.width(size.width)
    containerView.flex.layout(mode: .adjustHeight)
    pinLines()
}

override func sizeThatFits(_ size: CGSize) -> CGSize {
    layout(size)
    return containerView.frame.size
}

}

Ideally I'd go with margin on the containerView but it ended up wonky, and right now the bottom green line isn't showing.

Is this a sane approach to layout this type of view or do you have a better suggestion?

Best,

Hey hie thanks for the Awesome Library =D .

So there's a small problem which I'm facing
I was able to add a pan gesture in the View which is inherited from BaseView in ViewController inherited from BAseViewController . (Followed the same approach which is in the Example code of the library swift).

The below gif shows my requirements.
This thing is done from storyboard I'm trying it using FlexLayout.

So here(in the gif) I added the priorities to UIVIew with Autolayout then made an IBoutlet of NSLayoutConstraint
so when I swipe up using PAN gesture the view Expands and while sliding down the view shrinks (so as the constraints.constant value). So all the sliding up and down is done on that Iboutlet of NSLayoutConstraint.constant value (I mean I modify the value so the view changes its height with :usingSpringWithDamping effect)

But in FlexLayout I Couldn't get the constraints.constant value . I know FlexLayout lays out the view.. but How to achieve the above scenario with FlexLayout.

Looking for immediate help.
Thanks =)

[P.S. Sorry for hiding the details, there are some copyright thingy issues.]

I am getting below Error while i export to IPA.

Failed to verify bitcode in FlexLayout.framework/FlexLayout:
error: Cannot extract bundle from /var/folders/ww/nzb88by17dxg0bxns_9zncfc0000gn/T/XcodeDistPipeline.IU0/Root/Payload/SampleApp.app/Frameworks/FlexLayout.framework/FlexLayout (i386)

Following the recent update of Yoga license to MIT shouldn't FlexLayout update the license of FlexLayout and PinLayout to MIT also.
It will be very much appreciated.

When I tried to layout a cell, there is a problem with UILabel.
Here is the code of layout:

contentView.flex.direction(Flex.Direction.column).alignContent(Flex.AlignContent.stretch).justifyContent(Flex.JustifyContent.center).marginLeft(15).marginRight(15).define { (flex) in
      flex.addItem().direction(Flex.Direction.row).alignItems(Flex.AlignItems.center).justifyContent(Flex.JustifyContent.start).define({ (flex) in
        flex.addItem(iconImageBackView).width(30).height(30).addItem(iconImageView).width(30).height(30)
        flex.addItem().grow(1).alignContent(Flex.AlignContent.stretch).marginLeft(10).define({ (flex) in
          flex.addItem(titleLabel).marginTop(9.5).height(20)
          flex.addItem().grow(1).alignContent(Flex.AlignContent.center).direction(Flex.Direction.row).justifyContent(Flex.JustifyContent.end).marginBottom(9).height(17.5).define({ (flex) in
            flex.addItem(subTitle).shrink(1).grow(1).backgroundColor(UIColor.green)
            flex.addItem(ruleLabel).marginLeft(2.5)
            flex.addItem(playerLabel).marginLeft(2.5)
            flex.addItem(scoreLabel).marginLeft(2.5)
          })
        })
      })
      flex.addItem().height(1).backgroundColor(UIColor.white22622622610)
    }

In this code, roleLabel, playerLabel and scoreLabel all have layout like this, they are the label with red border with rounded corner.

flex.width(45).shrink(0).height(18).alignItems(Flex.AlignItems.center).justifyContent(Flex.JustifyContent.center).addItem(label).width(45)

The Layout result is like this:

the UILabel object subTitle pointed by the blue arrow is bigger than expected, can you help me with this problem?

I have a contentView, contentView have a scrollview, code is below, but scrollview frame is larger than contentView, not equal contentView height, how can I do?

addSubview(contentView)
contentView.flex.direction(.column).define { (flex) in
         flex.addItem(scrollView).define({ (flex) in
                    for item in list {
                        let view = VoteTextSelectRow(state: item)
                        flex.addItem(view).marginTop(26)
                    }
                    flex.addItem().height(80)
                })
                
        }

Maybe we can use this as an example app to help others?
Not sure if i'm the only one stuck.

Here is my example app -> https://github.com/patchthecode/FlexLayoutPlayground
Just clone and do pod update and it should work.

I needed help on the following. I am not sure if i am not updating the layouts properly.

1. When i launch the app all seems well except for the bottom right blue KiloMeters label. I just dont know how to get it properly right aligned. Also it's width should take higher priority than the Label to the left of it. Blue view should fit the width of the label. And greenview to the left should take up the remaining space, but shrink if blueView needs more space. Left greenView number or lines of label is 2. If it cant fit, it should wrap to 2nd line.

2. As i start scrolling i sometimes (but not always) see the right padding disappear. When i checked it out, i realized that the green container view didnt adjust its width to fit the label.

3. The bottom right blue view starts sticking to the top. Also, theCompany name does not break to another line.

4. Also, with the number of lines on a label set to 0, I get this when i scroll.

Maybe it should get the width of the label first, and then wrap it if it cant fit? (or maybe i am just doing something wrong again 😅.

5. Lastly how do I make the cells height automatic?
   i tried using UICollectionViewFlowLayoutAutomaticSize with an estimated height, but the views become wrong sizes. And nothing displays.

I'm pretty sure it must be something wrong im doing, so maybe If you help with this project, it can be used as an example for this repo? (if you want to of coruse)

Thanks!

I have a view with a containerView. There are two UILabels and a UIButton added to containerView, named titleLabel0 with text "000000...", titleLabel1 with text "1111111...", button0 with text "222222...". Layout is shown in image below. I wonder why the button0's size is not the same as its titleLabel's ?

In addition, my layout code is:

self.addSubview(containerView)
self.containerView.flex.direction(.column).alignItems(.center).define { (flex) in
        flex.addItem(tipLabel0)
        flex.addItem(tipLabel1).marginTop(10)
        flex.addItem(button0).marginTop(40)
}

override func layoutSubviews() {
        super.layoutSubviews()
        self.containerView.pin.width(100%)
        self.containerView.flex.layout(mode: .adjustHeight)
}

Hi @lucdion . How to compress the text if it does not fit in frames box? For example, decrease the font size.
label.adjustsFontSizeToFitWidth = true and label.adjustsFontForContentSizeCategory = true - not work

And if you do not mind, how to change the display of objects in cells if the cell size has changed. For example, a grid has become a table.

Hi @lucdion. When we hide the object with selec.flex.isIncludedInLayout (false), it disappears, but its marginBottom (8) remains, and afterwards there is a large blank if there are many such objects. How to hide an object completely with all its indents ?

Need suggestion for flex layout to be used in navigation bar and its items, considering if I'm customising my navigation bar without using NavigationController

Hi!

I have an issue with preprocessor macros, such as FLEXLAYOUT_USE_CARTHAGE. There is situations when I cannot set them, eg: in swift playgrounds.

I just removed them and everything works fine. But I have a question why you are using them at all? I mean what are the cases when we need to import Yoga instead of YogaKit?

I think those preprocessor macros should be removed. Or maybe you should revert them: without macros we should import YogaKit, with macro should import Yoga. Because it seems like YogaKit import is used in almost every case.

Thank you!

P.S. I can send a pull request if you wish.

Hello, I noticed something while building a layout : when a label's text value is updated its bounds don't seem to update even after layoutSubviews is executed in the parent view.

Here's a simple example : I have a controller with a flex container containing a button and a label. Pressing the button assign a new text to the label (a bit longer than the original value) and setNeedLayout is called on the controller's view. However doing so cause the UILabel to truncate the text.

class DummyView: UIView {
    
    let flexContainer = UIView()
    let button = UIButton()
    let label = UILabel()
    
    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }
    override init(frame: CGRect) { super.init(frame: frame) }
    
    convenience init() {
        self.init(frame: .zero)
        self.button.setTitle("button", for: .normal)
        self.button.setTitleColor(UIColor.red, for: .normal)
        self.label.text = "hello"
        
        flexContainer.flex.padding(20).alignItems(.center).define { (flex) in
            flex.addItem(button).width(100%)
            flex.addItem(label).marginTop(10)
        }
        addSubview(flexContainer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.flexContainer.pin.top().left().right()
        self.flexContainer.flex.layout(mode: .adjustHeight)
    }
    
}

class DummyController: UIViewController {

    fileprivate var mainView: DummyView { return self.view as! DummyView }
    init() {  super.init(nibName: nil, bundle: nil) }
    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }
    override func loadView() { view = DummyView() }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        mainView.button.addTarget(self, action: #selector(onButtonPressed(sender:)), for: .touchUpInside)
    }
    
    @objc func onButtonPressed(sender: UIButton) {
        mainView.label.text = "goodbye"
        mainView.setNeedsLayout()
    }
    
}

I did see some references to tvOS in the code, but the Podspec doesn't declare its support for tvOS. Is this omission on purpose? Not being ready for tvOS for example?

I have a contentView, contentView have a scrollview, code is below, but scrollview frame is larger than contentView, not equal contentView height, how can I do?

 addSubview(contentView)
        contentView.flex
            .direction(.column)
            .padding(23, 16, 23, 16)
            .define { (flex) in
                flex.addItem(scrollView).define({ (flex) in
                    for item in list {
                        let view = VoteTextSelectRow(state: item)
                        flex.addItem(view).marginTop(26)
                    }
                    flex.addItem().height(80)
                })
                
        }

Hi, Everyone. I tried to make a horizontal scroll view by using overflow.
I have a scrollview with a contentView inside. The contentView is set to have direction as .row, justifyContent as .spaceAround and wrap as .noWrap. Then I insert views into the contentView with width equal to the screen width and shrink equal to 0, hoping that the total width of the views I inserted can set the width of the contentView which then set the contentSize of the scrollview. However, it fails and instead I have to explicitly set the scrollView contentSize in order to make to scroll view scrolls. So my question is : Is there a way to make a horizontal scroll view without setting scrollView.contentSize explicitly using flexbox layout.
Thank you 😃

Hi, I was having trouble setting up something like this:

I always seem to have the left text pushing the right text outside of the box (overflow?)
My code was basically this:

flex.addItem().direction(.row).define { flex in
   flex.addItem(text1)
   flex.addItem(text2)
}

I also tried different combinations of positioning, but without much luck. Any advice?

Edit - is there a way to maybe divide the flex box into percentage proportions?
link maybe this

That way, i have multiple sections with different kinds of setup. I am not sure if you already have things that can accomplish this.

Hi again.

I'm trying to update my UITableViewCell with a dynamic number of views after it has been fetched from the database. The layout works fine (I love it) when I run it with fixed content that is available when the cell is initiated.

Basically I retrieve some tasks, and reload the table, calling configure(_ ...) with the data in the cellForRow
Other code omitted for simplicity

fileprivate var tasks: [SomeRandomObject] = []
private func setupFlexContainer() {
        contentView.flex.define { flex in
            // Green Container
            flex.addItem(titleContainer)
                .padding(padding)
                .alignItems(.stretch)
                .backgroundColor(.green)
                .define { flexTitleContainer in
                    flexTitleContainer.addItem(exerciseLabel)
                    flexTitleContainer.addItem(exerciseName).marginTop(8).grow(1).shrink(1)
                }
            // Exercise row
                for task in tasks {
                    flex.addItem()
                        .direction(.row)
                        .padding(padding)
                        .define { nameRow in
                            nameRow.addItem(generateIcon(for: task)).size(30).aspectRatio(1)
                            nameRow.addItem(generateLabel(for: task)).grow(1).marginLeft(16)
                        }
                }

            flex.addItem(acceptButton)
                .backgroundColor(.red)
                .height(50)
                .marginHorizontal(padding)
            
            flex.addItem(descriptionLabel)
                .alignSelf(.center)
                .marginBottom(padding)
                .marginTop(8)
        }
    }

func configure(_ exerciseTasks: [SomeRandomObject]) {
        tasks = exerciseTasks
        contentView.flex.markDirty()
        setNeedsLayout()
 }
    
override func layoutSubviews() {
        super.layoutSubviews()
        layout()
 }
    
fileprivate func layout() {
        contentView.flex.layout(mode: .adjustHeight)
}
    
override func sizeThatFits(_ size: CGSize) -> CGSize {
        contentView.pin.width(size.width)
        layout()
        return contentView.frame.size
}

However, I can't get view to relayout when the tasks has been filled with objects

Any help is appreciated.

Best,

Hi Luc,
I don't know how to use the baseline alignment, they seems like not working as expect:

my code is here:

import UIKit
import FlexLayout

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSubviews()
    }

    fileprivate func setupSubviews() {
        let label1 = UILabel()
        label1.text = "Hello."
        label1.font = UIFont.systemFont(ofSize: 18)
        
        let label2 = UILabel()
        label2.text = ".world."
        label2.font = UIFont.systemFont(ofSize: 12)
        
        let label3 = UILabel()
        label3.text = ".Intro."
        label3.font = UIFont.systemFont(ofSize: 22)
        
        let label4 = UILabel()
        label4.numberOfLines = 0
        label4.text = ".controller"
        label4.font = UIFont.systemFont(ofSize: 30)
        
        view.flex.paddingTop(100).define{ flex in
            flex.addItem().direction(.row).alignItems(.baseline).backgroundColor(.green).define{ flex in
                flex.addItem(label1).backgroundColor(.red)
                flex.addItem(label2).backgroundColor(.yellow)
                flex.addItem(label3).backgroundColor(.magenta)
                flex.addItem(label4).backgroundColor(.cyan)
            }
        }
        
    }    
   
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        view.flex.layout()
    }
}

git clone https://github.com/layoutBox/FlexLayout.git
cd FlexLayout/Example/
pod install

Please add the installation framework with Carthage

I read about YogaKit and your FlexLayout recently and I found that there is rarely a detail example or a guide to use it in normal development. I'm interesting in Yoga and FlexLayout and I consider two questions if I choose to import it in my project:

1. How does YogaKit or FlexLayout calculate cell heights in tableview or collectionview?
2. How to use YogaKit or FlexLayout to do animations?

how to remove an item in flex like removeFromSuperView() - is not an issue, need suggestion

Can not fill application.

ERROR ITMS-90087: "Unsupported Architectures. The executable for Programme.app/Frameworks/FlexLayout.framework/Frameworks/YogaKit.framework contains unsupported architectures '[x86_64, i386]'."

ERROR ITMS-90685: "CFBundleIdentifier Collision. There is more than one bundle with the CFBundleIdentifier value 'com.facebook.YogaKit' under the iOS application 'Programme.app'."

ERROR ITMS-90205: "Invalid Bundle. The bundle at 'Programme.app/Frameworks/FlexLayout.framework' contains disallowed nested bundles."

ERROR ITMS-90206: "Invalid Bundle. The bundle at 'Programme.app/Frameworks/FlexLayout.framework' contains disallowed file 'Frameworks'."

Hi,

First off, wonderful library.

Was wondering if you plan to add support for macOS similar to PinLayout having support for macOS?

Hmmmm....I'm studying this framework, and I don't know how to set the yellow view to the view's center (horizontal & vertical) when it's being position(.absolute) mode, could you please give me some solution? 😉

import UIKit
import FlexLayout

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSubviews()
    }

    fileprivate func setupSubviews() {
        let imageView = UIImageView()
        imageView.backgroundColor = .cyan
        
        let seg = UISegmentedControl(items: ["Intro", "FlexLayout", "PinLayout"])
        
        let label1 = UILabel()
        label1.numberOfLines = 0
        label1.text = "FlexBox Layouting is simple, powerful and fast."
        
        let label2 = UILabel()
        label2.numberOfLines = 0
        label2.text = "FlexLayout syntax is concise and chainable."
        
        let label3 = UILabel()
        label3.numberOfLines = 0
        label3.text = "FlexLayout/yoga is incredibly fast, its even faster than manual layout."
        
        
        view.flex.padding(10).addItem().direction(.row).define { flex in
            flex.addItem(imageView).width(100).height(80)
            flex.addItem().marginLeft(10).shrink(1).define({ flex in
                flex.addItem(seg)
                flex.addItem(label1).marginTop(15)
                flex.addItem(label2).marginTop(15)
            })
        }
        // separator
        view.flex.addItem().marginTop(15).height(1).backgroundColor(.lightGray)
        view.flex.addItem(label3).marginTop(15)
        
        // absolute
        view.flex.addItem().size(100).position(.absolute).alignSelf(.center).top(200).backgroundColor(.yellow)
    }    
   
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        view.flex.layout()
    }
}

Hi,

I get the following error when trying to add FlexLayout to my project using Carthage:

=== BUILD TARGET FlexLayout OF PROJECT FlexLayout WITH CONFIGURATION Release ===

Check dependencies
The file “Pods-FlexLayout.release.xcconfig” couldn’t be opened because there is no such file. (/Path/To/Project/Carthage/Checkouts/FlexLayout/Pods/Target Support Files/Pods-FlexLayout/Pods-FlexLayout.release.xcconfig)
Warning: The Copy Bundle Resources build phase contains this target's Info.plist file 'Sources/SupportingFiles/Info.plist'.

PhaseScriptExecution [CP]\ Check\ Pods\ Manifest.lock /Users/Username/Library/Caches/org.carthage.CarthageKit/DerivedData/9.0_9A235/FlexLayout/1.1.1/Build/Intermediates.noindex/FlexLayout.build/Release-iphoneos/FlexLayout.build/Script-6850E88D30235C33E59B38DA.sh
    cd /Path/To/Project/Carthage/Checkouts/FlexLayout
    /bin/sh -c /Users/Username/Library/Caches/org.carthage.CarthageKit/DerivedData/9.0_9A235/FlexLayout/1.1.1/Build/Intermediates.noindex/FlexLayout.build/Release-iphoneos/FlexLayout.build/Script-6850E88D30235C33E59B38DA.sh
diff: /Podfile.lock: No such file or directory
diff: /Manifest.lock: No such file or directory
error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

** BUILD FAILED **

How to make self sizing UITableViewCell using FlexLayout.

1. Do you support or plan on supporting macOS?
2. What would you tell a dev that is on the fence between FlexLayout and LayoutKit for a bigger project?

Finally I love your work and the performance benchmarks. Thanks for putting creating this, I've already used it on a smaller project and it's fantastic!

Cheers!
Manny

Hi @lucdion. I guess I'm rushing things but if you fix this mistake it would be good in Xcode 10 Beta

Error - Module compiled with Swift 4.1.2 cannot be imported in Swift 4.1.50:

RN needs to pod import yoga file with conflict with the file in FlexLayout, do you have some solutions?

I am trying to build a very simple “post” view as shown above. I have three labels: the name, the timestamp, and the content. I want the content to be able to expand as necessary, but I am getting strange padding on the label when I scroll. Some posts have this padding, some don’t, and when a container cell scrolls out and then back into view, it seems to change.

Has anyone experienced this? Is there a solid example with a resizing label?

My code is:

import UIKit
import FlexLayout

class YogaExampleAView: BaseView {
    fileprivate let rootFlexContainer = UIView()

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init() {
        super.init()
        rootFlexContainer.flex.define { (flex) in
            flex.addItem().width(80).height(40).marginLeft(20).marginTop(10%).backgroundColor(.blue)
            flex.addItem().height(100).width(250).marginLeft(40).marginTop(20).backgroundColor(.green).define { flex in
                flex.addItem().height(20).width(30).marginTop(16%).backgroundColor(.magenta)
            }
        }
        addSubview(rootFlexContainer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        rootFlexContainer.frame = bounds
        rootFlexContainer.flex.layout()
    }
}

the UI looks like :

As you see, I set the blue view's marginTop to 10% (I assume that means 10% height of it's superView), but the blue view's Y is actually 37.5, by a strange coincidence, It's 10% of the superView's width(375).

And then, I verify with magenta view's width and Y:

The magenta view's Y is 40, 16% of the superView's(green) width(250).

Just confuse about that...😳

Hello! I need to make custom view that contains self sized UITextView. I need to change height for textView and "green view" when content for textView bigger than UITextView.contentView can contain. And I need to have a maximum height for textView or "green view". What is the best way to do this?

Code from init method for "green view":

`
attachmentButton = UIButton()
self.attachmentButton.setImage(UIImage.init(named: "ic_attachment"), for: UIControlState.normal)
self.attachmentButton.pin.size(32)

    self.sendButton = UIButton()
    self.sendButton.setImage(UIImage.init(named: "ic_send"), for: UIControlState.normal)
    self.sendButton.pin.size(32)
    
    inputTextView = UITextView()
    inputTextView.delegate = self
    inputTextView.isScrollEnabled = false
    inputTextView.font = UIFont.systemFont(ofSize: 17)
    inputTextView.backgroundColor = UIColor.red
    
    self.flex.direction(.column).paddingTop(10).paddingBottom(10).define { (flex) in
        flex.addItem().direction(.row).define { (flex) in
            flex.addItem(self.attachmentButton).paddingLeft(10).paddingRight(10)
            flex.addItem(self.inputTextView).grow(1)
            flex.addItem(self.sendButton).paddingLeft(10).paddingRight(10)
        }
    }`

Hi @lucdion — first off, I appreciate how well documented and thought-out the library is. Thank you!

I was reading through both codebases (FlexLayout and Yoga’s) and found an interesting pointer regarding the Objective-C runtime “hidden” behind the Swift layer.

UIView+Yoga.h#L29

/**
 In ObjC land, every time you access `view.yoga.*` you are adding another `objc_msgSend`
 to your code. If you plan on making multiple changes to YGLayout, it's more performant
 to use this method, which uses a single objc_msgSend call.
 */
- (void)configureLayoutWithBlock:(YGLayoutConfigurationBlock)block
    NS_SWIFT_NAME(configureLayout(block:));

Given the current implementation of the wonderful chaining-based design, it seems like there is an opportunity to reduce the overhead to a single objc_msgSend call and also inform users of the same cost for view.flex.

Hello. Could not check before. Found an error

/Carthage/Build/iOS/YogaKit.framework/Headers/YGLayout.h:21:13: error: 'yoga/YGEnums.h' file not found #import <yoga/YGEnums.h>

#import <yoga/YGEnums.h> 'yoga/YGEnums.h' file not found

FlexLayout is awesome, I like flexbox, and thanks to Yoga, also thank you for this opensource project, to bring this nice wrapper of Yoga, but I have some concerns about this project

1. Swift is changing, with a lot of break changes every year, do you have any plan or roadmap to switch to the latest Swift version?
2. For a framework's user, it's good if the framework has no bug, but it's impossible, so I want to know will you fully support the user's issues, feature request etc, this is important to me to choose a framework to use in the production environment.

Thank you very much.