Hi,

Please provide the clarification on these questions.

1. Using Stevia We don't need starboard or xib at all ?.(I thought it is only for layout the views,still we need storyboard and xib files with view controllers)
2. Does the app run through command line.

• Grey Area is a Background Image. I am thinking to use UIImageView.
• Circles are the Users Images: UIImageView and is limited to four user images only.

I am currently updating our software from XCode 7/Swift 2.x => XCode 8/Swift 3.

While trying to upgrade our SteviaLayout integration I've updated to 3.0.1. However, I'm currently receiving the following error on the SteviaLayout import statement:

Module file was created by an older version of the compiler; rebuilt 'SteviaLayout' and try again: /Users/<me>/.../SteviaLayout/SteviaLayout.framework/Modules/SteviaLayout.swiftmodule/x86_64.swiftmodule

I've tried rm -rf ~/Library/Developer/Xcode/DerivedData/ and then rebuilding to no avail as has been suggested in a few SO inquiries.

Would appreciate any and all help.

If it helps I've added some code snippet

import UIKit

import SteviaLayout //=== Getting error here!! 

//===

class myView: UIView
{
    let imageView = UIImageView()
    let headerLabel = UILabel()
    let bodyLabel = UILabel()
    let chatButton = UIButton(type: .system)

    //===

    required
    convenience
    init()
    {
        self.init(frame: CGRect.zero)

        //===

        sv(

            imageView
                .style(imageViewStyle),

            headerLabel
                .style(headerLabelStyle),

            bodyLabel
                .style(bodyLabelStyle),

            chatButton
                .style(chatButtonStyle)
                .onTap(self, handler: #selector(self.chatHandler))
        )
    }
}

Please advise.

How does one set priorities on constraints?

Can you support replacing constraints? such as Cartography

let group = ConstraintGroup()

// Attach `view` to the top left corner of its superview
constrain(view, replace: group) { view in
    view.top  == view.superview!.top
    view.left == view.superview!.left
}

/* Later */

// Move the view to the bottom right corner of its superview
constrain(view, replace: group) { view in
    view.bottom == view.superview!.bottom
    view.right  == view.superview!.right
}

UIView.animateWithDuration(0.5, animations: view.layoutIfNeeded)

How do you center a view using Stevia?

Carthage uses Swift 3.0 prebuilt framework, which cause the problem of not able to be imported under Swift 3.0.1 environment (xcode8.1).
Suggest we to have prebuilt framework using Swift3.0.1.

Like this.

Thanks for creating such nice too!

But after searching for APIs, I am confused how to layout multiple views equally spaced in horizontal.

|-firstButton-""-secondButton-""-thirdButton-""-fourthButton-| ~ BUTTON_HEIGHT

I want to make buttons with the same width and equally spaced,
how should I write the format?

also, if I add a "" in between Buttons, Xcode shows compile error as:
"Expression was too complex to be resolved in reasonable time; ....

Hope some one could help me!
Thanks!

Is there any reason why heightEqualsWidth is not chainable? It would certainly make is simpler to have a layout like the one I'm currently working on:
|-10-label-20-imageButton.heightEqualsWidth()-10-|

At the moment I just add that constraint after the layout(...) call. It would be very simple to have heightEqualsWidth return a reference to the view and the above approach would just work.

By the way, thanks for the great library! It has streamlined my code quite a bit. 💯

@s4cha This is going worse day by day.
It's related to a #50

         layout(
            10,
            |-countryPhoneCodePicker-| ~ 300,
            10,
            |-phone-| ~ 80
        )

View:

This is prefect. But when I make it an Array.

        layout([
            10,
            |-countryPhoneCodePicker-| ~ 300,
            10,
            |-phone-| ~ 80
        ])

View:

subview would be added to cell's view or contentView?

Hi,

I try to combine Stevia with Material Design, i just edit Stevia example end join with Material, but i can't modify style UITextField to TextField Material, how to config Material and Stevia?

How can I layout two buttons, one aligned to left, the other to the right, I tried '|-button1-button2-|' but it doesn't work...

Hello!
I would like to make two or three text fields occupy the same amount of space horizontally:
how do I do?
like in
layout(
|-textfield1-textfield2-|
)
or
layout(
|-textfield1-textfield2-textfield3-|
)

After using Stevia for a few weeks, I can't find a decent solution to layout 3 views that fill a container view (think of the French, or Italian flag), where the 2 outside views are of fixed width, the middle view is of dynamic width and all the tops and bottoms as well as the outside edges are aligned to the superView edges.

After doing this:

    self.view.sv(
        attachButton.text("Attch").style(bStyle),
        sendButton.text("Send").style(bStyle),
        someView
    )

Regular autolayout works perfectly:

    let vDic:[String:AnyObject] = [
        "attach" : attachButton, "inputV" : someView, "send" : sendButton
    ]

    self.view.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat("|[attach(80)]-0-[inputV]-0-[send(80)]|",
            options: [], metrics: nil, views: vDic)
        + NSLayoutConstraint.constraintsWithVisualFormat("V:|[attach]|",
            options: [], metrics: nil, views: vDic)
        + NSLayoutConstraint.constraintsWithVisualFormat("V:|[inputV]|",
            options: [], metrics: nil, views: vDic)
        + NSLayoutConstraint.constraintsWithVisualFormat("V:|[send]|",
            options: [], metrics: nil, views: vDic)
    )

But the only way I can get the layout to work with Stevia syntax is to use the chainable api and not worry about the extra Y constraints that are generated by code like this:

    attachButton.top(0).bottom(0).left(0).width(80)
    someView.top(0).bottom(0)
    sendButton.top(0).bottom(0).right(0).width(80)
    alignHorizontally(attachButton-0-someView-0-sendButton)

The following doesn't work at all (only the first button is aligned to top and bottom and there are extra constraints as well):

    self.view.layout(
        0,
        |attachButton.width(80)-0-someView-0-sendButton.width(80)|,
        0
    )

And the following produces layout conflicts and extra constaints:

    attachButton.top(0).bottom(0).left(0).width(80)
    someView.top(0).bottom(0)
    sendButton.top(0).bottom(0).right(0).width(80)
    self.view.layout(attachButton-0-someView-0-sendButton)

Hi @s4cha , i have a litle issue,

i'm trying to add button in UItableView, and this my code :
in normally :

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = CustomCell(style: .Default, reuseIdentifier: "Cell")
        cell.button.frame = CGRectMake(20, 20, 100, 50)
        cell.button.titleLabel!.text = data[indexPath.row]
        cell.button.addTarget(self, action: "buttonAction:", forControlEvents: .TouchUpInside)
        return cell
 }

// Button Action
func buttonAction(button: UIButton) {
     print("Button tag : \(button.tag)")
}

so i'm use :

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = CustomCell(style: .Default, reuseIdentifier: "Cell")
        cell.button.frame = CGRectMake(20, 20, 100, 50)
        cell.button.titleLabel!.text = data[indexPath.row]
        cell.button.tap(buttonAction)
        return cell
 }

// Button Action
func buttonAction() {
     print("Button Action")
}

my question : how to get button.tag with button.tap(buttonAction) ?

Thanks :D

I was keeping a array of views and creating layout by iterating and adding to a any object array,

        let scrollContentView = UIView() 
        scrollView.sv(scrollContentView)

        scrollContentView.fillV()
        equalWidths(scrollContentView, scrollView)

        scrollContentView.sv( views )


        var layout :[AnyObject] = [ CGFloat(10) ] // First Offset from margin

        for view in views {

            let height: CGFloat = 100

            let viewLayout :[AnyObject] = [
                |-5-vc.view-5-| ~ height, 
                10 // Offset to next view
            ]

            layout.appendContentsOf(viewLayout)

            view.layer.cornerRadius = 4
            view.clipsToBounds = true
            view.layer.borderWidth = 1/UIScreen.mainScreen().scale
            view.layer.borderColor = UIColor.lightGrayColor().CGColor

            let shadowPath = UIBezierPath(roundedRect: view.bounds, cornerRadius: 4)
            view.layer.shadowRadius = 1.0
            view.layer.shadowColor = UIColor.blackColor().CGColor
            view.layer.shadowOffset = CGSize(width: 0, height: 0)
            view.layer.shadowOpacity = 0.2
            view.layer.shadowPath = shadowPath.CGPath
        }

        scrollContentView.layout(layout)

If the array is empty it crashes, because if layout is given a float alone, it thinks it is bottom margin,

And access the previous view

          case let m as CGFloat:
            previousMargin = m // Store margin for next pass

            if i == (objects.count - 1) { 
                //Last Margin, Bottom
                if let previousView = objects[i-1] as? UIView { // Crashes here
                    previousView.bottom(m)
                } else if let va = objects[i-1] as? [UIView] {
                    va.first!.bottom(m)
                }
            }

Is this the behaviour by default, or can I submit a PR with simple check of i != 0 ?

Hey thank you s4cha for your library. I like the way it layouts everything.
I tried to use the pattern you're using for creating views.

But I'm wondering how I get the views from outside the Controller. When I want to make some operations which are triggered in override functions like viewWillDissapear I can't call them from inside the controller which implements the view inside the "override loadView()" function.

ViewController-Class

class MapViewController: UIViewController {

    let locationManager = CLLocationManager()

    override func loadView() {
        view = MapView()
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // self.clusteringManager.delegate = self

        // self.viewModel = MapViewModel(mapView: self.view, clusteringManager: self.clusteringManager)
        // self.viewModel.getAllAnnotations()

        // Initial setup of map
        // initialSetup()
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
    }

    override func viewWillDisappear(animated: Bool) {
        super.viewWillDisappear(animated)
    }

    private func initialSetup() {

        // Init Location Manager
        // initLocationManager()

        // Init Layout
        // initLayout()

        // Set camera to user location
        if let userLocation: CLLocationCoordinate2D = locationManager.location?.coordinate {
            self.mapView.setCenterCoordinate(userLocation, zoomLevel: 10.0, animated: true)
        }
    }
}

View-Class

class MapView: UIView {
    let mapView = MKMapView()

    convenience init() {
        self.init(frame: CGRectZero)

        backgroundColor = .redColor()

        sv(
            // Do stuff
        )
    }

}

Now I need the mapView of the View-Class. But I have no idea how to get it from the ViewController.

1、Double dash don't support flexible margins
2、Stevia+Fill.swift

private func fillH(m points: CGFloat = 0) -> UIView {
        return fill(.Horizontal, points: points)
    }

Why "fillH()" function is private?
Thank you for your attention.

Hi, thanks for your effort on making this wonderful pod. As part of learning to use this library, I started by taking a simple example of making a view align center to its superview. But unfortunately its not working. I would like to get some assistance to fix the issue.

`class LoginView: UIView {

let centerView = UIView()

convenience init() {
    self.init(frame:CGRect.zero)
    backgroundColor = AppColors.turboYellow

    centerView.backgroundColor = AppColors.mantisGreen
    centerView.height = 150.0
    centerView.width = 310.0
    centerView.centerInContainer()
    sv(
        centerView
    )
}

}`

Instead of centerView.centerInContainer(), I tried

centerView.centerVertically() centerView.centerHorizontally()

and that didn't work either.

Can you provide autolayouting code for this.

View hierarchy will be like this. Each icons has fixed width.

UIView
-- usernameCont
---- icon.width(40) - username - icon.width(40)
-- passwordCont
---- icon.width(40) - password - icon.width(40)
-- remember me
-- login button

This is a great layout system!

Horizontal layout inside vertical layout looks super simple! like
|-a-b-|, |-c-|
Is there a simple way to make v inside h, too?
(|-a-(b, c)-| // maybe?

Hello,
when I enter this layout:

  layout([50,  
            prontoLogo.centerHorizontally(),  
            50,  
            |-20-whyMailLabel-20-|,  
            |-20-emailTextfield-20-|,  
            10,  
            |-50-confirmButton-50-|])

Xcode fails to compile with the following message:
"Expression was to complex to be solved in reasonable time; consider breaking up the expression into distinct sub-expression"

Any clue?

The problem (and solution) is described here http://www.klundberg.com/blog/capturing-objects-weakly-in-instance-method-references-in-swift/

The below code doesn't work.

        layout([
            100,
            |-15-email-15-| ~ 80,
            8,
            |-15-password-15-| ~ 80,
            "",
            |login| ~ 80,
            0
        ])

But, the below code works.

        layout([
            100,
            |-15-email.right(15)| ~ 80,
            8,
            |-15-password-15-| ~ 80,
            "",
            |login| ~ 80,
            0
        ])

and

        layout([
            100,
            |-15-email-15-| ~ 80,
            8,
            |-15-password.right(15)| ~ 80,
            "",
            |login| ~ 80,
            0
        ])

Any ideas on how hard it is to make Stevia support macOS apps and tvOS? This is the best tool for defining auto layout, but I would like to use the same tool for all Apple platforms.

Hi constraint change can be made with animation?

Pod update fails with 2.3.0

Analyzing dependencies
[!] Unable to satisfy the following requirements:

• SteviaLayout (= 2.3.0) required by Podfile

I can't work with InjectionForXcode, can you provide an example viewController implementation @s4cha

Thanks.

Xcode 7.3 beta 5 spits out the following when compiling Stevia:

./Carthage/Checkouts/Stevia/Stevia/Stevia/Stevia/Source/Stevia+Tap.swift:37:33: warning: use of string literal for Objective-C selectors is deprecated; use '#selector' instead

if i have

button
|
View
|
button

how do I make View take all remaining vertical space?

After Layout, how to change the value of one NSLayoutConstraint constant。
Your code is greater and conciser. I like it.
But if I make a animation ,How to change the value of one layoutConstraint?

I want to insert juedge code here, it`s OK?

public func constraint(item view1: AnyObject,
    attribute attr1: NSLayoutAttribute,
    relatedBy: NSLayoutRelation = .Equal,
    toItem view2: AnyObject? = nil,
    attribute attr2: NSLayoutAttribute? = nil, // Not an attribute??
    multiplier: CGFloat = 1,
    constant: CGFloat = 0) -> NSLayoutConstraint {
    let constraint = New NSLayoutConstraint
    if old constraint is exist {
        remove old constraint
    }
    add constraint.
}

How does one set a flexible height constraint:

Instead of a fixed height as in:
|-myView-| ~20
I tried |-myView-| ~(>=20)
did not work.

Hi, have just started using your library and am impressed overall!

I did run into one issue fairly early on which I have been as of yet unable to resolve. Even with a very simple horizontal layout I am getting strange results:

let emailInputHolder = UIView()
let emailInput = UITextField()
let emailAddButton = UIButton()

... in render:

emailInput.centerVerticallyInContainer()
emailInput.layer.borderColor = UIColor.lightGrayColor().CGColor
emailInput.layer.borderWidth = 1.0
emailInput.height(30)
emailAddButton.width(75).height(30)

... in layout:

emailInputHolder.layout([
5,
|-emailInput-10-emailAddButton-|,
5
])

Actually the widths seem to get represented as I wanted, BUT the whole thing is pushed all the way to the top of the view and doesn't fit into its intended vertical location at all.

If I change the layout to |-emailInput-| or |-emailAddButton-| only (for example), they are in the right place vertically but clearly not side by side. It is a little hard to tell from the documentation whether it is required to use alignHorizontally(...) in addition to the layout spec above, but I've tried every iteration I can think of.

Any assistance would be much appreciated. Can provide more code if helpful...

Please give, an example. Samples provided in Readme are all about plain hierarchy. In particular, how do I layout views nested in a scroll view (when you implement a login screen, you typically put controls inside a scroll view to avoid keyboard overlapping with your controls). I tried few scenarios, but nested views are always positioned incorrectly (off screen).

Please, help!

var array:[Any] = [0]
for i in 1...10 {
    let view = UIView()
    array.append(view)
}
array.append(0)
layout(array)

array is inferred as Any rather than [Any] that causes layout error.

Hello,
Thank you for your work, this library made me want to code my views (instead of using IB).

I have a question though, how would you create a layout where you would have an image which fill the whole background and still render views on front of it.

I really like the feeling that every views in the screen are in one unique place (layout()) but I'm afraid that it's not possible in this case.

Thank you,

Vincent

I have a row, with layout like:

|-password.width(100)-label-label2-| ~ 80,

label & label2 are UILabel with long text.

The result is
label shrunk to a width that can't display the full text.
but label2 can display full text.

I wan't the contrary: label2 got shrunk, and label show the full text

what should I do?

here attached the result

layout(
      0,
      |view1.size(100)-4-view2.size(40)
)

view1: height = 100
view2: height = 40

I want to align view2.bottom to view1.bottom, how?

"|-10-label-(>=8)-|" not supported
and

layout(
    10,
    label1,
    >=8
    label2,
    10
)

not supported

A very small issue for any one manually importing the swift files is the lack of an "import UIKit" statement in each file.

im having problems installing with pod. it installs and adds your files to my project, but then it doesn't recognize sv() and layout() inside my classes. could you help? thanks

Any plans to provide a swift 3.0 release soon?

does it set width and height? my tests tell me it only does set width

Forgive me if I'm using all the wrong terms here. I'm still quite new at this. Stevia's example project separates the View from the ViewController, and all subviews are layed out in the render() function in order for it to work nicely with the code injection plugin. As someone trying to move away from storyboards though, the issue I'm running into now is how to make a circular UIButton.

Normally I would do this with an IB or by setting the runtime attributes directly in the interface builder:

someButton.layer.cornerRadius = someButton.frame.height / 2.0
someButton.clipsToBounds = true

Trying to do this in code/Stevia though, by the time render() is called, the button's frame = 0.0, so setting a cornerRadius does nothing and the button is still square. How would you approach this? One thing I've found is to explicitly set the frame size with the UIButton(frame: CGRect) initializer, but something about setting the frame and then later in render() setting its height and width attributes to the same dimensions just doesn't sit well with me...

I have started with this fantastic library, but have one little problem:
I have a TableViewCell in which i like to have on the left side a date and on the right side a city.
It works on the first two rows, but after that on the third and fourth it will not display correctly.

It seems that i make some mistake but did not find a solution :(