I'm an Android developer trying my hand at Xcode and it's been unpleasant so far. What I'm trying to do is have a custom view that has three sub views:
UIImageView (for an icon)
UILabel (for the title)
UILabel (for the content)
I want it such that the content label's height grows and shrinks to wrap the text it contains (like Android's wrap_content). And then, I want the custom view to also grow and shrink to wrap all three sub views.
However, I cannot, for the life of me, figure out how these auto layouts/constraints work.
01) How would I make my UILabel's height grow/shrink to match its contained text?
02) How would I make my custom view's height grow/shrink to match its contained sub views?
override func layoutSubviews() {
super.layoutSubviews()
img_icon = UIImageView()
txt_title = UILabel()
txt_content = UILabel()
img_icon.backgroundColor = Palette.white
img_icon.image = icon
txt_title.text = title
txt_title.textAlignment = .Center
txt_title.font = UIFont(name: "Roboto-Bold", size:14)
txt_title.textColor = Palette.txt_heading1
txt_content.text = content
txt_content.textAlignment = .Center
txt_content.font = UIFont(name: "Roboto-Regular", size:12)
txt_content.textColor = Palette.txt_dark
txt_content.numberOfLines = 0
txt_content.preferredMaxLayoutWidth = self.frame.width
txt_content.lineBreakMode = NSLineBreakMode.ByWordWrapping
self.backgroundColor = Palette.white
addSubview(img_icon)
addSubview(txt_title)
addSubview(txt_content)
/*snip img_icon and txt_title constraints*/
let txt_content_x = NSLayoutConstraint(item: txt_content, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1, constant: 0)
let txt_content_y = NSLayoutConstraint(item: txt_content, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 80)
let txt_content_w = NSLayoutConstraint(item: txt_content, attribute: .Width, relatedBy: .Equal, toItem: self, attribute: .Width, multiplier: 1, constant: 0)
let txt_content_h = NSLayoutConstraint(item: txt_content, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 40)
txt_content.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
txt_content_x,
txt_content_y,
txt_content_w,
txt_content_h
])
}
I understand that, in the above code I've tried, I have the height set to a constant 40. This is only because I don't know how to achieve what I want.
[EDIT]
I've tried setting the height constraint to greater than or equal to but it just crashes Xcode.
[EDIT]
It crashes Xcode if I try to view it but works perfectly fine in the simulator. Question now is, why?
My height constraint is now:
let txt_content_h = NSLayoutConstraint(item: txt_content, attribute: .Height, relatedBy: .GreaterThanOrEqual, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 40)
It works in the simulator and has the desired behaviour. However, if I open the storyboard that contains the view, it crashes. It's definitely that line of code because changing it back to .Equal resolves the crash.
[EDIT]
My temporary fix is:
#if TARGET_INTERFACE_BUILDER
//use .Equal for height constraint
#else
//use .GreaterThanOrEqual for height constraint
#endif
This way, it doesn't crash Xcode and still renders the way I want it on the simulator.
[EDIT]
I removed the pre-processor check because I realized there's no actual thing like that defined and it still works now. I swear I've changed nothing else.
I am this close to giving up on iOS development because the interface builder keeps crashing Xcode without a reason when everything works in the simulator. Then, I do some nonsense edits and it works fine again.
01) How would I make my UILabel's height grow/shrink to match its contained text?
Just set top, left and right-constraint to the labels superview. Set the property number of lines to 0. Then it will start wrapping text.
02) How would I make my custom view's height grow/shrink to match its contained sub views?
By using interface builder this is much easier to achieve.
My suggestion to you is to start with your constraints in storyboard. You will not need to compile your code to see what the constraints will result in. Also you will get warnings and errors directly in the interface builder.
If you WANT to use programmatic constraints, my suggestion is to start using a framework for it. For example: https://github.com/SnapKit/SnapKit
You can use a trick with constraints to achieve wrap-content. For example :
let maximumWidth = frame / 4 //For example
yourView.widthAnchor.constraint(lessThanOrEqualToConstant: maximumWidth).isActive = true
The "maximumWidth" depends on your UI and your design and you can change it.
Also, you should set "lineBreakMode" in StoryBoard or in code like :
yourBtn.titleLabel?.lineBreakMode = .byCharWrapping //For UIButton or
yourTxt.textContainer.lineBreakMode = .byCharWrapping //For UITextView
Often clean will do a lot of good when code jams for no reason ar all, cmd-shift-k if i remember correctly
I understand there is no direct application of wrap content in iOS just like we have in Android and thats a big problem, I resolved it through manual anchors like this.
create a function with where in you calculate the height of the view using
mainView.contentSize.height
and then set anchors based on the total height to the enclosing view, call this function inside
override func viewWillLayoutSubviews()
And this would work, the viewWillLayoutSubviews() is a lifecycle method and whenever you override you have to do
super.viewWillLayoutSubviews()
This worked in my case, might work with yours too, if there is a better approach please do comment.
Related
I need to add labels one after another vertically and their number is dynamic. For now it works fine with this code:
let numUnitsLabel = UILabel(frame: CGRectZero)
numUnitsLabel.text = units
numUnitsLabel.font = UIFont.boldSystemFontOfSize(28)
numUnitsLabel.textColor = UIColor.redColor()
numUnitsLabel.translatesAutoresizingMaskIntoConstraints = false
cell.contentView.addSubview(numUnitsLabel)
let topConstraint = NSLayoutConstraint(item: numUnitsLabel, attribute: .Top, relatedBy: .Equal, toItem: cell.contentView, attribute: .Top, multiplier: 1, constant: 8 * CGFloat(i+1) + CGFloat(i*25) + CGFloat(i*20) - 5)
let rightConstraint = NSLayoutConstraint(item: numUnitsLabel, attribute: .Trailing, relatedBy: .Equal, toItem: cell.contentView, attribute: .Trailing, multiplier: 1, constant: -10)
cell.contentView.addConstraints([topConstraint, rightConstraint])
The cell is drawn fine. But when I add new item in the list and call tableView.reloadData the old labels are "remembered" and they are over new ones. The newly added object is put in the first place in the array and they are like one over another... Maybe my approach is bad, but if you have any suggestions please advice me.
Remember that cells are re-used, so however a cell was prepared previously, it still has all of that state. In particular, its view hierarchy (added subviews) remain. The reason for this is generally a layout of a Table Cell stays the same, and only its content is meant to be re-set in cellForRowAtIndexPath.
You're using an anti-pattern, first of all, which is why you're running into difficulty.
If you really want to clear out and re-layout the cell, remove all subviews explicitly, every time, e.g.:
https://techfuzionwithsam.wordpress.com/2014/12/23/what-is-the-best-way-to-remove-all-subviews-from-parent-viewsuper-view/
I suspect though, (admittedly this isn't CodeReview) that your design is flawed. Generally table cells don't need to grow in height with dynamic count of internal elements. You may need nested tables (!!), really just a single multi-line UITextView in each, or a table structured by sections with custom section header views.
I am trying to layout some custom views and when I try to activate the constraints, Xcode says that I can't use multiplier. Here is an example of the code:
class MenuView: UIView {
var addButton: AddButton!
var settingsButton: SettingsButton!
// ........
func setConstraints (withBarReference reference: NSLayoutYAxisAnchor) {
NSLayoutConstraints.activateConstraints([
// ........
addButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 0.5),
// ........
settingsButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 1.5)
])
}
}
The thing here is that Xcode gives a syntax error on the contraintEqualToAnchor: functions and says that I should replace "multiplier" to "constant".
Why can't I use the multiplier option with the X center anchors?
You can't set multiplier using helper functions, but you can set multiplier using NSLayoutConstraint initializer. Just got stuck by this myself, but found the answer.
Your code: addButton.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, multiplier: 0.5)
Correct code: NSLayoutConstraint(item: addButton, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 0.5, constant: 0)
Also, don't forget to activate this constraint by typing isActive = true
Previous answers work very weird now.
You can simply create UILayoutGuide with multiplier width/height with view and set guide.trailing equal to the centerX of your subview.
For example, if you need to place the addButton in the first 1/3 of a view and settingsButton in 2/3 you can simply set two layout guides
let addButtonGuide = UILayoutGuide()
self.addLayoutGuide(addButtonGuide)
addButtonGuide.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1/3).isActive = true
addButtonGuide.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
addButton.centerXAnchor.constraint(equalTo: addButtonGuide.trailingAnchor).isActive = true
// same for settingsButton but using 2/3 for the multiplier
But the really best way is to use UIStackView and set its distribution property to equalCentering.
Another option is to use uncommon Auto Layout API to create NSLayoutDimension between two centerXAnchors and make constraint to self.widthAnchor:
addButton.centerXAnchor.anchorWithOffset(to: self.centerXAnchor)
.constraint(equalTo: self.widthAnchor, multiplier: 0.25).isActive = true
self.centerXAnchor.anchorWithOffset(to: settingsButton.centerXAnchor)
.constraint(equalTo: self.widthAnchor, multiplier: 0.25).isActive = true
It seems that in IB you can use the multiplier option with Center X and obtain the effect you're looking for (set the center of button1 at 1/4 the width of the view it's in, and the center of button2 at 2/3 of the width of the view it's in):
.
I tried to use it both in code and in IB, and in code I got the same error as you.
Surprisingly, in IB it worked, no errors, no warnings. (I am using Xcode 7, will try it in Xcode 8 to see if it still works).
You can't use multipliers on NSLayoutXAxisAnchor anchors - multiplying by a position along a line doesn't make sense in a way that the constraints system can understand. You can only use multipliers with NSLayoutDimension anchors, which measure lengths, like the width.
The layout you are trying to make would be better achieved using a stack view.
I am trying to implement something like the image shown (http://i.stack.imgur.com/jKmGO.png) below using auto layout in Swift, but every time I end up with some issues. Can anyone please tell me the best way to implement auto layout for this kind of arrangement in horizontal grid for 3,4,5 or more image views.
Try the following steps
1) first select all of them and add constraint EQUAL WIDTH to images
2) set the leading space between left margin and first image view( let it be d)
3) Similarly set trailing space between the right margin and last imageview (let it be d)
4) Now add constraint HORIZONTAL DISTANCE(d) between all the image view e.g.
LEFT MARGIN-d-IMAGE1-d-IMAGE2-d-IMAGE3-d-IMAGE4-d-RIGHT MARGIN
Checkout Stanford Cs193p lecture no 8. Something similar is considered which was a basic calculator with equal width and height of keys.
Try code below (for horizontal arrangement)
var arrayOfImages = [image1,image2,image3,image4]
var previousImage:UIView? = nil
let horizontalSpaceBetweenImages = 20.0
let viewToUse = self.view //change this view to the one in which you are adding images as subviews
for image in arrayOfImages {
viewToUse.addSubview(image)
if previousItem == nil {
// this is the first item
viewToUse.addConstraint(NSLayoutConstraint(item: viewToUse, attribute: .Leading, relatedBy: .Equal, toItem: image, attribute: .Leading, multiplier: 1.0, constant: 0.0))
}
else {
viewToUse.addConstraint(NSLayoutConstraint(item: image, attribute: .Leading, relatedBy: .Equal, toItem: previousImage, attribute: .Trailing, multiplier: 1.0, constant: horizontalSpaceBetweenImages))
viewToUse.addConstraint(NSLayoutConstraint(item: image, attribute: .Width, relatedBy: .Equal, toItem: previousImage, attribute: .Width, multiplier: 1.0, constant: 0.0))
}
previousImage = image
}
// now add trailing constraint for last image
viewToUse.addConstraint(NSLayoutConstraint(item: arrayOfImages.last, attribute: .Trailing, relatedBy: .Equal, toItem: viewToUse, attribute: .Trailing, multiplier: 1.0, constant: 0.0))
this code sorts out horizontal alignment. It should be trivial to then add vertical alignment constraints (they should be easier to implement)
A collectionView would be the best option for you if you are going to be switching between 3, 4, and 5 images in your view. If you are, however, trying to have a set number of images displaying (number of UIImages stays the same) You can try doing this method:
Everything here is going to be based on the horizontal distance available to you based on the device size. So to start, you need to figure out what height you'll want for the images. Do the heights need to be relative to the width? Or can the heights for each image stay the same?
If the heights need to stay relative to the widths, put an "Aspect Ratio" constraint on each image. If the heights can stay static, place a "height constraint" on each image.
Next you need to set constraints for the distances between the images.
At this point you are still going to have errors because the width for each image will be ambiguous. To fix this, select all the images simultaneously and then add the constraint "Equal Widths." As long as you've made sure that the images are pinned to the top, you should no longer have auto-layout issues at this point.
Let me know if I can be more clear on any of these steps.
I am trying to use auto layout to to position two views like below picture. I know that with iOS 8 and size classes I can create layout for different layouts and it would work. However I am targeting iOS 7 and according to several posts such as https://stackoverflow.com/a/26841899/4170419, iPhone landscape mode of size classes will not work for earlier version. So, how can I position those two views on different orientation according to my picture? Thanks.
Compact width compact height size class will not work on iOS7. It will clash with compact width any height sadly.
Very good summary here: How can Xcode 6 adaptive UIs be backwards-compatible with iOS 7 and iOS 6?
For you particular case, I think you might have to resort to some manual work for iOS7. A possible approach would be:
1) Add a UIView between the label area and the right hand side pinned to the top, bottom, label area leading and trailing to superview with size 0. With no content this should end up 0 width.
2) Add a UIView between the label area and the bottom, pinned top to the label area, leading and trailing to the superview and to bottom with size 0. With no content this should end up 0 height.
3) Add IBOutlets for both views into your controller .h file.
4) In viewDidLoad, create and place the MKMapView into the appropriate view for the current orientation.
This gives you on startup the map view in the location you want.
5) Add orientation change detection to your controller. When the orientation changes, remove the MKMapView from its current view and add it to the view for the new orientation.
Not sure this will work, but it might give you what you want on iOS8 and iOS7 with one piece of code.
You may need to add constraints to the views for width/height or set the MKMapView frame to get the dimensions right for each orientation when layout occurs.
Hopefully somebody may come up with an easier solution, but seems size classes are unlikely to help in this case.
Finally I solved it :) First of all, both of my orientation show that mapview must be aligned to bottom and right of main view. These constraints are fixed. Then just to shut Xcode I set the constraints for portrait orientation.
Since iPad has enough screen state, I applied rotation fix to only iPhone. I am sure it can be written better way so if you have any comments please share. Thanks.
lazy var landscapeLeft: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Leading, relatedBy: .Equal, toItem: self.idLabel, attribute: .CenterX, multiplier: 1.0, constant: 0)
}()
lazy var landscapeTop: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Top, relatedBy: .Equal, toItem: self.idLabel, attribute: .Bottom, multiplier: 1.0, constant: 8)
}()
lazy var portraitLeft: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1.0, constant: 8)
}()
lazy var portraitBottom: NSLayoutConstraint = {
return NSLayoutConstraint(item: self.myMap, attribute: .Top, relatedBy: .Equal, toItem: self.expectedDateLabel, attribute: .Bottom, multiplier: 1.0, constant: 8)
}()
func fixLayout() {
if (UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom.Phone) && (UIDevice.currentDevice().orientation.isLandscape) {
self.view.removeConstraint(portraitLeft)
self.view.removeConstraint(portraitBottom)
self.view.addConstraint(landscapeLeft)
self.view.addConstraint(landscapeTop)
} else {
self.view.removeConstraint(landscapeLeft)
self.view.removeConstraint(landscapeTop)
self.view.addConstraint(portraitLeft)
self.view.addConstraint(portraitBottom)
}
}
override func updateViewConstraints() {
super.updateViewConstraints()
fixLayout()
}
UPDATE: I was so naive to think that the code I wrote before was compatible with iOS 7 just because it compiled to ios 7 target and worked on iOS 8 simulator. Thanks to #Rory McKinnel, I found out that I was using methods which are not available on iOS 7. This time, I tested on both iOS 7 and iOS 8 simulators and they worked. I hope that is the end of this problem.
I am adding a UILabel to a view with the following layout requirements:
The label should be centered
The label should have a maximum font size of 100 points, but should scale down to fit. It should not truncate.
The label's height should not exceed 450 points.
Another view will be positioned directly below the label.
My label's properties layout constraints seem to describe this adequately:
let label = UILabel()
label.backgroundColor = UIColor.yellowColor()
label.font = UIFont.systemFontOfSize(100)
label.numberOfLines = 0
label.textAlignment = .Center
label.adjustsFontSizeToFitWidth = true
label.text = "What's Brewing in PET/CT: CT and MR Emphasis"
label.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(label)
view.addConstraint(NSLayoutConstraint(item: label, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: view, attribute: .CenterY, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: label, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .Left, multiplier: 1, constant: 60))
view.addConstraint(NSLayoutConstraint(item: label, attribute: .Right, relatedBy: .Equal, toItem: view, attribute: .Right, multiplier: 1, constant: -60))
view.addConstraint(NSLayoutConstraint(item: label, attribute: .Height, relatedBy: .LessThanOrEqual, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 450))
However, I am finding that with longer content like that below, the label is displayed with some unexpected margins:
This is unacceptable since any views placed directly above or below the label will have a gap.
Based on the discussion below, my working theory is that the layout engine is calculating the size based on the font size of 100, without taking into account the subsequent scaling when the content is longer.
How can I meet the layout requirements listed above (ideally without using any deprecated methods)?
Here's a test project to play with.
I took a look at your project and I might have found out a solution to your problem.
I added the following to the label setup:
label.minimumScaleFactor = 0.5
This is how the view looks like after my change:
There is no more spacing on top of the label.
Hope this helps you with your problem! Let me know how it went.
Had a look at your test project you kindly added.
The problem is that the font you are setting is too big (100pt) and the 450 point height can not be satisfied. You have set label.adjustsFontSizeToFitWidth = true which is causing it to try and fit it in as best it can by using a smaller font.
So when you set the font to 100, it is sizing the text area based on fitting the original text truncated and then it compresses it by changing the font to fit the width. This leaves a gap at the top and bottom after the compression as the size was based on the original font.
If you use smaller sizes like 90, it works fine as it fits in less than 450.
If you remove adjustsFontSizeToWith it works fine and fills the space, but it truncates the text.
If you remove the height constraint it works fine, but its height goes > 450.
So your problem is simply that the test font is too big for 450 height.
Possible Solution:
Ask the label for the font size needed using the answer from here: How to get UILabel (UITextView) auto adjusted font size?
Basically you use:
CGFloat actualFontSize;
[label.text sizeWithFont:label.font
minFontSize:label.minimumFontSize
actualFontSize:&actualFontSize
forWidth:label.bounds.size.width
lineBreakMode:label.lineBreakMode];
This is deprecated but that does not mean you cant use it for now. You need to convert it to swift.
Call this and if the font size is less than the original, set the font in the label the lower size. This in theory should give you a perfect fit as it should resize to the new font size you set.
Possible Solution Update:
I had a search for the swift equivalent of sizeWithFont and there are many articles but none I could see which replaced the version of the function noted above.
A slightly inefficient solution would be to add the following before your addSubview code in the test project you posted(excuse my swift). It basically searches backwards in font size until the font fits the known limits. This could obviously be made more efficient, but it shows that if you calculate the correct font before layout, then it will all fit perfectly at 450.0 height.
Tested this in your project and the text fits perfectly in the event of it originally not fitting at 450.0
// The current font size and name
var fontSize:CGFloat = 120
let fontName:String = "AvenirNext-Regular"
// The size to fit is the frame width with 60 margin each size and height
// of 450
let fitSize:CGSize = CGSize(width:view.frame.width-120.0,height:450)
var newSize:CGSize
do{
// Create the trial font
label.font = UIFont(name: fontName, size: fontSize)
// Calculate the size this would need based on the fitSize we want
newSize = label.sizeThatFits(fitSize)
// Make the font size smaller for next time around.
fontSize-=0.5
} while (newSize.height >= 450)
println("Font size had to be reduced to \(fontSize)")
view.addSubview(label)