I am having problems with setting my height and width constraints for my UIButton. I have no idea why this code is not working:
let wishButton: UIButton = {
let v = UIButton()
v.setImage(UIImage(named: "wishButton"), for: .normal)
v.translatesAutoresizingMaskIntoConstraints = false
v.addTarget(self, action: #selector(wishButtonTapped), for: .touchUpInside)
return v
}()
These are my constraints:
wishButton.centerXAnchor.constraint(equalTo: popUpView.centerXAnchor).isActive = true
wishButton.centerYAnchor.constraint(equalTo: popUpView.centerYAnchor, constant: 150).isActive = true
wishButton.heightAnchor.constraint(equalToConstant: 100).isActive = true
wishButton.widthAnchor.constraint(equalToConstant: 100).isActive = true
This is how it looks at the moment:
It's weird because the other two constraints are working just fine. Probably just a stupid mistake but I am quite new and grateful for every help :)
Constraints have no issues. The issue is with the image. Your image is not big enough to fill the frame. You can set the .setBackgroundImage of the button to make it automatically scalable.
v.setBackgroundImage(UIImage(named: "wishButton"), for: .normal)
or you can make the content Alignment equal to .fill on both directions.
One thing I noticed is it doesn't look like you have set the frame of the button.
Try adding this line after you initialize the button:
v.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
I'm not sure if it is required but if your button isn't showing up at all, this may fix the issue
Add this to your UIButton initialisation, it will work
v.contentVerticalAlignment = .fill
v.contentHorizontalAlignment = .fill
It will scale your image.
let wishButton: UIButton = {
let v = UIButton()
v.setImage(UIImage(named: "wishButton"), for: .normal)
v.translatesAutoresizingMaskIntoConstraints = false
v.contentVerticalAlignment = .fill
v.contentHorizontalAlignment = .fill
v.addTarget(self, action: #selector(wishButtonTapped), for: .touchUpInside)
return v
}()
Related
UIButton title label has top and bottom padding, I want to remove padding.
Set UIButton content mode did not work.
Here is my code
lazy var button: UIButton = {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitleColor(ThemeColor.red, for: .normal)
button.setTitle("Push", for: .normal)
button.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)
button.backgroundColor = .blue
button.contentHorizontalAlignment = .fill
button.contentVerticalAlignment = .fill
button.contentMode = .scaleAspectFill
return button
}()
and it looks like
How can I remove the padding space!
As Matt pointed out, you can fix this by adjusting the button's contentEdgeInsets
However, one thing I noticed, if you set the contentEdgeInsets to 0 all around:
button.contentEdgeInsets = UIEdgeInsets(top: 0,
left: 0,
bottom: 0,
right: 0)
You still get the the vertical padding for some reason.
I remember seeing an answer which I cannot find now where it suggested to set an extremely small edge inset and this should work:
lazy var button: UIButton = {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitleColor(.red, for: .normal)
button.setTitle("Push", for: .normal)
button.backgroundColor = .blue
button.contentHorizontalAlignment = .fill
button.contentVerticalAlignment = .fill
button.contentMode = .scaleAspectFill
button.contentEdgeInsets = UIEdgeInsets(top: .leastNormalMagnitude,
left: .leastNormalMagnitude,
bottom: .leastNormalMagnitude,
right: .leastNormalMagnitude)
return button
}()
You can use UIButton.Configuration and then set its contentInsets to .zero
lazy var button: UIButton = {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
var configuration = UIButton.Configuration.plain()
configuration.background.backgroundColor = .blue
configuration.background.cornerRadius = 0
configuration.baseForegroundColor = .red
configuration.title = "Push"
configuration.contentInsets = .zero
button.configuration = configuration
return button
}()
You can use the button's configuration to get more precise control over its appearance like so:
lazy var myButton: UIButton = {
let newButton = UIButton()
newButton.translatesAutoresizingMaskIntoConstraints = false
newButton.contentMode = .scaleAspectFill
newButton.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)
// 'configurationUpdateHandler' property can be used to set appearance depending on its state
newButton.configurationUpdateHandler = { button in
switch button.state { // here i'll just use default so it's the same over all states
default:
button.configuration?.title = "Push"
button.configuration?.baseBackgroundColor = .blue
// remove padding here
button.configuration?.contentInsets.top = 0
button.configuration?.contentInsets.bottom = 0
}
}
return newButton
}()
Of course you don't need to use updateHandler, you can just access the configuration directly and just set it there
button.configuration?.contentInsets.top = 0
button.configuration?.contentInsets.bottom = 0
See if this solves the problem...
Really struggling to constrain my buttons.
All I want is do setup my 2 buttons to have a height of 35 and their width should be whatever they need. Right now it looks like this (left & right buttons):
This is how I set them up:
let communityButton: UIButton = {
let v = UIButton()
v.setImage(UIImage(systemName: "person.3.fill"), for: .normal)
v.tintColor = UIColor.darkCustom
v.imageView?.contentMode = .scaleAspectFill
v.contentHorizontalAlignment = .fill
v.contentVerticalAlignment = .fill
v.translatesAutoresizingMaskIntoConstraints = false
v.addTarget(self, action: #selector(communityButtonTapped), for: .touchUpInside)
return v
}()
let profileButton: UIButton = {
let v = UIButton()
v.setImage(UIImage(systemName: "person.fill"), for: .normal)
v.tintColor = UIColor.darkCustom
v.imageView?.contentMode = .scaleAspectFill
v.contentHorizontalAlignment = .fill
v.contentVerticalAlignment = .fill
v.translatesAutoresizingMaskIntoConstraints = false
v.addTarget(self, action: #selector(profileButtonTapped), for: .touchUpInside)
return v
}()
Constraints:
//contrain communityButton
communityButton.centerYAnchor.constraint(equalTo: bottomBar.centerYAnchor),
communityButton.centerXAnchor.constraint(equalTo: bottomBar.centerXAnchor, constant: -view.frame.width/3.5),
communityButton.heightAnchor.constraint(equalToConstant: 35),
// constrain profileButton
profileButton.centerYAnchor.constraint(equalTo: bottomBar.centerYAnchor),
profileButton.centerXAnchor.constraint(equalTo: bottomBar.centerXAnchor, constant: view.frame.width/3.5),
profileButton.heightAnchor.constraint(equalToConstant: 35),
What is the right way to constrain here?
You might need to let autoLayout know that you want width to be flexible. You can do that by adding this line on both of your button definitions: -
// Replace "myButton" with your buttons name in your case "v"
myButton.autoresizingMask = [.flexibleWidth]
Edits: -
Since you are using system images, if you want your button to look bigger then you have to increase the font size on your image configuration. Edit your images by adding configuration with your preferred font sizes.
For example: -
let communityButton: UIButton = {
let v = UIButton()
//----
// NB: - Change the font size for bigger icons and viceversa
let imageSymbolConfiguration = UIImage.SymbolConfiguration(pointSize: 50, weight: .regular, scale: .large)
v.setImage(UIImage(systemName: "person.3.fill", withConfiguration: imageSymbolConfiguration), for: .normal)
// -----
return v
}()
let profileButton: UIButton = {
let v = UIButton()
// ----
// NB: - Change the font size for bigger icons and viceversa
let imageSymbolConfiguration = UIImage.SymbolConfiguration(pointSize: 50, weight: .regular, scale: .large)
v.setImage(UIImage(systemName: "person.fill", withConfiguration: imageSymbolConfiguration), for: .normal)
// ----
return v
}()
Explanation:-
From the official documentation
"Symbol image configuration objects include details such as the point size, scale, text style, weight, and font to apply to your symbol image. The system uses these details to determine which variant of the image to use and how to scale or style the image."
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
I have this code below which creates a button in code and centers the button in the middle of its superview:
let cameraButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(named: "cam"), for: .normal)
button.setTitle("Take Pic", for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
return button
}()
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
view.addSubview(cameraButton)
cameraButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
cameraButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}
Everything is working fine (as in the button is being centered in the center of the view) but the titleLabel text is being cut off for some reason (shown in the picture below):
I thought buttons have an intrinsic width and height so why would the titleLabel be cut off here? Shouldn't the width just expand based on the content inside of it (the imageView as well as the label)? Can someone advise me a way to fix this?
Try with setting below attributes
cameraButton.titleLabel!.numberOfLines = 0
cameraButton.titleLabel!.adjustsFontSizeToFitWidth = true
cameraButton.titleLabel!.lineBreakMode = NSLineBreakMode.byWordWrapping
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)