CODEWITHSUNDEEP
iosiphoneswiftautolayoutios-autolayout
Erhan Demirci
Erhan Demirci

Reputation: 4209

AutoLayout incorrectly rendering subview's position

I am in the process of learning auto layout and I use snapkit. I written some code but working differently than expected. I write code leftMargin but it is working as if it's a rightMargin. You can see on photo. what is wrong on my code?

enter image description here

My Code 

let container = View()
 container.backgroundColor=UIColor.greenColor()

 let v1 = View()
 v1.backgroundColor=UIColor.blackColor()
self.view.addSubview(container);
        container.addSubview(v1)

let padding2 : UIEdgeInsets = UIEdgeInsetsMake(20,20,20,20)


        container.snp_makeConstraints { (make) -> Void in


            make.top.equalTo(self.view).offset(padding2.top)

            make.bottom.equalTo(self.view).offset(-padding2.bottom)

            // make.left.equalTo(self.view).inset(padding2.left)

            make.left.equalTo(self.view).offset(padding2.left)

            make.right.equalTo(self.view).offset(-padding2.right)

            //make.width.equalTo(self.view.bounds.width-90)

          /*
            make.top.equalTo(self.view).offset(20)
            make.left.equalTo(self.view).offset(20)
            make.bottom.equalTo(self.view).offset(-20)
            make.right.equalTo(self.view).offset(-20)
             */
        }


        let padding : UIEdgeInsets = UIEdgeInsetsMake(50, 50, 15, 10)




        v1.snp_makeConstraints { (make) -> Void in


         make.topMargin.equalTo(container).offset(padding.top);
         make.leftMargin.equalTo(container).offset(padding.left);

            make.width.equalTo(100);
            make.height.equalTo(100);
        }

Upvotes: 0

Views: 241

Answers (2)

sketchyTech
sketchyTech

Reputation: 5906

I've never used snapkit but in regular auto layout you can achieve what you want in the following way.

    let container = UIView()
    container.backgroundColor=UIColor.greenColor()

    let v1 = UIView()
    v1.backgroundColor=UIColor.blackColor()

    self.view.addSubview(container)
    container.addSubview(v1)

    // enable the views to be resized by auto layout
    container.translatesAutoresizingMaskIntoConstraints = false
    v1.translatesAutoresizingMaskIntoConstraints = false

    // pin the container to all edges of the main view
    container.topAnchor.constraintEqualToAnchor(topLayoutGuide.bottomAnchor).active = true
    container.bottomAnchor.constraintEqualToAnchor(bottomLayoutGuide.topAnchor).active = true
    container.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true
    container.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true

    // anchor the v1 subview to the
    v1.topAnchor.constraintEqualToAnchor(container.topAnchor, constant: 20).active = true
    v1.leadingAnchor.constraintEqualToAnchor(container.leadingAnchor, constant: 20).active = true

   // set a fixed height and width
    v1.heightAnchor.constraintEqualToConstant(100).active = true
    v1.widthAnchor.constraintEqualToConstant(100).active = true

and for proportional height and width replace the final two lines of code with:

    v1.widthAnchor.constraintEqualToAnchor(view.widthAnchor, multiplier: 0.25).active = true
    v1.heightAnchor.constraintEqualToAnchor(view.widthAnchor, multiplier: 0.25).active = true

Upvotes: 1

Justlike
Justlike

Reputation: 1504

replace

make.topMargin.equalTo(container).offset(padding.top);
make.leftMargin.equalTo(container).offset(padding.left);

with

make.top.equalTo(container).offset(padding.top);
make.left.equalTo(container).offset(padding.left);

The difference of left and leftMargin? Check this: https://stackoverflow.com/a/28692783/3331750

Upvotes: 1

Related Questions