I'm currently trying to achieve a Shimmer effect in Swift. To do that I create a gray UIView, and another on top of it with an effect.
The problem is that I'm writing the same code twice...
let profileShimmerView = UIView()
profileShimmerView.backgroundColor = whiteClear
profileShimmerView.layer.cornerRadius = 20
profileShimmerView.clipsToBounds = true
let profileView = UIView()
profileView.backgroundColor = grayClear
profileView.layer.cornerRadius = 20
profileView.clipsToBounds = true
self.addSubview(profileView)
self.addSubview(profileShimmerView)
profileShimmerView.translatesAutoresizingMaskIntoConstraints = false
profileShimmerView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45).isActive = true
profileShimmerView.topAnchor.constraint(equalTo: self.topAnchor, constant: 15).isActive = true
profileShimmerView.widthAnchor.constraint(equalToConstant: 40).isActive = true
profileShimmerView.heightAnchor.constraint(equalToConstant: 40).isActive = true
profileView.translatesAutoresizingMaskIntoConstraints = false
profileView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45).isActive = true
profileView.topAnchor.constraint(equalTo: self.topAnchor, constant: 15).isActive = true
profileView.widthAnchor.constraint(equalToConstant: 40).isActive = true
profileView.heightAnchor.constraint(equalToConstant: 40).isActive = true
Is there a more simple way to achieve that?
You can create a function
func shared(color : UIColor)->UIView {
let v = UIView()
v.backgroundColor = color
v.layer.cornerRadius = 20
v.clipsToBounds = true
self.addSubview(v)
v.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
v.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45),
v.topAnchor.constraint(equalTo: self.topAnchor, constant: 15),
v.widthAnchor.constraint(equalToConstant: 40),
v.heightAnchor.constraint(equalToConstant: 40)
])
return v
}
Related
I have three views on the bottom of the view. I'm trying to make them have the same size and the size can be resized automatically depending on the size of the container view. I'd like to do it programmatically.
Here's how I want them to look
Here's how it looks by my current code
import UIKit
class ViewController: UIViewController {
var view1 = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
var view2 = UIView(frame: CGRect(x: 300, y: 300, width: 50, height: 50))
var view3 = UIView(frame: CGRect(x: 400, y: 500, width: 70, height: 70))
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(view1)
view.addSubview(view2)
view.addSubview(view3)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
view1.translatesAutoresizingMaskIntoConstraints = false
view2.translatesAutoresizingMaskIntoConstraints = false
view3.translatesAutoresizingMaskIntoConstraints = false
// view1.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view1.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -10).isActive = true
view1.widthAnchor.constraint(equalTo: view.widthAnchor, constant: view.frame.size.width*0.01).isActive = true
view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
//view2.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view2.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view2.leadingAnchor.constraint(equalTo: view1.leadingAnchor, constant: view.frame.size.width*(2/3)).isActive = true
view2.widthAnchor.constraint(equalTo: view1.widthAnchor, constant: 0).isActive = true
view2.heightAnchor.constraint(equalTo: view1.heightAnchor, constant: 0).isActive = true
// view3.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view3.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view3.leadingAnchor.constraint(equalTo: view2.leadingAnchor, constant: 10).isActive = true
view3.widthAnchor.constraint(equalTo: view2.widthAnchor, constant: 0).isActive = true
view3.heightAnchor.constraint(equalTo: view2.heightAnchor, constant: 0).isActive = true
}
}
Here, you can use the concept of UIStackView. Here, you can get your desired output using the following code(sample demo)
import UIKit
class ViewController: UIViewController {
var view1 = UIView()
var view2 = UIView()
var view3 = UIView()
override func viewDidLoad() {
super.viewDidLoad()
let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.spacing = 50 //add amount of space between your views
view.addSubview(stackView)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
stackView.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
}
}
For more about UIStackView with example check this: https://nshipster.com/uistackview
Output:
Welcome to Stackoverflow. Please read on UIStackView. And by using that stackView, you can easily achieve what you want to achieve in your screenshot.
import UIKit
class ViewController: UIViewController {
var view1 = UIView()
var view2 = UIView()
var view3 = UIView()
lazy var stackView: UIStackView = {
return UIStackView(arrangedSubviews: [
self.view1,
self.view2,
self.view3
])
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(stackView)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .equalSpacing
stackView.alignment = .center
view1.translatesAutoresizingMaskIntoConstraints = false
view2.translatesAutoresizingMaskIntoConstraints = false
view3.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 16),
self.stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -16),
self.stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -16),
self.view1.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view1.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view2.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view3.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view3.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1)
])
}
}
RESULT:
I am working on a "Profile View Controller" which is inside a TableViewCell and table cell dimension is set as UITableView.automaticDimension:
The problem is that I would like to set the background image view (Blue) with a variable height based on cell width and a 16:9 ratio. For some reason I am not being able to change the view height even if I set the constant.
Here the code:
let topView : UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.cornerRadius = 20
view.backgroundColor = .yoofitDarkBlue
view.layer.masksToBounds = true
view.layer.shadowColor = UIColor.lightGray.cgColor
view.layer.borderWidth = 0.5
view.layer.borderColor = UIColor.yoofitDarkBlue.cgColor
view.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
view.layer.shadowRadius = 12.0
view.layer.shadowOpacity = 0.7
return view
}()
let userImage : UIImageView = {
let i = UIImageView()
i.translatesAutoresizingMaskIntoConstraints = false
i.image = UIImage(named: "user2")
i.layer.masksToBounds = true
i.layer.cornerRadius = 75
i.layer.borderWidth = 1
i.layer.borderColor = UIColor.white.cgColor
return i
}()
var userNameLabel:UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
l.font = UIFont(name: "AvenirNext-DemiBold", size: 20)
l.textAlignment = .center
l.textColor = .yoofitBlack
return l
}()
func setupViews() {
self.backgroundColor = .clear
self.selectionStyle = .none
addSubview(topView)
let width = self.frame.width
print(width) // print 320
topView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
topView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
topView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // this doesn't work even if I set another number like 600
topView.layoutIfNeeded()
addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: 150).isActive = true
userImage.heightAnchor.constraint(equalToConstant: 150).isActive = true
addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
userNameLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -20).isActive = true
}
PLEASE NOTE THERE ARE 2 answers to this question. The latter is definitely the correct one but the first maybe may help others.
So this is how I fixed it but I hope to get better answers. This answer helped me to go to the right path (iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout)
I have added a containing view which is twice as the required size of my top view (the blue one).
I centered the picture on the containing view.
self.conteiningView.backgroundColor = .red // I made this red so you can visually see how the views are related to each other
let width = self.frame.width
self.addSubview(conteiningView)
conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
conteiningView.heightAnchor.constraint(equalToConstant: (width/16*9)*2).isActive = true // twice of the blue view
conteiningView.layoutIfNeeded()
self.conteiningView.addSubview(topView)
topView.topAnchor.constraint(equalTo: conteiningView.topAnchor).isActive = true
topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // 16:9 ration
conteiningView.addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: conteiningView.centerYAnchor).isActive = true
userImage.centerXAnchor.constraint(equalTo: conteiningView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.layer.cornerRadius = width/4 // to mantain nice proportions
conteiningView.addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
With red background:
With clear background:
UPDATE: The answer above works but I have actually found the problem:
Even if I had set:
self.tableView.rowHeight = UITableView.automaticDimension
self.tableView.estimatedRowHeight = 300
For some (silly me) I had also implemented:
tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
This, of course, does not be implemented for the automatic dimension to work.
removing that allowed to use the following code to achieve the same result but without setting a predefined height:
self.addSubview(conteiningView)
conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
conteiningView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
conteiningView.layoutIfNeeded()
self.conteiningView.addSubview(topView)
topView.topAnchor.constraint(equalTo: conteiningView.topAnchor).isActive = true
topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true
conteiningView.addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true // the vertical center is now set nicely at bottom edge of my top view.
userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.layer.cornerRadius = width/4
conteiningView.addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 2).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
I have some problems with UIScrollView. Trying to add scrollable are for some sliders but nothing is working. I think it is because I'm using anchors for layout. Please, explain to me, what I'm doing wrong. Eventually, I need to have a scrollable area for iPhone SE version that user can use sliders.
Here is my code, where I'm creating scrollview and adding all the sliders on it and putting anchors in relation with scrollview.
//MARK: Scroll View
scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 812))
scrollView.backgroundColor = .gray
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 0).isActive = true
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
scrollView.contentSize = CGSize(width: view.bounds.width, height: 812)
//MARK: Brightness Label
brightnessLabel = UILabel()
brightnessLabel.text = "Brightness"
brightnessLabel.font = UIFont(name: "Avenir", size: 14)
brightnessLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(brightnessLabel)
brightnessLabel.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 10).isActive = true
brightnessLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
brightnessLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
brightnessLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Brightness Slider
brightnessSlider = UISlider()
brightnessSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
brightnessSlider.tintColor = .black
brightnessSlider.minimumValue = 0
brightnessSlider.maximumValue = 100
brightnessSlider.translatesAutoresizingMaskIntoConstraints = false
brightnessSlider.setValue(50, animated: true)
scrollView.addSubview(brightnessSlider)
brightnessSlider.topAnchor.constraint(equalTo: brightnessLabel.bottomAnchor, constant: 5).isActive = true
brightnessSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
brightnessSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
brightnessSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MArk: Brightness Value Label
brightnessValueLabel = UILabel()
brightnessValueLabel.text = "50"
brightnessValueLabel.font = UIFont(name: "Avenir", size: 14)
brightnessValueLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(brightnessValueLabel)
brightnessValueLabel.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 10).isActive = true
brightnessValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
brightnessValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: view.bounds.width - 30).isActive = true
brightnessValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Contrast Label
contrastLabel = UILabel()
contrastLabel.text = "Contrast"
contrastLabel.font = UIFont(name: "Avenir", size: 14)
contrastLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contrastLabel)
contrastLabel.topAnchor.constraint(equalTo: brightnessSlider.bottomAnchor, constant: 10).isActive = true
contrastLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
contrastLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
contrastLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Contrast Slider
contrastSlider = UISlider()
contrastSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
contrastSlider.tintColor = .black
contrastSlider.minimumValue = 0
contrastSlider.maximumValue = 100
contrastSlider.translatesAutoresizingMaskIntoConstraints = false
contrastSlider.setValue(50, animated: true)
scrollView.addSubview(contrastSlider)
contrastSlider.topAnchor.constraint(equalTo: contrastLabel.bottomAnchor, constant: 5).isActive = true
contrastSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
contrastSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
contrastSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MArk: Contrast Value Label
contrastValueLabel = UILabel()
contrastValueLabel.text = "50"
contrastValueLabel.font = UIFont(name: "Avenir", size: 14)
contrastValueLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contrastValueLabel)
contrastValueLabel.topAnchor.constraint(equalTo: brightnessSlider.bottomAnchor, constant: 10).isActive = true
contrastValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
contrastValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: view.bounds.width - 30).isActive = true
contrastValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Saturation Label
saturationLabel = UILabel()
saturationLabel.text = "Saturation"
saturationLabel.font = UIFont(name: "Avenir", size: 14)
saturationLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(saturationLabel)
saturationLabel.topAnchor.constraint(equalTo: contrastSlider.bottomAnchor, constant: 10).isActive = true
saturationLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
saturationLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
saturationLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Saturation Slider
saturationSlider = UISlider()
saturationSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
saturationSlider.tintColor = .black
saturationSlider.minimumValue = 0
saturationSlider.maximumValue = 100
saturationSlider.translatesAutoresizingMaskIntoConstraints = false
saturationSlider.setValue(50, animated: true)
scrollView.addSubview(saturationSlider)
saturationSlider.topAnchor.constraint(equalTo: saturationLabel.bottomAnchor, constant: 5).isActive = true
saturationSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
saturationSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
saturationSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MArk: Saturation Value Label
saturationValueLabel = UILabel()
saturationValueLabel.text = "50"
saturationValueLabel.font = UIFont(name: "Avenir", size: 14)
saturationValueLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(saturationValueLabel)
saturationValueLabel.topAnchor.constraint(equalTo: contrastSlider.bottomAnchor, constant: 10).isActive = true
saturationValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
saturationValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: view.bounds.width - 30).isActive = true
saturationValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Noise Label
noiseLabel = UILabel()
noiseLabel.text = "Noise"
noiseLabel.font = UIFont(name: "Avenir", size: 14)
noiseLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(noiseLabel)
noiseLabel.topAnchor.constraint(equalTo: saturationSlider.bottomAnchor, constant: 10).isActive = true
noiseLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
noiseLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
noiseLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MARK: Noise Slider
noiseSlider = UISlider()
noiseSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
noiseSlider.tintColor = .black
noiseSlider.minimumValue = 0
noiseSlider.maximumValue = 100
noiseSlider.translatesAutoresizingMaskIntoConstraints = false
noiseSlider.setValue(50, animated: true)
scrollView.addSubview(noiseSlider)
noiseSlider.topAnchor.constraint(equalTo: noiseLabel.bottomAnchor, constant: 5).isActive = true
noiseSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
noiseSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
noiseSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true
//MArk: Noise Value Label
noiseValueLabel = UILabel()
noiseValueLabel.text = "50"
noiseValueLabel.font = UIFont(name: "Avenir", size: 14)
noiseValueLabel.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(noiseValueLabel)
noiseValueLabel.topAnchor.constraint(equalTo: saturationSlider.bottomAnchor, constant: 10).isActive = true
noiseValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
noiseValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: view.bounds.width - 30).isActive = true
noiseValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true
If somebody wonders, this is my view hierarchy, where all the items I need to be on scroll view are in fact on scroll view. I added gray color to scroll view to make it visable.
When you are using autolayout you do not need to specify contentSize, it will infer that from the subviews. The conditions are:
topmostView.topAnchor should be attached to scrollView.topAnchor
bottommostView.bottomAnchor should be attached to scrollView.bottomAnchor
Leading and trailing of scrollView should be attached to any view which has a width.
A few problems i see in your code.
You seem to have attached a label's leading and trailing to a scrollView which is not what you want to do most of the time because the scrollView width will be only as much as that of the label.
You also seem to have attached the scrollView leading and trailing at multiple places which will compute different leading and trailing constraints leading to conflicts. (I'm pretty sure if you check your log it will show some constraint breaking)
You have not attached the top or bottom of the topmost and bottommost views that are inside the scrollView to the scrollView's top and bottom.
Apple recommends that when using UIScrollView, have a dummy view (contentView) which will pinned to the top, leading, trailing, bottom of the scrollView and have a specified width. The height of that view will be calculated dynamically from the views you add to it. The same concept of the top of the topmost view attached to the contentView's top and bottom of the bottommost view attached to the contentView's bottom.
You can check my github repo where there is a minimalistic example which explains a UIScrollView with autolayout.
I have a booking app, where user can book a serviceName and servantName, i have to create dynamic (incremental) UITextFields for those two types, those TextFields get filled from Two UIPickerViews (PickerViews works fine).
How can i assign text to TextFields, which is dynamically created from those pickerViews.
I created TextFieldss using Autolayout in scrollView as below function
func addBookingRow(firstTime: Bool) {
let containerView = UIView()
containerView.backgroundColor = .white
containerView.layer.cornerRadius = 5
containerView.layer.borderColor = .white
containerView.layer.borderWidth = 2
containerView.tag = count
contentView.addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
if firstTime {
containerView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
} else {
containerView.topAnchor.constraint(equalTo: bookedServices[count - 1].bottomAnchor, constant: 10).isActive = true
}
containerView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16).isActive = true
containerView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16).isActive = true
let serviceNameTF = CustomTextField()
serviceNameTF.backgroundColor = .white
serviceNameTF.placeholder = "Choose Service"
serviceNameTF.font = UIFont(name: "RB", size: 17)
serviceNameTF.textAlignment = .right
serviceNameTF.tag = count
containerView.addSubview(serviceNameTF)
setupPickerViews(textField: serviceNameTF, picker: serviceNamePicker)
serviceNameTF.addTarget(self, action: #selector(self.serviceNameIsTapped), for: .touchDown)
serviceNameTF.translatesAutoresizingMaskIntoConstraints = false
serviceNameTF.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 5).isActive = true
serviceNameTF.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 5).isActive = true
serviceNameTF.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -5).isActive = true
serviceNameTF.heightAnchor.constraint(equalToConstant: 40).isActive = true
let workerTF = CustomTextField()
workerTF.backgroundColor = .white
workerTF.placeholder = "Choose Servant"
workerTF.font = UIFont(name: "RB", size: 17)
workerTF.textAlignment = .right
workerTF.tag = count
containerView.addSubview(workerTF)
setupPickerViews(textField: workerTF, picker: workerPicker)
workerTF.addTarget(self, action: #selector(self.workerTFIsTapped), for: .touchDown)
workerTF.translatesAutoresizingMaskIntoConstraints = false
workerTF.topAnchor.constraint(equalTo: serviceNameTF.bottomAnchor, constant: 5).isActive = true
workerTF.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 5).isActive = true
workerTF.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -5).isActive = true
workerTF.heightAnchor.constraint(equalToConstant: 40).isActive = true
let price = UILabel()
price.font = UIFont(name: "RB", size: 17)
price.textColor = .white
containerView.addSubview(price)
price.translatesAutoresizingMaskIntoConstraints = false
price.topAnchor.constraint(equalTo: workerTF.bottomAnchor, constant: 5).isActive = true
price.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 5).isActive = true
price.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -5).isActive = true
price.heightAnchor.constraint(equalToConstant: 40).isActive = true
containerView.bottomAnchor.constraint(equalTo: price.bottomAnchor, constant: 5).isActive = true
contentView.bottomAnchor.constraint(greaterThanOrEqualTo: containerView.bottomAnchor, constant: 250).isActive = true
bookedServices.append(containerView)
count += 1
}
I am added a view in viewDidAppear method using autolayout. In the end of viewDidAppear trying to find the height of view that I added , I am getting zero?
That view I am adding has a label , height of that label is dynamic
let viewToShowIn = self.view!
let bannerView = UIView()
bannerView.backgroundColor = UIColor.red
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
viewToShowIn.addSubview(bannerView)
bannerView.addSubview(label)
let margins = viewToShowIn.layoutMarginsGuide
bannerView.translatesAutoresizingMaskIntoConstraints = false
bannerView.leadingAnchor.constraint(equalTo: viewToShowIn.leadingAnchor, constant: 0).isActive = true
bannerView.trailingAnchor.constraint(equalTo: viewToShowIn.trailingAnchor, constant: 0).isActive = true
let bannerTopConstraint = bannerView.topAnchor.constraint(equalTo: margins.topAnchor, constant: 0)
bannerTopConstraint.isActive = true
label.font = UIFont.systemFont(ofSize: 20)
label.text = "kjafj kfj fk fjk dakjd k fdjakljf dkfjklsdjf dfsjlkj lkfsdjlkjl sjflksdjfljslf sdfljdslkjflsdjf sldfjlksj"
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.textAlignment = .center
label.leadingAnchor.constraint(equalTo: bannerView.leadingAnchor, constant: 20).isActive = true
label.trailingAnchor.constraint(equalTo: bannerView.trailingAnchor, constant: -20).isActive = true
label.topAnchor.constraint(equalTo: bannerView.topAnchor, constant: 10).isActive = true
bannerView.bottomAnchor.constraint(equalTo: label.bottomAnchor, constant: 10).isActive = true
Declare your label and view as global variable like
var viewToShowIn = UIView()
let bannerView = UIView()
let label = UILabel()
Then set constraints in viewDidAppear or viewDidLoad
viewToShowIn = self.view!
bannerView.backgroundColor = UIColor.red
label.translatesAutoresizingMaskIntoConstraints = false
viewToShowIn.addSubview(bannerView)
bannerView.addSubview(label)
let margins = viewToShowIn.layoutMarginsGuide
bannerView.translatesAutoresizingMaskIntoConstraints = false
bannerView.leadingAnchor.constraint(equalTo: viewToShowIn.leadingAnchor, constant: 0).isActive = true
bannerView.trailingAnchor.constraint(equalTo: viewToShowIn.trailingAnchor, constant: 0).isActive = true
let bannerTopConstraint = bannerView.topAnchor.constraint(equalTo: margins.topAnchor, constant: 0)
bannerTopConstraint.isActive = true
label.font = UIFont.systemFont(ofSize: 20)
label.text = "kjafj kfj fk fjk dakjd k fdjakljf dkfjklsdjf dfsjlkj lkfsdjlkjl sjflksdjfljslf sdfljdslkjflsdjf sldfjlksj"
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.textAlignment = .center
label.leadingAnchor.constraint(equalTo: bannerView.leadingAnchor, constant: 20).isActive = true
label.trailingAnchor.constraint(equalTo: bannerView.trailingAnchor, constant: -20).isActive = true
label.topAnchor.constraint(equalTo: bannerView.topAnchor, constant: 10).isActive = true
bannerView.bottomAnchor.constraint(equalTo: label.bottomAnchor, constant: 10).isActive = true
You will get height of your view or label in viewWillLayoutSubviews() or viewDidLayoutSubviews() method
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// GET YOUR HEIGHT HERE
}
After adding all constraints to view just call self.view.layoutIfNeeded()
It will force auto layout engine to calculate view size.