How to set properly UISegmentedController and imageView programmatically?

Question

I'm trying to create UISegmentedController and imageView programmatically. ImageView should be placed right under UISegmentedController, but it overlaps UISegmentedController. Could you please say what did I wrong with constraints?

private let segmentedControlContainerView: UIView = {
    let containerView = UIView()
    containerView.backgroundColor = .clear
    containerView.translatesAutoresizingMaskIntoConstraints = false
    return containerView
}()

private let segmentedController: UISegmentedControl = {
    let segmentedControl = UISegmentedControl()
    let font = UIFont.systemFont(ofSize: 15, weight: .bold)
    segmentedControl.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.lightGray, NSAttributedString.Key.font: font], for: .normal)
    segmentedControl.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.white], for: .selected)
    segmentedControl.insertSegment(withTitle: "For You", at: 0, animated: true)
    segmentedControl.insertSegment(withTitle: "Favorites", at: 1, animated: true)
    segmentedControl.selectedSegmentIndex = 0
    segmentedControl.tintColor = UIColor.clear
    segmentedControl.translatesAutoresizingMaskIntoConstraints = false
    return segmentedControl
}()

private let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = #imageLiteral(resourceName: "wp")
    imageView.contentMode = .scaleAspectFill
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

private func setUI() {
    
    view.addSubview(segmentedControlContainerView)
    segmentedControlContainerView.addSubview(segmentedController)
    
    NSLayoutConstraint.activate([
        segmentedControlContainerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        segmentedControlContainerView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        segmentedControlContainerView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor),
        segmentedControlContainerView.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor),
        segmentedControlContainerView.heightAnchor.constraint(equalToConstant: 40)
    
    ])
    
    NSLayoutConstraint.activate([
        segmentedController.topAnchor.constraint(equalTo: segmentedControlContainerView.topAnchor),
        segmentedController.leadingAnchor.constraint(equalTo: segmentedControlContainerView.leadingAnchor),
        segmentedController.trailingAnchor.constraint(equalTo: segmentedControlContainerView.trailingAnchor),
        segmentedController.centerXAnchor.constraint(equalTo: segmentedControlContainerView.centerXAnchor),
        segmentedController.centerYAnchor.constraint(equalTo: segmentedControlContainerView.centerYAnchor)
    ])
    
    view.addSubview(imageView)
    imageView.topAnchor.constraint(equalTo: segmentedControlContainerView.bottomAnchor, constant: 25).isActive = true
    imageView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    imageView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    imageView.heightAnchor.constraint(equalToConstant: 40).isActive = true
    
}

score 2 · Answer 1 · answered Jun 27 '21 at 16:19

Your constraints are fine. Just make sure to set imageView.clipsToBounds to true, otherwise the image contents will overflow.

private let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = UIImage(named: "Image")
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true /// here!
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

How to set properly UISegmentedController and imageView programmatically?

1 Answers1