I have a UIScrollView that has a UIStackView subview, call it stack. I want to have a dynamic number of subviews in stack, but these subviews will have different heights. How can I achieve this? Please note that I'm trying to shy away from Storyboard..
let scrollView = UIScrollView(frame: CGRect(x: 20, y: 20, width: view.frame.width - 20, height: view.frame.height - 20))
scrollView.center = view.center
self.view.addSubview(scrollView)
let stack = UIStackView(frame: CGRect(x: 20, y: 20, width: scrollView.frame.width - 40, height: scrollView.frame.height - 40))
stack.axis = .vertical
stack.alignment = .fill
stack.distribution = .fillProportionally
stack.spacing = 20
scrollView.addSubview(stack)
let label1 = UILabel()
label1.text = "This is going to be very, very long. I don't know how to make this guy longer. Words and words and more words. // Do any additional setup after loading the view, typically from a nib."
label1.numberOfLines = 0
label1.sizeToFit()
// Add more labels similar to label1
I tried adding a constraint to each of my UILabel subview, but it doesn't really work..
let x = NSLayoutConstraint(item: label1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: label1.frame.size.height)
label1.addConstraint(x)
Please help! Thanks.
Try changing the stack view's distribution mode :
stack.distribution = .fillProportionally
(I'm not sure if that's the correct one, if it's not just try all the different distribution modes :) )
Related
I'm working on a Swift project and there is one thing I'm not clear about making UIs programmatically.
I tried to display a simple UIView on the screen.
lazy var container: UIView = {
let view = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
view.backgroundColor = UIColor.systemImageGray()
view.layer.cornerRadius = view.layer.bounds.width / 2
view.clipsToBounds = true
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(container)
setupConstraints()
}
func setupConstraints() {
container.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
container.topAnchor.constraint(equalTo: self.topAnchor, constant: 14),
container.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -14),
container.widthAnchor.constraint(equalToConstant: 30),
container.heightAnchor.constraint(equalToConstant: 30)
])
}
The code above works fine, but since I set the with and height twice, I feel it's redundant, like UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30)) and set the width and height constraints in setupConstraints.
Since I set the width and height in UIView's frame, I thought I don't need to set the width and height constraints in the setupConstraints, but it doesn't show the view unless I add the width and height constraints again. So in this case, why I cannot set the width and height in UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30)) and I also have to add the width/height constraints again?
frame is useful when you are not using the Autolayout engine to place your views.
When you do:
container.translatesAutoresizingMaskIntoConstraints = false
You are explicitly telling the engine to ignore the frame & that you are responsible for applying a new set of constraints.
And hence you eventually do:
NSLayoutConstraint.activate([
container.topAnchor.constraint(equalTo: self.topAnchor, constant: 14),
container.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -14),
container.widthAnchor.constraint(equalToConstant: 30),
container.heightAnchor.constraint(equalToConstant: 30)
])
Which sets the positioning & dynamic sizing as per Autolayout's expectations.
translatesAutoresizingMaskIntoConstraints
A Boolean value that determines whether the view’s autoresizing mask
is translated into Auto Layout constraints.
Ref: https://developer.apple.com/documentation/uikit/uiview/1622572-translatesautoresizingmaskintoco
I am trying to create the following view heirarchy
Base UIView-> UIScrollView -> UIView -> UILabel
In the Storyboard I created the view->UIScrollView and made the Scrollview and the base view the same size and aligned their origins.
I am then adding the subsequent UIView -> UILabels in code.
In the ViewController viewDidLoad() function I am adding the UIView and the UILabel and also setting contraints on the UIScrollView.
I am having trouble adding the UILabel. If I just add the UIView to the scrollView its working fine (I gave them different colors just to see that).
As soon as I add the UILabel to the view I see the following issues --
the UIView seems to be disappearing and the label is getting added to the base View.
The UILabel is always getting added to the top corner of the screen. No matter what I do its not changing.
I have a feeling these two issues are connected and I am not adding the constraints on the label properly.
It will be great if someone can point out the error in my code.
override func viewDidLoad()
{
super.viewDidLoad()
view.backgroundColor = UIColor.orange
let boxViewOrigin = CGPoint(x:0, y:0)
let boxViewSize = CGSize(width: view.bounds.width * 3, height: view.bounds.height * 3)
let boxView = UIView(frame: CGRect(origin: boxViewOrigin, size: boxViewSize))
boxView.backgroundColor = UIColor.blue
boxView.translatesAutoresizingMaskIntoConstraints = false
let scrollView = view.subviews[0] as! UIScrollView
scrollView.addSubview(boxView)
// Add contraints
scrollView.contentSize = boxViewSize //CGSize(width: view.bounds.width * 3, height: view.bounds.height * 3)
scrollView.contentOffset = CGPoint(x: (view.bounds.origin.x + view.bounds.width) , y: (view.bounds.origin.y + view.bounds.height) )
/// ---- Commenting out everything from here to the end of the function makes the UIView appear properly. ------
let nameLabel = UILabel()
nameLabel.translatesAutoresizingMaskIntoConstraints = false
nameLabel.backgroundColor = UIColor.yellow
let nameLabelOrigin = CGPoint(x: boxView.bounds.midX, y: boxView.bounds.midY )
nameLabel.frame = CGRect(origin: nameLabelOrigin, size: CGSize(width: 30, height: 30) )
nameLabel.text = "BB"
//nameLabel.isEnabled = false
nameLabel.isUserInteractionEnabled = false
let verticalConstraint:NSLayoutConstraint = NSLayoutConstraint(item: nameLabel, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: boxView, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
let horizontalConstraint:NSLayoutConstraint = NSLayoutConstraint(item: nameLabel, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: boxView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
boxView.addSubview(nameLabel)
view.addConstraints([verticalConstraint, horizontalConstraint])
}
I have tried everything to auto-resize my UILabel in Swift. I can autoresize the text when it is one line but when it is two lines it no longer works. The text in the UILabel changes often happening about every 10 seconds. The code I have tried is:
let direction = UILabel(frame: CGRect(x: 95, y: 10, width: screenWidth - 95, height:100))
direction.numberOfLines = 0
direction.adjustsFontSizeToFitWidth = true
direction.lineBreakMode = .byWordWrapping
direction.textAlignment = .center
direction.minimumScaleFactor = 0.2
direction.font = UIFont.boldSystemFont(ofSize: 40)
view.addSubview(direction)
direction.text = "Ffafdafafdfa fafda dfafaf afa"
func updateDirection(update: String){
direction.text = update
}
The original text "Ffafdafafdfa fafda dfafaf afa" will automatically resize but when updateDirection is called the font size with not be changed from 40. I have also tried setting the number of lines to 2 and removing the .byWordWrapping. How can I get my UILabel to resize automatically?
Below code will keep the frame size and adjust the font size according with direction label content.
let backgroundView = UIView(frame: CGRect(x: 5, y: UINavigationController().navigationBar.frame.height + UIApplication.shared.statusBarFrame.height, width: UIScreen.main.bounds.width - 10, height: UIScreen.main.bounds.width - 100))
let direction = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
direction.backgroundColor = UIColor.green
direction.numberOfLines = 0
direction.textAlignment = .center
direction.font = UIFont.boldSystemFont(ofSize: 40)
direction.adjustsFontForContentSizeCategory = true
direction.adjustsFontSizeToFitWidth = true
direction.text = "This is some multiline label with a background colour" // Set or Initiate random function for your array here.
backgroundView.backgroundColor = UIColor.red
view.addSubview(backgroundView)
backgroundView.addSubview(direction)
Timer.scheduledTimer(timeInterval: 10.0, target: self, selector: #selector(random), userInfo: nil, repeats: true)
direction.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: direction,
attribute: .leading,
relatedBy: .equal,
toItem: backgroundView,
attribute: .leadingMargin,
multiplier: 1.0,
constant: 0.0).isActive = true
NSLayoutConstraint(item: direction,
attribute: .trailing,
relatedBy: .equal,
toItem: backgroundView,
attribute: .trailingMargin,
multiplier: 1.0,
constant: 0.0).isActive = true
NSLayoutConstraint(item: direction,
attribute: .top,
relatedBy: .equal,
toItem: backgroundView,
attribute: .topMargin,
multiplier: 1.0,
constant: 0.0).isActive = true
NSLayoutConstraint(item: direction,
attribute: .bottom,
relatedBy: .equal,
toItem: backgroundView,
attribute: .bottomMargin,
multiplier: 1.0,
constant: 0.0).isActive = true
}
func random(sender: Timer) {
//Place your random func code here.
}
Output:
Try this without Constraints:
let direction = UILabel(frame: CGRect(x: 95, y: 10, width: 375 - 95, height:100))
direction.numberOfLines = 0
direction.adjustsFontSizeToFitWidth = true
direction.textAlignment = .center
direction.minimumScaleFactor = 0.2
direction.font = UIFont.boldSystemFont(ofSize: 40)
view.addSubview(direction)
direction.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard"
I will try this code
It is use full
first create one function
func calchight(strin:String) -> CGFloat
{
let label = UILabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: CGFloat.greatestFiniteMagnitude))
label.numberOfLines = 0
label.text = strin
label.sizeToFit()
return label.frame.height + 2
}
then call this function in your right place, when you want to resize label
/--------------
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
let heit = self.calchight(strin: StringObject)
return (heit)
}
/--------------------------
this code is useful and not require Auto layout containers
UILabel will consider its content size to be one line of text, even when numberOfLines is set to a non-zero value, unless preferredMaxLayoutWidth is also set.
In other words, it can't predict how to wrap the text without preferredMaxLayoutWidth, so it doesn't plan to. It seems like during the autolayout process, a UILabel doesn't know how to balance the priority between its width set by layout constraints outside of it and the wrapping of text.
So it doesn't exert any additional pressure (more than the height of one line) on the vertical dimension even when its Content Compression Resistance is higher than other views', because it will assume that by exerting pressure in the horizontal axis, its content will be displayed.
So the solution is to set preferredMaxLayoutWidth, so that it is able to determine the height of the content after wrapping the text and then it uses that content size to negotiate layout with other views.
You probably want to avoid hard-coding the width of your UILabel. Assuming that its container's width is not going to change based on autolayout, it should be safe to use that. In this case I'm in a UITableViewCell or UICollectionViewCell and the "title label" spans the full width of the cell.
override func layoutSubviews() {
// Tell the label it should wrap text at the same width as this cell's contentView.
titleLabel.preferredMaxLayoutWidth = contentView.frame.width
super.layoutSubviews()
}
Try using function sizetofit() after assigning text to your label.
like:
direction.sizeToFit()
I am using Xcode 8.2, Swift 3.
I am trying to programmatically create a UIViewController with some textual (and in the future, some graphic) content on the screen. Normally, this would be quite easy to do with the Storyboard but since this ViewController is programmatically created, I have to work like this.
Here is my code so far:
let detailViewController = UIViewController()
detailViewController.view.backgroundColor = UIColor.white
let screenSize = UIScreen.main.bounds
let screenWidth = screenSize.width
let screenHeight = screenSize.height
let titleLabel = UILabel(frame: CGRect(x: 20, y: 20, width: screenWidth, height: 20))
titleLabel.center = CGPoint(x: screenWidth / 2, y: 100)
titleLabel.backgroundColor = UIColor.red
titleLabel.textAlignment = .center
titleLabel.text = "Scan Results"
titleLabel.font = UIFont.boldSystemFont(ofSize: 14)
let myField: UITextView = UITextView (frame: CGRect(x: 50, y: 50, width: screenWidth, height: 300))
myField.center = CGPoint(x: screenWidth / 2, y: 250)
myField.backgroundColor = UIColor.green
myField.text = <really long string here>
detailViewController.view.addSubview(titleLabel)
detailViewController.view.addSubview(myField)
And this is what I see:
This raises a lot of questions for me as I am trying to understand how this layout works but can't seem to find any help that makes sense to me.
My screenWidth and screenHeight is 375 and 667 respectively. I am using an iPhone 7. I've positioned my titleLabel in the center but at y: 100. But where the label ended up clearly doesn't look like 1/6 of the way down given that the height of the screen is 667.
So how exactly does textual positioning work? I know that the top left is the origin but that's about it.
Also, I start my text field at x: 50, y: 50 with a width of screenWidth. So why is the text overflowing off the side of the page instead of wrapping around?
Much thanks for any help.
I think if you are setting the frame of the different views (via the constructor or otherwise), dont set the .center as well, it will affect its x and y positions hence why their positioning is off
You have to add constraints programmatically, for example:
NSLayoutConstraint(item: myField, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: detailViewController, attribute: NSLayoutAttribute.leadingMargin, multiplier: 1.0, constant: 20.0).isActive = true
myField.widthAnchor.constraint(equalToConstant: 200).isActive = true
myField.heightAnchor.constraint(equalToConstant: 100).isActive = true
Check this answer for more information: https://stackoverflow.com/a/36263784/4077559. I think this is what you are looking for
I'm new to Swift and I try to make my first iOS app.
I have a problem with UILabels.
Made one which is centered (x and y) - its in the middle of the frame which is perfect.
//UILabel1 (works)
Level = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 100))
Level.center = (self.view?.center)!
Level.textAlignment = NSTextAlignment.Center
Now I have 2 more, which I want in the center of x, but y should be higher so that they are higher on the screen.
I can center them like Level .. That works, but if I try to change "y" (in CGRect()) or if I delete the .center (self.view?.center)! it just disappears of the screen.
GeschwindigkeitUILabel = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
GeschwindigkeitUILabel.center = (self.view?.center)!
Regel = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
Regel.center = (self.view?.center)!
How can I make GeschwindigkeitUILabel and Regel in the center of x but with a higher y value?
Tried self.view.height / 2 + 150 and things like that too, but then I can't see the label at all.
Updated Answer:
Instead of calculating frames, you can do it pretty easily using Auto layouts.
I have done demo project for your scenario, and below is the View it looks like (I have turned on the ShowViewFrame):
Here are the constraints i have used to make this:
let topLabel = UILabel()
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.text = "TopLabel"
topLabel.textAlignment = NSTextAlignment.Center
let middleLabel = UILabel()
middleLabel.translatesAutoresizingMaskIntoConstraints = false
middleLabel.text = "MiddleLabel"
middleLabel.textAlignment = NSTextAlignment.Center
let bottomtLabel = UILabel()
bottomtLabel.translatesAutoresizingMaskIntoConstraints = false
bottomtLabel.text = "BottomLabel"
bottomtLabel.textAlignment = NSTextAlignment.Center
self.view.addSubview(topLabel)
self.view.addSubview(middleLabel)
self.view.addSubview(bottomtLabel)
//Ideally we should create dictionary for metrics and view to increase the code readability.
//Metrics are used specify width, height, spacing between views.
let metrics = ["spacingBetweenMiddleLabelAndTopLabel" : 25, "spacingBetweenMiddleLabelAndBottomLabel": 25]
//Views we provide the subview for which we are setting the constraints
let views = ["topLabel": topLabel, "middleLabel": middleLabel, "bottomtLabel": bottomtLabel]
//Placing middleLabel at the centre of screen Horizontal
let centreXMiddleLabel:NSLayoutConstraint = NSLayoutConstraint(item: middleLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);
//Placing middleLabel at the centre of screen Vertical
let centreVMiddleLabel:NSLayoutConstraint = NSLayoutConstraint(item: middleLabel, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0);
//Placing topLabel at the centre of screen Horizontal
let centreXTopLabel:NSLayoutConstraint = NSLayoutConstraint(item: topLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);
//Placing bottomtLabel at the centre of screen Horizontal
let centreXBottomtLabel:NSLayoutConstraint = NSLayoutConstraint(item: bottomtLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);
//Setting height of 50pts to topLable
let heightTopLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel(50)]", options: [], metrics: nil, views: views)
//Setting width of 300pts to topLable
let widthTopLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[topLabel(300)]", options: [], metrics: nil, views: views)
//Setting height of 100pts to middleLabel
let heightMiddleLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[middleLabel(100)]", options: [], metrics: nil, views: views)
//Setting width of 150pts to middleLabel
let widthMiddleLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[middleLabel(150)]", options: [], metrics: nil, views: views)
//Setting height of 50pts to bottomtLabel
let heightBottomLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[bottomtLabel(50)]", options: [], metrics: nil, views: views)
//Setting width of 300pts to bottomtLabel
let widthBottomLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[bottomtLabel(300)]", options: [], metrics: nil, views: views)
/*This is important
Here you are setting the Y position of all lables
We are placing top label on top of middleLabel with standand spacing (8 pts) and bottom label below middle label with standard spacing.
*/
let labelYConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel]-(spacingBetweenMiddleLabelAndTopLabel)-[middleLabel]-(spacingBetweenMiddleLabelAndBottomLabel)-[bottomtLabel]", options: [], metrics: metrics, views: views)
//If you want to set spacing or height and width with certain priority you can do that
let labelYConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel]-(spacingBetweenMiddleLabelAndTopLabel#1000)-[middleLabel]-(spacingBetweenMiddleLabelAndBottomLabel#750)-[bottomtLabel]", options: [], metrics: metrics, views: views)
topLabel.addConstraints(heightTopLabel)
topLabel.addConstraints(widthTopLabel)
middleLabel.addConstraints(heightMiddleLabel)
middleLabel.addConstraints(widthMiddleLabel)
bottomtLabel.addConstraints(heightBottomLabel)
bottomtLabel.addConstraints(widthBottomLabel)
self.view.addConstraint(centreXMiddleLabel)
self.view.addConstraint(centreVMiddleLabel)
self.view.addConstraint(centreXTopLabel)
self.view.addConstraint(centreXBottomtLabel)
self.view.addConstraints(labelYConstraint)
Result after setting fixed points spacing between views:
The best solution would be to use auto layout but if you're going to stick with frames here's a bit of information.
Setting x and y in the frame will be overridden by changing the center point. If you'd like to achieve the positioning the best advice I could give in this situation would be something like. Untested but this might give you an idea.
Level = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 100))
Level.center = (self.view?.center)!
Level.textAlignment = NSTextAlignment.Center
GeschwindigkeitUILabel = UILabel(frame: CGRect(x: 0, y: Level.frame.origin.y+Level.frame.size.height + PADDING, width: 300, height: 50))
GeschwindigkeitUILabel.center = CGPointMake(self.view?.center.x, GeschwindigkeitUILabel.center.y)
Regel = UILabel(frame: CGRect(x: 0, y: GeschwindigkeitUILabel.frame.origin.y+GeschwindigkeitUILabel.frame.size.height+ PADDING, width: 300, height: 50))
Regel.center = CGPointMake(self.view?.center.x, Regel.center.y)