2 UIButton with dynamic text and font size - ios

I am using 2 UIButton in same y position. The one on the left is shorter in text than the one on the right:
example image
I am adding
button.titleLabel?.adjustsFontSizeToFitWidth = true
button.titleLabel?.minimumScaleFactor = 0.5
for each button. The problem is that one button font size get smaller than the other. For example, they are both with font size 18, one might get 12 and the other will stay 18. I want them both to be 15 (the larger possible keeping both texts visible)
The text inserted to the buttons changes so i can't use aspect ratio.
Also, i don't want to use the font of the button with the smaller text because the difference is sometimes to high.

You can do it programmatically with stack view, declare your buttons under your controller class:
let myButton: UIButton = {
let b = UIButton()
b.backgroundColor = .white
b.setTitle("Short button", for: .normal)
b.setTitleColor(.black, for: .normal)
b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
b.layer.cornerRadius = 12
b.clipsToBounds = true
b.titleLabel?.adjustsFontSizeToFitWidth = true
b.titleLabel?.minimumScaleFactor = 0.5
b.translatesAutoresizingMaskIntoConstraints = false
return b
}()
let myButton2: UIButton = {
let b = UIButton()
b.backgroundColor = .white
b.setTitle("Much Much Much longer button", for: .normal)
b.setTitleColor(.black, for: .normal)
b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
b.layer.cornerRadius = 12
b.clipsToBounds = true
b.titleLabel?.adjustsFontSizeToFitWidth = true
b.titleLabel?.minimumScaleFactor = 0.5
b.translatesAutoresizingMaskIntoConstraints = false
return b
}()
Now in viewDidLoad set stackView and constraints (I set 6 for space, but you can set your prefer space, look at the comment to do it):
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .darkGray
let stackView = UIStackView(arrangedSubviews: [myButton, myButton2])
stackView.distribution = .fillProportionally
stackView.spacing = 6 // change space betwenn buttons
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, 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: 50).isActive = true
}
This is the result shortButton/shortButton and shortButton/longerButton, the width of the buttons changes dynamically according to the text:

Related

Swift Button is not clickable on whole area

I have a problem with a UIButton. This is how I create it:
let backButton: UIButton = {
let v = UIButton()
v.translatesAutoresizingMaskIntoConstraints = false
v.setImage(UIImage(named: "backButton"), for: .normal)
v.backgroundColor = .cyan
v.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)
return v
}()
Constraints:
backButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30).isActive = true
backButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
backButton.heightAnchor.constraint(equalToConstant: 40).isActive = true
backButton.widthAnchor.constraint(equalToConstant: 40).isActive = true
And this is how it looks:
I create the button with the extra area on purpose for a better UX.
Problem:
The button is only clickable at the left half of the button. Why is this happening? It should also be clickable on the invisible area (.cyan for a better understanding).
What am I missing here?

ViewController Layout Help Needed

I'm using XCode to build a UI for a countdown timer/metronome app. After struggling with layout constraints, I discovered vertical and horizontal stack views, which I thought would make things much easier.
However, the outermost stackview's boundaries appear to be outside the view of the device. I removed all the layout constraints, but that didn't make any difference.
Here's a partial screenshot of the project in XCode:
StackView boundaries
Sorry if this question has been asked before - I looked but haven't found anything.
I'm a professional software developer for the last 30 years or so. The languages I work with on a daily basis for the last 20 years or so are Java, C++, and Fortran. So dealing with UI layout in IOS is frustrating, to say the least!
Thanks in advance for any help!
Edit: Here's a screenshot of the uppermost stack view's size inspector: size inspector
I know your frustration well because it was mine too when I start, and I decided to give you a hand. Make all UI programmatically like this:
in your Controller class built your objects programmatically:
let buttonPlay: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "play.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let buttonPause: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "pause.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let buttonStop: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.yourColor
let image = UIImage(systemName: "stop.fill")
button.setImage(image, for: .normal)
button.tintColor = .black
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.layer.cornerRadius = 25
button.clipsToBounds = true
return button
}()
let minutesLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .white
label.text = "MM"
label.textColor = .gray
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let secondsLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .white
label.text = "SS"
label.textColor = .gray
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let separatorLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = ":"
label.textColor = .black
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
return label
}()
let titleLabel: UILabel = {
let label = UILabel()
label.backgroundColor = UIColor.yourColor
label.text = "Title label"
label.textColor = .black
label.textAlignment = .center
label.font = .systemFont(ofSize: 20, weight: .semibold)
label.translatesAutoresizingMaskIntoConstraints = false // this distactive automatic constraints
return label
}()
let timeLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = "Tempo:"
label.textColor = .black
label.font = .systemFont(ofSize: 20, weight: .regular)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
let imageViewTime: UIImageView = {
let image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysTemplate)
let imageView = UIImageView(image: image)
imageView.tintColor = .white
imageView.backgroundColor = .purple
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
let slider: UISlider = {
let s = UISlider()
s.maximumValue = 0
s.maximumValue = 100
s.isContinuous = true
s.tintColor = .black
s.addTarget(self, action: #selector(sliderInAction), for: .valueChanged) // call the function below to show slider value
s.translatesAutoresizingMaskIntoConstraints = false
return s
}()
let sliderLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.text = "2"
label.textAlignment = .center
label.textColor = .black
label.font = .systemFont(ofSize: 16, weight: .regular)
label.widthAnchor.constraint(equalToConstant: 30).isActive = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
let containerSlider: UIView = {
let v = UIView()
v.backgroundColor = UIColor.yourColor
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
In viewDidLoad set your background color and call the function to setup the programmatically constraints:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.yourColor
setupConstraints()
}
now set the constraints with autolayout:
fileprivate func setupConstraints() {
let stackViewTime = UIStackView(arrangedSubviews: [minutesLabel, separatorLabel, secondsLabel])
stackViewTime.distribution = .fillProportionally
stackViewTime.spacing = 4
stackViewTime.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackViewTime)
stackViewTime.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
stackViewTime.heightAnchor.constraint(equalToConstant: 50).isActive = true
stackViewTime.widthAnchor.constraint(equalToConstant: 148).isActive = true
stackViewTime.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
let stackViewPlayer = UIStackView(arrangedSubviews: [buttonPlay, buttonPause, buttonStop])
stackViewPlayer.distribution = .fillEqually
stackViewPlayer.spacing = 10
stackViewPlayer.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackViewPlayer)
stackViewPlayer.widthAnchor.constraint(equalToConstant: 170).isActive = true
stackViewPlayer.heightAnchor.constraint(equalToConstant: 50).isActive = true
stackViewPlayer.centerXAnchor.constraint(equalTo: stackViewTime.centerXAnchor).isActive = true
stackViewPlayer.topAnchor.constraint(equalTo: stackViewTime.bottomAnchor, constant: 20).isActive = true
view.addSubview(imageViewTime)
imageViewTime.topAnchor.constraint(equalTo: stackViewPlayer.bottomAnchor, constant: 20).isActive = true
imageViewTime.heightAnchor.constraint(equalToConstant: 80).isActive = true
imageViewTime.widthAnchor.constraint(equalToConstant: 60).isActive = true
imageViewTime.centerXAnchor.constraint(equalTo: stackViewTime.centerXAnchor).isActive = true
view.addSubview(titleLabel)
titleLabel.topAnchor.constraint(equalTo: imageViewTime.bottomAnchor, constant: 20).isActive = true
titleLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30).isActive = true
titleLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30).isActive = true
titleLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
view.addSubview(timeLabel)
timeLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10).isActive = true
timeLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
timeLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
timeLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
let stackSlider = UIStackView(arrangedSubviews: [sliderLabel, slider])
stackSlider.distribution = .fill
stackSlider.spacing = 10
stackSlider.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(containerSlider)
containerSlider.topAnchor.constraint(equalTo: timeLabel.bottomAnchor, constant: 0).isActive = true
containerSlider.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
containerSlider.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
containerSlider.heightAnchor.constraint(equalToConstant: 30).isActive = true
containerSlider.addSubview(stackSlider)
stackSlider.topAnchor.constraint(equalTo: containerSlider.topAnchor).isActive = true
stackSlider.bottomAnchor.constraint(equalTo: containerSlider.bottomAnchor).isActive = true
stackSlider.leadingAnchor.constraint(equalTo: containerSlider.leadingAnchor, constant: 10).isActive = true
stackSlider.trailingAnchor.constraint(equalTo: containerSlider.trailingAnchor, constant: -10).isActive = true
}
the last step set the function to show the slider value in your slider label when you move it:
#objc fileprivate func sliderInAction() {
sliderLabel.text = "\(Int(slider.value))"
}
This is the result:
Play with this code, an experienced developer like you should take a short time to write the code.

Set contentMode for Image inside Button in Swift

I am trying to setImage inside my UIButton but the image appears smaller inside the button although there is "free-space" and I also set the contentMode.
Button:
let noteButton: UIButton = {
let v = UIButton()
v.setImage(UIImage(systemName: "pencil"), for: .normal)
v.tintColor = UIColor.white
v.imageView?.contentMode = .scaleAspectFit
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
Constraints:
noteButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
noteButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
noteButton.centerYAnchor.constraint(equalTo: itemView.centerYAnchor).isActive = true
noteButton.leadingAnchor.constraint(equalTo: linkButton.leadingAnchor, constant: 50).isActive = true
Result:
I fixed the issue. I just had to add these to lines:
v.contentHorizontalAlignment = .fill
v.contentVerticalAlignment = .fill

Setting background color for customView has no effect

I have a customView which I display by after a button-tap. My problem is that setting .backgroundColor has no effect and it is just a clear background.
CustomView:
let wishWishView: WishStackView = {
let v = WishStackView()
v.backgroundColor = .cyan
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
AddViewButton:
#objc func addWishButtonTapped(){
self.view.addSubview(self.wishWishView)
wishWishView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
wishWishView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
}
WishWishView is just a simple UIView with a StackView inside of it.
My guess would be that it is a UIStackView, which does not support having a background color.
You can read more about why this happens, and possible workarounds here: https://stackoverflow.com/a/34868367/3992237
Your code is Totally wrong, first you set your view like this:
let wishWishView: UIView = {
let v = UIView()
v.backgroundColor = .cyan
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
now set your stackView, in my example I put in 2 label in vertical axis:
let stackView: UIStackView = {
let label1 = UILabel()
label1.text = "Label 1"
label1.textColor = .red
label1.font = UIFont.systemFont(ofSize: 16)
let label2 = UILabel()
label2.text = "Label 2"
label2.textColor = .black
label2.font = UIFont.systemFont(ofSize: 16)
let sV = UIStackView(arrangedSubviews: [label1, label2])
sV.axis = .vertical
sV.distribution = .fillEqually
sV.translatesAutoresizingMaskIntoConstraints = false
return sV
}()
after that set your button:
let buttonAddView: UIButton = {
let button = UIButton(type: .system)
button.setTitle("Add View", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .red
button.addTarget(self, action: #selector(addWishButtonTapped), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
in viewDidLoad add button and set constraints
view.addSubview(buttonAddView)
buttonAddView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
buttonAddView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
buttonAddView.heightAnchor.constraint(equalToConstant: 50).isActive = true
buttonAddView.widthAnchor.constraint(equalToConstant: 120).isActive = true
now write the function that add the view with stack view inside when the button is tapped with right constraints, in your function you call only the position of the view but not the size of it. Write your function like this:
#objc func addWishButtonTapped(){
view.addSubview(self.wishWishView)
wishWishView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
wishWishView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
wishWishView.heightAnchor.constraint(equalToConstant: 100).isActive = true
wishWishView.widthAnchor.constraint(equalToConstant: 200).isActive = true
wishWishView.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: wishWishView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: wishWishView.bottomAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: wishWishView.leadingAnchor, constant: 10).isActive = true
stackView.trailingAnchor.constraint(equalTo: wishWishView.trailingAnchor, constant: -10).isActive = true
}
Now simply change background of the wishWishView to automatically set stackView background, and that's it...

Swift 3 - Programmatically build a button with an image and label

I am currently trying to build an interface (programmatically) with 5 x buttons, containing an image and a label.
I have done this successfully for ONE button using a UIStackView (holding the UIButton and a UIlabel).
I have two questions for this forum…
A UIButton can be built to display a title OR an image, can it have both?
Can a ‘for in’ loop be used to generate 5 x individual buttons? i.e: a way to re-use code instead of typing out code for 5 x buttons, 5 x labels, 5 x stack views.
My working UIStackView button code is as follows:
// Button
let btnSettings = UIButton()
// btnSettings.setTitle("Settings", for: .normal)
btnSettings.setImage(#imageLiteral(resourceName: "star-in-circle"), for: .normal)
btnSettings.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
btnSettings.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
btnSettings.contentMode = .scaleAspectFit
btnSettings.addTarget(self, action: #selector(openSettings), for: .touchUpInside)
btnSettings.translatesAutoresizingMaskIntoConstraints = false
// Text Label
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.clear
textLabel.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.font = UIFont.boldSystemFont(ofSize: 18)
textLabel.text = "Settings"
textLabel.textAlignment = .center
// Stack View
let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.vertical
stackView.distribution = UIStackViewDistribution.equalSpacing
stackView.alignment = UIStackViewAlignment.center
stackView.spacing = 1.0
stackView.addArrangedSubview(btnSettings)
stackView.addArrangedSubview(textLabel)
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)
// Constraints
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
Update / Solved Question 1
I needed to use the button.setBackgroundImage() in order for the button title to show up with the image.
btnSettings.setBackgroundImage(#imageLiteral(resourceName: "star-in-circle"), for: .normal)
btnSettings.setTitle("Button Title", for: .normal)
btnSettings.backgroundColor = UIColor.white
Of course, UIButton can have both an image or/and text. You can use:
button.setImage(image: UIImage?, for: UIControlState)
button.setTitle(title: String?, for: UIControlState)
Create a function that will return UIButton and do something like that:
let button = generateButton()
stackView.addArrangedSubview(button)

Resources