layoutbox / flexlayout Goto Github PK
View Code? Open in Web Editor NEWFlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.
License: MIT License
FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.
License: MIT License
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 @lucdion. Gives an error in Xcode 9.1
RN needs to pod import yoga file with conflict with the file in FlexLayout, do you have some solutions?
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.
/**
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
.
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:
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:
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 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?
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!
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.
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.
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)
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 @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 ?
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?
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()
}
}
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.
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.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 😅.
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!
//
// 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 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 think this should be wrong.
How to make self sizing UITableViewCell using FlexLayout.
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)
}
}`
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
textView.flex.direction(.column).padding(UI.Cards.inset).justifyContent(.center).define { flex in
flex.addItem(section)
flex.addItem().direction(.rowReverse).position(.absolute).left(UI.Cards.inset).bottom(UI.Cards.inset).right(UI.Cards.inset).justifyContent(.spaceBetween).define { flex in
flex.addItem(button).height(28).maxWidth(50%).grow(1).position(.absolute).right(0).bottom(0)
flex.addItem().direction(.column).define {
flex.addItem(title).shrink(1)
flex.addItem(subtitle).shrink(1)
}
}
}
How to recalculate the entire container if one object is hidden and the container is compressed ?
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
Please add the installation framework with Carthage
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()
}
}
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 **
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:
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
Thank you very much.
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()
}
}
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?
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...😳
Hi,
First off, wonderful library.
Was wondering if you plan to add support for macOS similar to PinLayout having support for macOS?
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, 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.
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)
})
}
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
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
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.
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.
I have a view
with a containerView
. There are two UILabel
s 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)
}
how to remove an item in flex like removeFromSuperView() - is not an issue, need suggestion
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 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:
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.
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.
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 😃
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.