Can someone tell my why this code does not autosize the text in the descLabel? I tried to set the numberOfLines to 0 and I set a lineBreakMode but this pretty much does nothing to solve my problem. Is this approach not possible in a ViewController or do I do something completely wrong?
class SingleEventViewController: UIViewController {
var thisEvent: Event
var eventDescription: String?
let descLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 16)
label.text = "Beschreibung"
label.textColor = .black
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
return label
}()
let participateButton: UIButton = {
let button = UIButton()
button.backgroundColor = CalendarSettings.Colors.buttonBG
button.setTitle("Teilnehmen", for: .normal)
button.setTitleColor(CalendarSettings.Colors.darkRed, for: .normal)
return button
}()
//MARK: - Init & View Loading
init(event: Event) {
thisEvent = event
super.init(nibName: nil, bundle: nil)
setupDefaultValues()
}
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
applyDefaultValues()
setupViews()
confBounds()
}
//MARK: - Setup
func setupDefaultValues() {
eventDescription = thisEvent.eventDescription
}
func applyDefaultValues() {
descLabel.text = eventDescription
}
func setupViews() {
view.addSubview(descLabel)
view.addSubview(participateButton)
let tabbarHeight = self.tabBarController?.tabBar.frame.height ?? 0
descLabel.anchor(top: titleLabel.bottomAnchor, left: view.leftAnchor, bottom: nil, right: nil, paddingTop: 5, paddingLeft: 10, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
participateButton.anchor(top: nil, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: tabbarHeight, paddingRight: 0, width: 0, height: 50)
}
To make it autoresize you must give it a left/leading and right/trailing constraints , or a fixed width
descLabel.anchor(top: titleLabel.bottomAnchor, left: view.leftAnchor, bottom: nil, rightview.rightAnchor, paddingTop: 5, paddingLeft: 10, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
If it is the font size you are trying to change so that it fits in the label then try adjustFontSizeToWidth, but if it is the label you wish to resize try sizeToFit().
Related
I have created a UIScrollView inside of a UIViewController. I have added a UIView inside of my UIScrollView with one label inside of the UIView. The plan is to eventually add 3 very large UIButtons that is why I need a scroll view. I have not used storyboard and it is done all programmatically. I cannot get the UIScrollView to work.
class ChooseCategoryPostViewController: UIViewController, UIScrollViewDelegate {
let scrollView: UIScrollView = {
let sv = UIScrollView()
sv.backgroundColor = .green
return sv
}()
let myView: UIView = {
let view = UIView()
view.backgroundColor = .red
return view
}()
let test: UILabel = {
let label = UILabel()
label.text = "test label"
label.font = UIFont.boldSystemFont(ofSize: 15)
label.textAlignment = .center
return label
}()
override func viewDidLoad() {
view.addSubview(scrollView)
scrollView.addSubview(myView)
scrollView.anchor(top: topTitle.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 200, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: view.frame.width, height: 200)
myView.anchor(top: scrollView.topAnchor, left: scrollView.leftAnchor, bottom: scrollView.bottomAnchor, right: nil, paddingTop: 0, paddingLeft: 10, paddingBottom: 0, paddingRight: 0, width: 1700, height: 200)
myView.addSubview(test)
test.anchor(top: myView.topAnchor, left: nil, bottom: nil, right: myView.rightAnchor, paddingTop: 20, paddingLeft: 0, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)
}
override func viewDidLayoutSubviews() {
scrollView.isScrollEnabled = true
// Do any additional setup after loading the view
scrollView.contentSize = CGSize(width: view.frame.width, height: 200)
}
You need to make sure that the width of the scroll view contentSize is greater than the width of the scroll view itself. Something as simple as the following should cause horizontal scrolling to happen:
override func viewDidLayoutSubviews() {
scrollView.isScrollEnabled = true
// Do any additional setup after loading the view
scrollView.contentSize = CGSize(width: view.frame.width * 2, height: 200)
}
Once my UIButton is pressed, I want to change the text of my UILabels. Right now when the button is pressed it transitions to a new ViewController with the same background and same theme, just with different text. I figure it is not the best approach. I cannot access my UILables outside of my function setUpView(). What is the best approach to do this.
#objc func buttonTapped(_ sender: UIButton){
//this is where I will change my text. myLabel.text = "new text"
let modalViewController = PageTwoViewController()
modalViewController.modalPresentationStyle = .overCurrentContext
present(modalViewController, animated: false)
}
func setUpView(){
let headerView = UIView()
headerView.backgroundColor = UIColor.rgb(red: 235, green: 248, blue: 242)
view.addSubview(headerView)
headerView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 150, paddingLeft: 20, paddingBottom: 150, paddingRight: 20, width: 0, height: 0)
let myLabel = UILabel()
myLabel.text = "Rate your xxxxx"
myLabel.textColor = UIColor.rgb(red: 0, green: 48, blue: 51)
myLabel.textAlignment = .left
myLabel.numberOfLines = 0
headerView.addSubview(myLabel)
myLabel.font = .systemFont(ofSize: 32)
myLabel.anchor(top: headerView.topAnchor, left: headerView.leftAnchor, bottom: nil, right: headerView.rightAnchor, paddingTop: 150, paddingLeft: 30, paddingBottom: 0, paddingRight: 40, width: 0, height: 0)
let steps = UILabel()
steps.text = "1 of 3"
steps.textColor = UIColor.rgb(red: 0, green: 48, blue: 51)
headerView.addSubview(steps)
steps.font = .systemFont(ofSize: 14)
headerView.addSubview(steps)
steps.anchor(top: nil, left: headerView.leftAnchor, bottom: myLabel.topAnchor, right: nil, paddingTop: 0, paddingLeft: 30, paddingBottom: 10, paddingRight: 0, width: 0, height: 0)
let button = UIButton(type: .system)
button.setTitle("Next", for: .normal)
button.layer.cornerRadius = 30
button.backgroundColor = UIColor.white
button.setTitleColor(UIColor.rgb(red: 0, green: 48, blue: 51), for: .normal)
button.layer.borderWidth = 1.7
button.layer.borderColor = UIColor.black.cgColor
button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
headerView.addSubview(button)
button.anchor(top: nil, left: headerView.leftAnchor, bottom: headerView.bottomAnchor, right: headerView.rightAnchor, paddingTop: 0, paddingLeft: 25, paddingBottom: 30, paddingRight: 25, width: 0, height: 60)
}
override func viewDidLoad() {
setUpView()
super.viewDidLoad()
}
You have to declare the variables globally and then change the text.
class TestViewController: UIViewController {
private var myButton : UIButton = {
let button = UIButton()
button.backgroundColor = .red
return button
}()
private var myLabel: UILabel = {
let label = UILabel()
return label
}()
func setupView() {
myButton.setTitle("My Button", .normal) //You can do it like this
myLabel.text = "This is my text"
}
}
You can declare your labels globally in your view controller and then you can use any where in view controller as follow:
let myLabel: UILabel = {
let label = UILabel()
return label
}()
class ListCell: UICollectionViewCell {
let snapshotTitle: UILabel = {
let label = UILabel()
label.attributes(text: "Title", textColor: .white, alignment: .left, font: Fonts.rubikMedium, size: 15, characterSpacing: -0.05, backgroundColor: nil)
return label
}()
let snapshotOne: UILabel = {
let label = UILabel()
label.attributes(text: "Item 1", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotTwo: UILabel = {
let label = UILabel()
label.attributes(text: "Item 2", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotThree: UILabel = {
let label = UILabel()
label.attributes(text: "Item 3", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotFour: UILabel = {
let label = UILabel()
label.attributes(text: "Item 4", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotContainer: UIView = {
let view = UIView()
view.backgroundColor = .white
view.layer.cornerRadius = 12
return view
}()
let snapshotGradientBackground: UIImageView = {
let imageView = UIImageView()
imageView.image = #imageLiteral(resourceName: "itemCellBackgroundPink")
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = 12
imageView.clipsToBounds = true
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(snapshotGradientBackground)
snapshotGradientBackground.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)
contentView.addSubview(snapshotContainer)
snapshotContainer.setAnchors(top: contentView.topAnchor, paddingTop: 45, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)
contentView.addSubview(snapshotTitle)
snapshotTitle.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: snapshotContainer.topAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 12, right: contentView.rightAnchor, paddingRight: 12, width: 0, height: 0)
contentView.addSubview(snapshotOne)
snapshotOne.setAnchors(top: snapshotContainer.topAnchor, paddingTop: 18, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotTwo)
snapshotTwo.setAnchors(top: snapshotOne.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotThree)
snapshotThree.setAnchors(top: snapshotTwo.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotFour)
snapshotFour.setAnchors(top: snapshotThree.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I am using a completely programmatic approach to this app
To help understand this code better, I used extensions for UILabel and UIView:
".attributes" specifies text, text color, text alignment, font, text size, and background color
".setAnchors" specifies autolayout constraints
Instead of adding each of these labels (snapshotOne, snapshotTwo, snapshotThree, snapshotFour) manually, how would I iterate over a list of items and set the label to that item? Currently, I am just creating separate closures for each item and then adding them in one by one. If it helps, the maximum amount of items I want to show is four (first four items in the list of items).
Here is an image to show what the current code does:
This is a huge question that I have, and any help is very much appreciated. I am fairly new to Swift programming, so feel free to point out any other concerns in my code if you see any. Thank you!
For the 4 snapshot labels, you can put them in an array:
let snapshotLabels = (1...4).map { number in
let label = UILabel()
label.attributes(text: "Item \(number)", // note the use of "number" here
textColor: Colors.appDarkGrey,
alignment: .left,
font: Fonts.rubikRegular,
size: 12,
characterSpacing: -0.04,
backgroundColor: nil)
return label
}
For the layout, you could use a UIStackView or a UITableView, depending on how you want it to look when the number of items is fewer than 4.
With UIStackView, you could do
let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
stackView.setAnchors(...)
stackView.axis = .vertical
stackView.alignment = .leading
stackView.distribution = .fillEqually
for label in snapshotLabels {
stackView.addArrangedSubview(label)
}
I have created 5 custom buttons all in code, and they all show up perfectly; however, for some reason, there is no response when tapped like they are inactive. I have added the subviews in my ViewDidLoad and coded the constraints in a separate function that's not important I don't believe to this so let me know if that's needed to better your understanding.
The code:
let backgroundImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.layer.masksToBounds = true
return imageView
}()
let transparentView: UIView = {
let view = UIView()
view.backgroundColor = UIColor.black
view.backgroundColor = view.backgroundColor?.withAlphaComponent(0.5)
return view
}()
let button1: UIButton = {
let button = UIButton(type: .custom)
button.addTarget(self, action: #selector(button1Pressed), for: .touchUpInside)
button.setImage(UIImage(named: "button"), for: .normal)
button.isUserInteractionEnabled = true
return button
}()
override func viewDidLoad() {
super.viewDidLoad()
addSubviews()
setupViewConstraints()
}
func addSubviews() {
self.view.addSubview(backgroundImageView)
backgroundImageView.addSubview(transparentView)
transparentView.addSubview(button1)
}
func setupViewConstraints() {
backgroundImageView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
transparentView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
button1.anchor(top: nil, left: nil, bottom: view.bottomAnchor, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 20, paddingRight: 0, width: 80, height: 80)
button1.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}
#objc func button1Pressed() {
print("Button1 pressed")
}
By default, user interaction is disabled in UIImageView instances. And when a superview's user interaction is disabled, its subviews can't receive the user interaction, even if you have set button.isUserInteractionEnabled = true
So add imageView.isUserInteractionEnabled = true in backgroundImageView closure
let backgroundImageView: UIImageView = {
let imageView = UIImageView()
imageView.isUserInteractionEnabled = true
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.layer.masksToBounds = true
return imageView
}()
Introduction
I created a button and added subviews to it / gave it a custom look.
As subclassing buttons is a lot of pain, I decided to do it (yeah, I know it's bad) inside my view controller and creating an extension for UIButton which styles create buttons.
The button looks like this:
I set up the subviews as follows:
func styleCreateButton(serviceFee: Float) {
let feeLabel: DefaultLabel = {
let lbl = DefaultLabel(labelFont: UIFont(name: "MyCustomFont", size: 12)!, labelTextColor: ColorCodes.textSuperLightGray, labelText: "$\(serviceFee) Service Fee")
return lbl
}()
let createLabel: DefaultLabel = {
let lbl = DefaultLabel(labelFont: UIFont(name: "MyCustomFont", size: 15)!, labelTextColor: .white, labelText: "Create")
return lbl
}()
let arrowRight: UIButton = {
let btn = UIButton(type: .system)
btn.setImage(UIImage(named: "left-arrow")?.rotate(radians: CGFloat(180).degreesToRadians).resizedImage(newSize: CGSize(width: 20, height: 20)).withRenderingMode(.alwaysTemplate), for: .normal)
btn.contentMode = .center
btn.tintColor = .white
return btn
}()
self.addSubview(feeLabel)
feeLabel.anchor(top: nil, left: self.leftAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 16, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
feeLabel.sizeToFit()
feeLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
self.addSubview(arrowRight)
arrowRight.anchor(top: nil, left: nil, bottom: nil, right: self.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 16, width: 20, height: 20)
arrowRight.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
self.addSubview(createLabel)
createLabel.anchor(top: nil, left: nil, bottom: nil, right: arrowRight.leftAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 12, width: 0, height: 0)
createLabel.sizeToFit()
createLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
}
The button itself was declared as follows:
private lazy var createButton: UIButton = {
let btn = UIButton(type: .system)
btn.backgroundColor = ColorCodes.logoPrimaryColor
btn.layer.shadowOffset = CGSize(width: 0, height: 5)
btn.layer.shadowColor = UIColor.black.cgColor
btn.layer.shadowOpacity = 0.2
btn.layer.shadowRadius = 5
return btn
}()
Also, the button has a target and I have no idea why it does not highlight in the typical iOS way when clicking. Right now, the handler function gets called, but the button does not highlight.
I would appreciate any help :)
try to do this
class HighlightedButton: UIButton {
override var isHighlighted: Bool {
didSet {
backgroundColor = isHighlighted ? .blue : .white
}
}
}