layoutbox/pinlayout

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

pinlayout's Issues

Multiline UILabel

Hello! Can't find a way of laying out a multiline UILabel properly.

Here is what I have:
The big label is a multiline label and should take all the space left after laying out the small label which has a fixed size.

+--------------------------------------------------------+
+                                                        +
+     +----------------------+                           +
+     + Some text here and   +                           +
+     + it should be a good  +     +---------------+     +
+     + multilne label       +     + another label +     +
+     +----------------------+     +---------------+     +
+--------------------------------------------------------+

Here is what I have tried:

1. Laying out the small label first, then pinning the big one to it - no luck.
2. Laying out the big one based on the distance between big label and its superview - again no luck.

The symptoms are all the same: the big one does get proper width but gets zero height. Or if I

FitSize() really does nothing at all even though the label has non-zero width. I have tried to call sizeToFit() method of UILabel but even so layout gets messed up.

I can't find out what am I doing wrong so please can you help me?

Why does sizeToFit() require either width or height to be specified?

Why does sizeToFit() require either width or height to be specified?
I tried it on a label, here is what I got:

Width/height not specified

nameLabel.pin.top(50).left(40).sizeToFit()
dump(nameLabel.frame)

▿ (40.0, 50.0, 0.0, 0.0)
  ▿ origin: (40.0, 50.0)
    - x: 40.0
    - y: 50.0
  ▿ size: (0.0, 0.0)
    - width: 0.0
    - height: 0.0

Added width to trigger size calculation

nameLabel.pin.top(50).height(40).left(40).sizeToFit()
dump(nameLabel.frame)

▿ (40.0, 50.0, 173.333333333333, 20.3333333333333)
  ▿ origin: (40.0, 50.0)
    - x: 40.0
    - y: 50.0
  ▿ size: (173.333333333333, 20.3333333333333)
    - width: 173.333333333333
    - height: 20.3333333333333

I tried to investigate what I was doing wrong, I found this test:

class AdjustSizeSpec: QuickSpec {
...

it("should adjust the size of aView by calling sizeToFit() method without having specified width and height") {
    aView.pin.sizeToFit()
    expect(aView.frame).to(equal(CGRect(x: 140.0, y: 100.0, width: 100.0, height: 60.0)))
}
...
}

aView.pin.sizeToFit() - this code can be commented out, the test still passes

There a condition in this file: PinLayoutImpl.swift, line 966

if shouldSizeToFit && (newWidth != nil || newHeight != nil) {
// ... calculate size
}

(newWidth != nil || newHeight != nil) - this condition requires either width or height to specified in order to sizeThatFits to be invoked.

I commented out this condition and my code nameLabel.pin.top(50).left(40).sizeToFit() produces the correct size.
I guess, there should be some reason for the condition to be in the code :).
Can it potentially be disabled for certain UIView subtypes like UILabel?

Swift Compiler Warning

Coordinates.swift

(Line 57)

Initialization of immutable value 'rect' was never used; consider replacing with assignment to '_' or removing it

it's minor, but this is the only warning left for my project. haha.

Thanks

License in README doesn't match LICENSE file

You may have it in the correct format already (I'm not an expert :) ) but the license file says "MIT" while the readme says "BSD-3 Clause". Is that correct?

sizeToFit vs. fitSize

First: LOVE this lib. It's so awesome

Quirk I'm running in to after I tried to replace fitSize with the new sizeToFit.

With fitSize, I'm appropriately seeing the label move to the next line:

speciesTitle.pin.after(of: closeButton, aligned: .center).top().width(75%).fitSize().marginLeft(10).marginRight(10)

Result looks like this: https://www.dropbox.com/s/uq3yaowpwd5wmr7/2017-12-05_08-57-57.png?dl=0

When using sizeToFit:

speciesTitle.pin.after(of: closeButton, aligned: .center).top().width(75%).marginLeft(10).marginRight(10).sizeToFit(.heightFlexible)

It will never allow the label to break to the next line. Result is always this: https://www.dropbox.com/s/8zpq0kr9vg82npq/2017-12-05_08-55-27.png?dl=0

I've tried a combo of things like adding min/max height, etc.

Any ideas?

resizing a UILabel

I'm a little confused on how to handle the layout of a UILabel that may contain 1 or 2 lines. I would like to preserve the origin and width, however just extend the height. Basically, I want to use sizeToFit(), but only apply it to the height

Center a view

How can I center an UIView?
This is what I'm doing:

class CenterView: UIView {
    let squareView = UIView()

    init() {
        super.init(frame: .zero)
    
        self.backgroundColor = .lightGray
        self.squareView.backgroundColor = UIColor.gray
        self.addSubview(self.squareView)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
    
        self.squareView.pin.vCenter().hCenter().width(60).height(50)
    }
}

class ViewController: UIViewController {
      override func loadView() {
          self.view = CenterView()
     }
}

And this is what I get:

Wired layout behavior maybe caused by release 1.5.2

If use PinLayout, scrolling tableView will be relayout repeatedly and acts wired. Using frame will be fine. I have an issue demo here: https://github.com/wjling/PinTestDemo1

Since update to 1.5.6，I found many issues in my app except I mentioned above😭, not only transform. I think these layout issues have something to do with 1.5.2 or 1.5.3. Maybe PinLayout changes its mechanism about seting frame or bounds

Animation transform scale not centered

When position using left/right (not center),
when apply transform, the anchor is not centered.

    let button = UIButton()	
    button.backgroundColor = UIColor.black

    addSubview(button)
    button.pin
        .width(90%)
        .height(44)
    
    button.pin
        .marginTop(80)
        .top(10%)
        .left(10%)
                        
    
    button.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)

[Question] Align view between to edges with margin

Suppose we have a view, and I want to vertically align the subview between the bottom and the top + 20 points. What is the best way to do it?

A really bad way would be to create another subview, set the height to 20 pixels and place it at the top of the main view. Then center the other subview between this subview bottom and the amin view bottom, but I'm sure there is a better way

SafeArea Question

Thanks for such a great library guys! I have a quick question to the pin.safeArea lifecycle. I'm replacing my entire view within my viewcontroller but I'm running into some issues with the safe area.

override func loadView() {
        let view = SignupPage1View()
        view.delegate = self
        self.view = view
}

func changeView() {
        let view = SignupPage2View()
        view.delegate = self
        self.view = view
}

The view is being replaced successfully but the safe areas don't match up anymore. The first view successfully sits correctly under the navigation, but the second view appears below instead. I'm wondering do I need to call something to recalculate the safe areas?

Variable row height

It is possible to make an UITableView with variable row height of UITableViewCells using PinLayout?

Center horizontally multi views

Hi, I have a case that I don't know how to do with PinLayout

+--------------------------------------------------------+
+                                                        +
+     +-------+     +------------------+                 +
+     + this  +     + this is a label  +                 +
+     + is an +     + with some text   +                 +
+     + image +     +                  +                 +
+     +-------+     +------------------+                 +
+--------------------------------------------------------+

Expect

+--------------------------------------------------------+
+                                                        +
+           +-------+     +------------------+           +
+           + this  +     + this is a label  +           +
+           + is an +     + with some text   +           +
+           + image +     +                  +           +
+           +-------+     +------------------+           +
+--------------------------------------------------------+

I want to center horizontally both image view and label with its superview. How can I do that?

Can not try in Xcode Playground

I've tried PinLayout in Xcode Playground.
But, It does not work.
You know, PinLayout run layout on deinit themselves.
But, it seems like deinit of PinLayout is different from normal application.

I tried this project.
https://cl.ly/3Q0H1h2e2D2H

iOS 9.3 rewrite `layoutSubviews` cause CPU 100% Usage

Environment: iOS 9.3

When rewrite layoutSubviews

for _ in 0...4 {
            let v = UIView()
            centerView.addSubview(v)
        }

See CPU Usage...

About margin parameter order

Hey, thanks for the awesome framework!
But I'm curious about the paramters order in margin function.

    public func margin(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> PinLayout

    public func margin(_ top: PinLayout.Percent, _ left: PinLayout.Percent, _ bottom: PinLayout.Percent, _ right: PinLayout.Percent) -> PinLayout

Why not use top right bottom left?
And the Readme.md maybe typo...

Set individually top, horizontal margins and bottom margin
margin(_ top: CGFloat, _ right: CGFloat, _ bottom: CGFloat, _ left: CGFloat)
margin(_ top: Percent, _ left: Percent, _ bottom: Percent, _ right: Percent)

'%' is not a postfix unary operator

I cannot get % support in my project that I installed using cocoapods. I get the error

'%' is not a postfix unary operator

when trying to do something like this:

signButton.pin.bottom(60).left(10).right(10).height(50%)

Performance benchmarks

The API is very intuitive and can't wait to try this in our projects. One of the core requirement for us is performance, curious to know if there are any performance benchmarks similar to https://engineering.linkedin.com/blog/2016/06/open-sourcing-layoutkit--a-fast-view-layout-library-for-ios-appl?

Layout group of views

Hi! Could not add the possibility of changing views at once for the whole group, as Stack View.

I'm tired of trying to sort through all possible combinations of methods in the FlexLayout.
The task is simple at first glance:

As a result, I again returned to a clean PinLayout.

It would be great to add views to the main view and write the following code:

cardView.add(bigTitle, blurView)
blurView.contentView.add(price, textView)
textView.add(title, subtitle)

card.pin.stack(axis: .vertical, alignment: .fill, distribution: .equalSpacing) {
  bigTitle.pin.inset(20).sizeToFit(.width, .heightFlexible).maxHeight(50%)
  blurView.stack(axis: .horizontal, alignment: .center, distribution: .equalSpacing, spacing: 4, inset: 20) {
    price.pin.height(28).maxWidth(50%).sizeToFit(.widthFlexible).priority(.highest)
    textView.pin.stack(axis: .vertical, alignment: .fill, distribution: .fillEqually, spacing: 2)
  }
}

Consider adding the offset parameter to Anchor.

For example:

from

view.pin.bottom(10).left(10)

to

view.pin.bottomLeft(10)

I have another question, for example, I have a button that has an image, obviously it has an intrinsic size, but if I only specify its origin when laying out, it won't show because the size is 0. My current approach is to manually call sizeToFit() to set its size when it is initialized, or to hardcode its size during layout. pin.sizeToFit(.xxx) does not correctly set its size. These approach is obviously not elegant enough, I wonder if I can automatically use its intrinsic size like AutoLayout.

Rotate Simulator can not update layout

I use iphone 6 simulator
for example:

myView.pin.left(10).top(20).right(10).height(300)

UILabel not showing

Hello, trying to build a simple proof of concept from the examples code. but I can't seem to be able to make UILabels show up. UIView appears correctly and with correct positioning

   fileprivate let contentView = UIView()
    fileprivate let textLabel = UILabel()
    fileprivate let textLabel2 = UILabel()
    fileprivate let smallRect = UIView()
    
    override init() {
        super.init()
        
        contentView.backgroundColor = UIColor.black
        addSubview(contentView)
        textLabel.text = "Pod Audio Page"
        textLabel.textColor = UIColor.yellow
        textLabel.font = .systemFont(ofSize: 18)
        textLabel.numberOfLines = 0
        textLabel.lineBreakMode = .byWordWrapping
        contentView.addSubview(textLabel)
        textLabel2.textColor = UIColor.blue
        textLabel2.text = "SOME TEXT!"
        addSubview(textLabel2)
        
        smallRect.backgroundColor = UIColor.red
        contentView.addSubview(smallRect)
        
        print("started!")
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let containerInsets = safeArea.minInsets(UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0))
        contentView.pin.all().margin(containerInsets)
        
        smallRect.pin.vCenter(0).hCenter(0).width(50%).height(50)
        textLabel.pin.topCenter().margin(12)
        
    }

Can you spot something that i'm doing wrong here?

Testing on Simulator iPhone 7 iOS 11

Force coordinates to be integers

With some PinLayout methods (for example when you use percents) it is possible to have non integer coordinates, like 201.12345. Would be great to have special method like integer or round to force PinLayout round all coordinates before applying them to frame.

Question regarding reframing views

I don't want to write a long issue again so I am attaching the link to my question.
https://stackoverflow.com/questions/45649499/how-to-rearrange-multiple-view-programmatically

I tried PinLayout today in my case. When I drag view its height is increasing but another view which is pinned below it is in the same position. Can you please suggest how to manage this. I don't want to manage every frame via calculation and long coding. My app can have thousands of different frames, so I need a dynamic solution for this problem.

Thank you.

iOS 8 keyboard bug

When use PinLayout 1.6.0 in iOS 8, the keyboard won't response any event.
UIViewController.viewWillLayoutSubviews swizzleMethod may have bug in iOS8

Aspect ratio

First of all thanks very much for the great work. This is exactly what I was looking for, I’m building a project that involves a lot of animations and I didn’t want to be fighting with auto layout.

I did have a question. What is the best way to handle aspect ratios? Specially for UIImageViews. I’m using percent for a lot of sizing, but this makes it difficult to preserve aspect ratios.

Any suggestions?

Adding StackView destroys layout.

I have the following code in my ViewController class

// MARK: - Properties

let titleView: UIView = {
    let titleView = UIView(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: 70))
    titleView.translatesAutoresizingMaskIntoConstraints = false
    let backgroundColor = UIColor(red: 0x6D/255, green: 0xBC/255, blue: 0x63/255, alpha: 1.0)
    titleView.backgroundColor = backgroundColor
   
    return titleView
}()
let welcomeStackView : UIStackView = {
    let stackView = UIStackView(frame: CGRect(x: 0, y: 100, width: 50, height: 40))
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    
    return stackView
}()


// MARK: Lifecycle

override func viewDidLoad() {
    super.viewDidLoad()
    print("Up and running")
    setupBackgroundView()
}

// MARK: - Setup

private func setupBackgroundView() {
    self.view.backgroundColor = .purple
    
    //Add subviews to main view
    self.view.addSubview(titleView)
    setupTitleView()
    
   //        self.view.addSubview(welcomeStackView)
   //        setupWelcomeView()
}     

}

When I layout just the titleView, everything is fine and it looks like this.

Once I uncomment the line which adds welcomeStackView to the main view, everything seems to break and it looks like this.

Does anyone have any idea why this is happening?

is it support osx?

UIButton: wrong results on .sizeToFit with contentEdgeInsets

Setting 'contentEdgeInsets' for UIButton is not take effect on '.sizeToFit' with any parameters. Please correct this.

How to deal with hidden views

I have the following situation

+ -------------------------------- +
+                                  +
+                      +---+ +---+ +
+                      + A + + B + +
+                      +---+ +---+ +
+                                  +
+                                  +
+                                  +
+ -------------------------------- +

Subview A is pinned to the left of subview B However B can be hidden, in that case I would like to pin A to the right edge of its superview. I’m aware of the visibles Filter method, but I did think it helps me in this situation unless I make a third view that is never hidden pinned to the right.

What is the best way to deal with this situation?

When using SPM PinLayoutImpl.swift generates 52 Errors

This happens because in the file we are missing

import UIKit

after

#if os(iOS) || os(tvOS)

Align horizontally, equal width

Hi, thanks for the very handy lib!

I'd like to know if it possible to perform layout like this w/o using empty spacer-view.
I want buttons fill remaining space and be equal width.

H: |-(8)-[lb(==w)]-(8)-[rb(==w)]-(8)-|

I've tried different ways like:

leftButton.pin.below(of: some, aligned: .left).height(36).marginTop(8)

rightButton.pin.after(of: leftButton, aligned: .center).right(view.pin.safeArea).height(36).marginLeft(8).marginRight(8)

But didn't success :(

With spacer view I'm fine with the following:

spacer.pin.below(of: someViewAbove).hCenter().width(8).height(36).margin(8)
leftButton.pin.before(of: spacer, aligned: .center).left(view.pin.safeArea).height(of: spacer)
rightButton.pin.after(of: spacer, aligned: .center).right(view.pin.safeArea).height(of: spacer)

Question: How to constrain multiple view to the height of another view?

I am trying to get the 3 labels (could be up to 4), to fit inside the height of the the profile image. I ws lost on how to do it until i read an issue that spoke about FlexLayout.

Just wondering, is FlexLayout the replacement for UIStackViews?
I'm a little confused on if i should be using FlexLayout or Pinlayout.

Can Aspect Ratio be used with AVPlayer video player?

Looking into how can I resize the view of the AVPlayerViewController to detect and resize based on video aspect ratio and my own constraints (height no larger than 50% of view or horizontal align)

So the question is can aspectRatio propety be used with video player or only images?

And if not how can I change dynamically the height constraints after I detect each video width/height?

Thanks in advance!

Print line and file of conflict

Hello,

it's difficulty to debug layout issues, if PinLayout is not printing the name of the view or the line of code. Could you add this feature? Thank you

Widget support - 'shared' is unavailable

Hello,
I have the following error while using PinLayout in iOS widget.

../Pods/PinLayout/Sources/UIView+LTR.swift:21:38: 'shared' is unavailable: Use view controller based solutions where appropriate instead.

Better Error Message?

The forgot add subview message is

👉 PinLayout Warning: right(8.0) won't be applied, the view must be added as a sub-view before being layouted using this method.

And the view is hard to discover which view.
Is that add view information to the error message?
Code like this

extension PinLayoutImpl {
    internal func layoutSuperview(_ context: Context) -> UIView? {
        if let superview = view.superview {
            return superview
        } else {
            warn("the view \(viewDescription(view)) must be added as a sub-view before being layouted using this method.", context)
            return nil
        }
    }

    internal func referenceSuperview(_ referenceView: UIView, _ context: Context) -> UIView? {
        if let superview = referenceView.superview {
            return superview
        } else {
            warn("the reference view \(viewDescription(referenceView)) is invalid. UIViews must be added as a sub-view before being used as a reference.", context)
            return nil
        }
    }
}

Then debug message is

👉 PinLayout Warning: right(8.0) won't be applied, the view "<Clazz.ChatTopView: 0x7faa55552b60; frame = (8 72; 0 40); clipsToBounds = YES; layer = <CALayer: 0x60800022d1c0>>" must be added as a sub-view before being layouted using this method.

Is this better ?

Animation example?

Hi! I'm looking forward to switch in code layout to PinLayout, but I have a concern about animations. So do you have some animation example in PinLayout? Like, how to reset pin rules after a tap and animate them?

Is RTL supported in PinLayout

Hi guys, I tried to force Right to left from UIView, but views layouted by PinLayout still in Left To Right

Decreasing resizing not animated

Hi.
When I'm animating view size change, the animation is executed only when view is increasing in size, but when the view is decreased in size, animation is not executed and view is resized right away.

Example:
Lets have a view:
view.pin.width(50).height(50).left().top()
Lets increase view size:
UIView.animate(withDuration: 0.16) { view.pin.width(100).height(100) } .. OK, view was resized with animation
Lets decrease view size:
UIView.animate(withDuration: 0.16) { view.pin.width(30).height(30) } .. NOT OK, no animation happens here, view is just resized to 30x30.

Is this a bug? Or do I need to do something more to get decreasing animation?

SafeArea within UITabBarController

Thanks for such a great library! I have been using it for a while in my project. I have a question about the SafeArea.

When we build the interface, we usually don't overwrite the loadview method. If we move the code inside the SafeAreaView to SafeAreaViewController in the Example project, the SafeArea will be invalid and the layout will not meet expectations.

This is also the problem that I am facing now. My project is a Tabbed app like the Clock app of iOS, and most of the view controllers are managed by UITabBarController. I have a problem with SafeArea when laying out the views.

I want to build the interface directly in the view controller instead of creating a separate view for each view controller, and then overriding its loadview method, which is obviously a bit cumbersome. I tried to solve it but did not find a good solution.

So I would like to ask any suggestions? Is overriding loadview the only solution?

PinLayoutSafeAreaDemo.zip

Constrain Subviews Within View

Is it possible to constrain a subview that is added to your view? For example, I add a subview called container to my UITableViewCell and then I add two UILabels to that container. Can I then constrain those two UILabels within the container as well?

Thanks

safeAreaLayoutGuide Support

Is there an easy way to say, that the view has to be aligned to safeAreaLayoutGuide top or bottom? Couldn't find safeAreaLayoutGuide in project

Make view public in PinLayout<View: Layoutable> class

This is particularly useful when some clients may need to provide a custom implementation for some cases and need access to the view object when extending.

Support for Apple TV

Would be nice to get this also for Apple TV.

About contentOffset of UITableView

A small problem. I have a let myTableView: UITableView in a UIViewController. I layout the tableView in viewWillLayoutSubviews() with code self.myTableView.pin.top().left().right().bottom().marginTop(self.headBarsHeight + 44).marginBottom(self.bottomBarHeight). The controller is a childController of a tabBarController. I set myTableView.contentInset.top = 15 and reload the tableView after I init the viewController and tableView.contentOffset.y == -15. When I switch tab to the controller and viewWillLayoutSubviews() is called, then I found myTableView.contentOffset.y became 0(I don't want this, I want to keep its offset). If I set myTableView.frame instead of using PinLayout, its contentOffset remains -15.

Crash in iOS 10.2.1

Why you do recursion here? I mean calling method pinlayout_swizzled_viewWillLayoutSubviews()? We have crash in iOS 10.2.1 on this line.

extension UIViewController {
    @objc fileprivate func pinlayout_swizzled_viewWillLayoutSubviews() {
        if #available(iOS 11.0, tvOS 11.0, *) { assertionFailure() }

        self.pinlayout_swizzled_viewWillLayoutSubviews()
        let safeAreaInsets = UIEdgeInsets(top: topLayoutGuide.length, left: 0, bottom: bottomLayoutGuide.length, right: 0)

        // Set children safeArea up to 3 level, to limit the performance issue of computing this compatibilitySafeAreaInsets
        PinSafeArea.setViewSafeAreaInsets(view: view, insets: safeAreaInsets, recursiveLevel: 3)
    }
}

Here is message from NewRelic:

2018-04-10 19:25:11.620647 App[13193:5553488] NewRelic(6.2.0,0x174076780):    NRMAMethodProfiler.m:982    NRMA__beginMethod
    Unable to find instrumented method. It’s possible another framework has renamed the selector. Throwing Exception...
2018-04-10 19:25:11.622194 App[13193:5553488] *** Terminating app due to uncaught exception ‘NRInvalidArgumentException’, reason: ’New Relic detected an unrecognized selector, ‘pinlayout_swizzled_viewWillLayoutSubviews’, sent to ‘UIViewController’. It’s possible _cmd was renamed by an unsafe method_exchangeImplementations().'
*** First throw call stack:
(0x18e6151b8 0x18d04c55c 0x100937c10 0x100937968 0x100937554 0x101fa91f4 0x101fa937c 0x1944c0948 0x19196e9d8 0x1919634cc 0x19196338c 0x1918e03e0 0x191907a68 0x191908488 0x18e5c20c0 0x18e5bfcf0 0x18e4ee2d8 0x19452e7b0 0x194529534 0x1001f4360 0x18d4d15b8)
libc++abi.dylib: terminating with uncaught exception of type NSException

Use anchor then could not use margins

Hello. I have a question that if I have a button and pin its center to topRight of view1, but I wish to have a top margin and it seems not work. Code is below:

button.pin.center(to: view1.anchor.topRight).marginTop(10)

The top margin won't apply. Maybe there is another way?

AL Anchors Integration

Hi!
First of all, great project!

I was wondering if there is a way to integrate PinLayout with some of the UIView's property like topAnchor or the upcoming safeAreaLayoutGuide. Juts having a way to get the x,y of that anchors should be good enough

Any idea?
Thanks!

Swift Style

Hi!

Don't you think its better to write

.margin(left: 10)

instead of

.marginLeft(10)

?