skip to Main Content

Currently i’m stuck at trying to make the UILabel on the right side to not get cutoff since there’s a space. I’m using stackView so that i can center both of the view easily. I thought of decoupled the topStack and editButton, but was just wondering if i could just stacked both instead

Can focus on viewDidLoad()

UI

enter image description here

Code

import UIKit

class ProfileViewController: UIViewController {

    private let profilePicture: UIImageView = {
       let image = UIImageView()
        image.contentMode = .scaleAspectFit
        image.translatesAutoresizingMaskIntoConstraints = false
        image.image = UIImage(named: "1")
        image.layer.cornerRadius = 50
        image.clipsToBounds = true
        return image
    }()
    
    private let editButton: UIButton = {
       let button = UIButton()
        let title = "EDIT PROFILE"
        let attributedString = NSAttributedString(string: title, attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 13)])
        button.setAttributedTitle(attributedString, for: .normal)
        button.setTitleColor(.gray, for: .normal)
        button.backgroundColor = .clear
        button.layer.borderColor = UIColor.lightGray.cgColor
        button.layer.borderWidth = 2.0 // set border width
        button.layer.cornerRadius = 20
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(editButtonTapped), for: .touchUpInside)
        
        return button
    }()
    
    private func makeTitle(numberTitleStr: String, titleStr: String) -> UIStackView {
        let numberTitle = UILabel()
        let title = UILabel()
        
        numberTitle.text = numberTitleStr
        title.text = titleStr
        
        numberTitle.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        numberTitle.textColor = .black
        title.font = UIFont.systemFont(ofSize: 14, weight: .medium)
        title.textColor = .gray
        
        let stackView = UIStackView(arrangedSubviews: [numberTitle, title])
        stackView.alignment = .leading
        stackView.axis = .horizontal
        stackView.spacing = 5
        return stackView
    }
    
    @objc func editButtonTapped() {
        print("Example")
    }
    
    func setupNavigation() {
        navigationItem.title = "Profile"
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .lightGray
        let titleAttribute = [NSAttributedString.Key.font:  UIFont.systemFont(ofSize: 16, weight: .semibold), NSAttributedString.Key.foregroundColor: UIColor.black]
        appearance.titleTextAttributes = titleAttribute
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
    }
       
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupNavigation()
        
        let friendsStackView = makeTitle(numberTitleStr: "0", titleStr: "friends")
        let matchesStackView = makeTitle(numberTitleStr: "0", titleStr: "matches")
        
        let topStack = UIStackView(arrangedSubviews: [friendsStackView, matchesStackView])
        topStack.translatesAutoresizingMaskIntoConstraints = false
        topStack.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        topStack.axis = .horizontal
        topStack.distribution = .equalCentering
        topStack.spacing = 5
        
        let mainStack = UIStackView(arrangedSubviews: [topStack, editButton])
        mainStack.translatesAutoresizingMaskIntoConstraints = false
        mainStack.axis = .vertical
        mainStack.spacing = 10

        view.backgroundColor = .white
        view.addSubview(profilePicture)
        view.addSubview(mainStack)
//        view.addSubview(topStack)
//        view.addSubview(editButton)
        
        NSLayoutConstraint.activate([
            profilePicture.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            profilePicture.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            profilePicture.widthAnchor.constraint(equalToConstant: 100),
            profilePicture.heightAnchor.constraint(equalToConstant: 100),
            
            mainStack.leadingAnchor.constraint(equalTo: profilePicture.trailingAnchor, constant: 30),
            mainStack.centerYAnchor.constraint(equalTo: profilePicture.centerYAnchor),
            
            editButton.heightAnchor.constraint(equalToConstant: 40),
            editButton.widthAnchor.constraint(equalToConstant: 120),
            
            
//            topStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 35),
//            topStack.leadingAnchor.constraint(equalTo: profilePicture.trailingAnchor, constant: 20),
//            editButton.topAnchor.constraint(equalTo: topStack.topAnchor, constant: 25),
//            editButton.leadingAnchor.constraint(equalTo: profilePicture.trailingAnchor, constant: 20),
           
        ])
        
    }
}

2

Answers


  1. You can add Width constraint to mainStack or Trailing constraint (Both will solve the problem):-

     1. mainStack.widthAnchor.constraint(equalToConstant: 140)
    
    OR
    
     2. mainStack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30),
    
    Login or Signup to reply.
  2. As Geoff Hackworth said, you need to set your mainStack.alignment to anything other than .fill because currently the editButton’s widthContrstraint is preventing the mainStack from giving more width to the topStack.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search