如何以编程方式正确设置 UISegmentedController 和 imageView？

Question

我正在尝试以编程方式创建 UISegmentedController 和 imageView。 ImageView 应该放在 UISegmentedController 的正下方，但它与 UISegmentedController 重叠。你能说我在约束方面做错了什么吗？

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
    
}

Answer 1

你的约束很好。请务必将imageView.clipsToBounds设置为true，否则图片内容会溢出。

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