Set Constraints to Labels So That One is At Leading Side and The Other at Trailing Side in Swift-CodePudding

I am programmatically adding a label and a button in Swift. I want the label to be at leading side and the button at trailing side. This is what I did so far:

let view = UIView.init(frame: CGRect.init(x: 0, y: 0, width: view.frame.width, height: 50))
        view.clipsToBounds = true
        view.translatesAutoresizingMaskIntoConstraints = false
        let label = UILabel()
        label.text = "Top-rated experts near you"
        label.font = UIFont.systemFont(ofSize: 18, weight: .medium)
        label.textColor = .black
        label.contentMode = .left
        
        let button = UIButton()
        button.backgroundColor = .clear
        button.setTitle("See All", for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.contentMode = .right
        button.addTarget(self, action: #selector(buttonTapped(sender:)), for: .touchUpInside) 

        button.frame = CGRect.init(x: 100, y: 0, width: view.frame.width-25, height: view.frame.height-25)
        label.frame = CGRect.init(x: 10 , y: 0, width: view.frame.width-10, height: view.frame.height-10)

        view.addSubview(label)
        view.addSubview(button)

And this results in:

My desired result is:

I want see all to be at trailing side and the top-rated label at the leading side. How can I achieve it in Swift?

CodePudding user response：

Question is a little unclear, I think you are asking how to achieve the same layout with constraints instead of using frames?

Here is a rough sample of how to do it, you might need to tweak the constants:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
        
    let view = UIView(frame: CGRect.init(x: 0, y: 0, width: view.frame.width, height: 50))
        
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Top-rated experts near you"
    label.font = UIFont.systemFont(ofSize: 18, weight: .medium)
    label.textColor = .black
    label.contentMode = .left
        
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = .clear
    button.setTitle("See All", for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.contentMode = .right
    button.addTarget(self, action: #selector(buttonTapped(sender:)), for: .touchUpInside)
        
    view.addSubview(label)
    view.addSubview(button)
        
    NSLayoutConstraint.activate([
        label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
        label.trailingAnchor.constraint(equalTo: button.leadingAnchor, constant: 16),
        label.topAnchor.constraint(equalTo: view.topAnchor, constant: 16),
        label.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 16),
            
        button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 16),
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 16),
        button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 16)
    ])
        
    self.view.addSubview(view)
}

CodePudding user response：

override func viewDidLoad() {
    super.viewDidLoad()

    let label = UILabel()
    label.text = "Top-rated experts near you"
    label.font = UIFont.systemFont(ofSize: 21, weight: .medium)
    label.textColor = .black
    label.contentMode = .left
    
    let button = UIButton()
    button.backgroundColor = .clear
    button.setTitle("See All", for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.contentMode = .right
    button.addTarget(self, action: #selector(buttonTapped(sender:)), for: .touchUpInside)
    
    let stack = UIStackView(arrangedSubviews: [label, button])
    stack.axis = .horizontal
    stack.distribution = .fill
    stack.alignment = .center
    stack.spacing = 16
    stack.translatesAutoresizingMaskIntoConstraints = false
    
    view.addSubview(stack)
    
    let padding: CGFloat = 16
    let viewHeight: CGFloat = 50
    
    NSLayoutConstraint.activate([
        stack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: padding),
        stack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: padding),
        stack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 1-padding),
        stack.heightAnchor.constraint(equalToConstant: viewHeight)
    ])
}