I have a parent, called infoView. It has two children: subLabel and tinyImageView. I'd like both of these children to be size 30.0, with subLabel first, followed by 10 pixel padding, followed by the tinyImageView.
For some reason, my tinyImageView is not respecting ANY of the constraints I put below. Even the height/width is not respected.
let boxSize = infoView.frame.size.height //30
let subLabel = UILabel()
subLabel.frame = CGRectMake(0, 0, boxSize, boxSize)
subLabel.layer.cornerRadius = 5.0
subLabel.clipsToBounds = true
subLabel.backgroundColor = logoColor(1)
subLabel.text = String(post.subscribers)
subLabel.font = UIFont(name: "Lato-Bold", size: 13.0)
subLabel.textColor = UIColor.whiteColor()
subLabel.textAlignment = .Center
infoView.addSubview(subLabel)
//Image
let tinyImageView = UIImageView(image:UIImage(named: "MO.jpg"))
tinyImageView.layer.cornerRadius = 2.5
tinyImageView.clipsToBounds = true
infoView.addSubview(tinyImageView)
let widthConstraint = NSLayoutConstraint(item: tinyImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: boxSize)
tinyImageView.addConstraint(widthConstraint)
let heightConstraint = NSLayoutConstraint(item: tinyImageView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: boxSize)
tinyImageView.addConstraint(heightConstraint)
print("------------")
let horizontalConstraint = NSLayoutConstraint(item: subLabel, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: tinyImageView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 10)
infoView.addConstraint(horizontalConstraint)
let verticalConstraint = NSLayoutConstraint(item: subLabel, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: tinyImageView, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
verticalConstraint.active = true
The image turns out way too big, and the horizontal/vertical constraints don't work at all. Currently, the image overlaps subLabel, as if it was just added without any constraints.
As #Paulw11 stated in the comments, you need to set translatesAutoResizingMaskIntoConstraints to false for programmatically created views. Also, your constraints will resize the frame for your UIImageView, but they won't scale the image. For that, you need to set the contentMode property:
tinyImageView.translatesAutoResizingMaskIntoConstraints = false
tinyImageView.contentMode = .ScaleToFill
Values you probably want to consider for contentMode are .ScaleToFill (scale to fit area distorting aspect ratio if necessary), .ScaleAspectFit (maintain aspect ratio and leave part of the view as transparent if necessary) and .ScaleAspectFill (maintain aspect ratio and clip part of image if necessary).
From your code, I just saw one activation for constraint verticalConstraint.
active all the constraints you add.
if your constraints got conflicted,
Set translatesAutoResizingMaskIntoConstraints to false(usually if you set constraints programmatically, you set it to false)
Related
I have an UITableView with custom cells. The structure of every cell is like that: I have contentView, in this contentView I have backView (simple UIView with white background and cornered radius 16.0), in this backView I have an imageView with some picture.
What I want is to have this imageView cornered (within his parent UIView — backView — borders). And it doesn't work this way.
The code is quite simple (from ImageCell.swift):
self.backView = UIView()
self.backView.backgroundColor = UIColor.white
self.backView.translatesAutoresizingMaskIntoConstraints = false
self.backView.layer.cornerRadius = 16.0
self.contentView.addSubview(backView)
self.picture = UIImageView()
self.picture.translatesAutoresizingMaskIntoConstraints = false
self.picture.contentMode = UIViewContentMode.scaleAspectFill
self.picture.backgroundColor = UIColor.gray
self.picture.clipsToBounds = true
self.backView.addSubview(picture)
let constraintPicTop = NSLayoutConstraint(item: picture, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .topMargin, multiplier: 1.0, constant: -6)
let constraintPicLeft = NSLayoutConstraint(item: picture, attribute: .left, relatedBy: .equal, toItem: backView, attribute: .leftMargin, multiplier: 1.0, constant: -8)
let constraintPicRight = NSLayoutConstraint(item: picture, attribute: .right, relatedBy: .equal, toItem: backView, attribute: .rightMargin, multiplier: 1.0, constant: 8)
constraintBottomPic = NSLayoutConstraint(item: picture, attribute: .bottom, relatedBy: .lessThanOrEqual, toItem: contentView, attribute: .topMargin, multiplier: 1.0, constant: 150)
I don't know the size of the image beforehand, so constraintBottomPic value is updating in cellForRowAt function.
And it's working except this image is not cornered (and I believe it should be).
(It's not possible for me to set cornerRadius for UIImageView unfortunately).
update: Found the solution. It seems I had to set 'clipsToBounds' to true in all the parent views directly (contentView and backView, in my case).
You should set the clipsToBounds property of the higher level container view (like the contentView of your cell.)
Apply imageView.layer.maskToBounds = YES;
Apply this to view or imageview on which you want to set corner radius.
As you have mentioned corner radius to your view you need to set this for your view
I have added a UIView to a table cell through my storyboard with the following constraints:
Then I have the following code to programmatically add a UIImageView to the UIView above and size it according to the orientation of the screen.
//Use half the screen size width when on an iPhone and on Landscape
let image: UIImage = UIImage(named: HEADER_IMAGE_BATH)!
imageView = UIImageView(image: image)
imageView!.frame = CGRectMake(0 , 0, self.view.frame.width / 2, 185)
imageView!.contentMode = .ScaleAspectFit
//center image
let centerXConst = NSLayoutConstraint(item: imageView!, attribute: .CenterX, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterX, multiplier: 1, constant: 1)
let centerYConst = NSLayoutConstraint(item: imageView!, attribute: .CenterY, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterY, multiplier: 1, constant: 1)
NSLayoutConstraint.activateConstraints([centerXConst, centerYConst])
//add to sub view
imageWrapperView.addSubview(imageView!)
However, my image does not get centered when in landscape. My image is only half the width of the screen and I would like to center it inside my UIView. What am I missing? Thanks
You should use Auto Layout instead of frame for width and height of imageView
You have to add imageView to imageWrapperView before add constraints
You have to set imageView.translatesAutoresizingMaskIntoConstraints to false
Then, the final code is:
//Use half the screen size width when on an iPhone and on Landscape
let image: UIImage = UIImage(named: "key.png")!
let imageView = UIImageView(image: image)
imageView.contentMode = .ScaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
//add to sub view
imageWrapperView.addSubview(imageView)
//center image
let centerXConst = NSLayoutConstraint(item: imageView, attribute: .CenterX, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterX, multiplier: 1.0, constant: 0.0)
let centerYConst = NSLayoutConstraint(item: imageView, attribute: .CenterY, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterY, multiplier: 1.0, constant: 0.0)
let heightConstraint = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 185.0)
let widthConstraint = NSLayoutConstraint(item: imageView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: self.view.frame.width / 2)
imageView.addConstraints([heightConstraint, widthConstraint])
NSLayoutConstraint.activateConstraints([centerXConst, centerYConst])
When you're using autolayout, do not try to change the frame of the views. If you need to change the frame, better take the outlets of the constraints and change them programatically.
In your question, to center align the imageView, you can do it by putting 4 constraints. Set the height and width of the imageView and the other two are center horizontally and center vertically constraints.
This is the basic way of center aligning any type of view.
In viewDidLoad, I instantiate a UIView and add a gradient layer to that UIView.
This works well on iPhone, but on iPad, UIView does not stretch out to fill the entire screen. Please note the following screenshot for iPad sim.
iPad simulator screenshot
I have attempted adding constraints both programmatically and by using XCode.
It seems that once I add the CAGradientLayer, the UIView does not conform to the constraints that I set, either programmatically or using XCode tools.
Sample Code:
gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.bounds
gradientLayer.locations = [0.5, 1.0]
gradient_View.backgroundColor = UIColor.blueColor()
let color1 = self.opus_Page_Background_Color.CGColor as CGColorRef
let color4 = self.opus_Page_Tertiary_Color.CGColor as CGColorRef
gradientLayer.colors = [color1, color4]
self.gradient_View.frame = self.view.bounds
self.gradient_View.layer.insertSublayer(gradientLayer, atIndex: 0)
gradient_View.translatesAutoresizingMaskIntoConstraints = false
let leadingConstraint = NSLayoutConstraint(item: gradient_View, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0)
leadingConstraint.active = true
view.addConstraint(leadingConstraint)
let trailingConstraint = NSLayoutConstraint(item: gradient_View, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
trailingConstraint.active = true
view.addConstraint(trailingConstraint)
let widthConstraint = NSLayoutConstraint(item: gradient_View, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100)
view.addConstraint(widthConstraint)
let heightConstraint = NSLayoutConstraint(item: gradient_View, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100)
view.addConstraint(heightConstraint)
NSLayoutConstraint.activateConstraints([leadingConstraint, trailingConstraint, widthConstraint, heightConstraint])
Try changing the last two constraints. Instead of matching width and height, pin it to Top & Bottom. The problem probably is that in viewDidLoad, your view has width = X, height = Y, but that's not the final layout.
If that does not work, try adding it in viewDidLayoutSubviews.
Hope it helps!
You have added leading and trailing constraint which means you have got the width of the view. So there is no need to add width constraint at all. Remove width from storyboard or programmatically which ever you are using.
Also i could see a missing top constrai nt. Resolve that also
I'm coming across an issue with the following lines of code:
let imageName = "smiley.png"
let imageU = UIImage(named: imageName)
let imageView = UIImageView(image: imageU)
imageView.frame = CGRect(x: 5.0, y: 5.0, width: 5.0, height: 5.0)
contentView!.addSubview(imageView)
let imageTopConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.TopMargin, relatedBy: NSLayoutRelation.Equal, toItem: bodyText, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 5)
let imageLeftConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.LeftMargin, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 16)
imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([imageTopConstraint, imageLeftConstraint])
When I run this code, I am getting a gigantic smiley (probably 150x150) and the constraints don't seem to be working correctly either. Is there something wrong with setting the frame and then applying constraints? What is the best practice when creating and constraining views programmatically? Thanks, and apologies for the semi-vague question.
Having adopted Autolayout and Storyboards, I'm no longer designing screens at exact dimensions, so when I use images I tend to use a fairly large sized image so that it will look sharp on the iPad but can be scaled down for the smaller iPhones. I drag this image into the Asset Catalog.
When I place the image into a View Controller in my Storyboard, the image wants to be its intrinsic size. I can only get it to show smaller by setting a specific width, proportional width to another object, or by constraining it between two other items.
I'm now at another point of the project where I need to add the image in code. Although I am setting a specific height and width for the image's frame, the image still appears on screen at its intrinsic size and not where I have set it using:
myImage.frame = CGRect(x: self.view.center.x - 50, y: 100, width: 100, height: 100)
Any ideas on what I'm missing? Thanks!
I look you want add an imageView in CenterX and margin top 100. And hold image aspect in square size 100, 100. This code below will help you.
let imageName = "your image name in resource"
let imageView = UIImageView(frame: CGRectMake(0, 0, 200, 200))
imageView.image = UIImage(named: imageName)
imageView.contentMode = .ScaleAspectFit
imageView.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(imageView)
// add your constraint
let constTop = NSLayoutConstraint(item: imageView, attribute:.Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 100)
// var constLeading = NSLayoutConstraint(item: imageView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1, constant: self.view.center.x - 50)
var constCenterX = NSLayoutConstraint(item: imageView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1, constant: 0);
var constWidth = NSLayoutConstraint(item: imageView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .Width, multiplier: 1, constant: 100);
var constHight = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 1, constant: 100);
imageView.addConstraints([constHight, constWidth])
self.view.addConstraints([constTop, constCenterX])
Hope this helps!
You need to set the UIImageView's contentMode which is actually a property of UIView:
https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIView_Class/index.html#//apple_ref/swift/enum/c:#E#UIViewContentMode
If you take on layout in code, I hope you're doing it in the right place... by overriding layoutSubviews(), and if that needs to get triggered by an external event, that the event fires setNeedsLayout() on the parent view.
Lots of handshaking and configuring to do if it must be done in code.