自定义UIView中UILabel无法显示在UIImageView上方的问题

嘿，我看到你遇到的问题了——你的mainTital标签被mainImage盖住了，而且还有几个小细节也在拖后腿，咱们一步步来修复：

核心问题：子视图层级顺序错误 #

你在init方法里先添加了mainTital，然后才添加mainImage。在UIKit里，后添加的子视图会放在层级的上层，所以你的图片直接把标签给挡住了。调整添加顺序就能解决这个最关键的问题。

其他需要修正的细节 #

1. 错误的宽度约束：setUpTital里你用了self.frame.width来设置标签宽度，但在视图初始化阶段，frame的值可能还没确定（比如用Auto Layout的时候），应该用leading和trailing锚点来绑定到父视图，这样更可靠。
2. 阴影被裁剪：你给父视图设置了layer.masksToBounds = true，这个属性会把所有超出视图边界的内容（包括阴影）都切掉，所以你的阴影根本显示不出来，得把这个属性改成false。
3. 未使用的titalBackground：你声明了这个视图但没设置约束和样式，要么完善它的配置，要么暂时删掉它避免冗余。

修正后的完整代码 #

import UIKit
class IntroButton: UIView {
    let mainImage = UIImageView()
    let titalBackground = UIView() // 如果不需要可以删掉，或者下面添加约束配置
    let mainTital = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 调整顺序：先加图片，再加标签，这样标签在图片上层
        addSubview(mainImage)
        addSubview(titalBackground)
        addSubview(mainTital)
        setUpTital()
        setUpImage()
        setUpButton()
        // 如果需要用titalBackground，这里可以加setUpTitalBackground()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        addSubview(mainImage)
        addSubview(titalBackground)
        addSubview(mainTital)
        setUpTital()
        setUpButton()
        setUpImage()
    }
    
    func setUpButton() {
        layer.cornerRadius = 20
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowRadius = 20
        layer.shadowOpacity = 0.5 // 注意：opacity范围是0-1，100会被自动转为1，0.5效果更自然
        layer.shadowOffset = CGSize(width: 10, height: 10)
        layer.masksToBounds = false // 关闭裁剪，让阴影显示出来
    }
    
    override var intrinsicContentSize: CGSize{
        return CGSize(width: 200, height: 300)
    }
    
    func setUpImage() {
        mainImage.contentMode = .scaleAspectFill
        mainImage.translatesAutoresizingMaskIntoConstraints = false
        // 给图片单独设置圆角，因为父视图关闭了masksToBounds
        mainImage.layer.cornerRadius = 20
        mainImage.clipsToBounds = true
        NSLayoutConstraint.activate([
            mainImage.topAnchor.constraint(equalTo: self.topAnchor),
            mainImage.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            mainImage.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            mainImage.trailingAnchor.constraint(equalTo: self.trailingAnchor)
        ])
        mainImage.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        mainImage.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
    }
    
    func setUpTital() {
        mainTital.font = UIFont(name: "Futura", size: 25)
        mainTital.textColor = .white
        mainTital.translatesAutoresizingMaskIntoConstraints = false
        mainTital.textAlignment = .left
        mainTital.clipsToBounds = true
        // 用leading/trailing代替固定width，适配不同尺寸
        NSLayoutConstraint.activate([
            mainTital.heightAnchor.constraint(equalToConstant: 100),
            mainTital.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            mainTital.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            mainTital.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            mainTital.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        ])
    }
    
    // 如果需要使用titalBackground作为标签背景，可打开此方法注释
    // func setUpTitalBackground() {
    //     titalBackground.translatesAutoresizingMaskIntoConstraints = false
    //     titalBackground.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    //     titalBackground.layer.cornerRadius = 20
    //     NSLayoutConstraint.activate([
    //         titalBackground.leadingAnchor.constraint(equalTo: mainTital.leadingAnchor),
    //         titalBackground.trailingAnchor.constraint(equalTo: mainTital.trailingAnchor),
    //         titalBackground.topAnchor.constraint(equalTo: mainTital.topAnchor),
    //         titalBackground.bottomAnchor.constraint(equalTo: mainTital.bottomAnchor)
    //     ])
    // }
}

额外说明 #

• 调整了阴影的opacity值，因为UIKit中shadowOpacity的有效范围是0.0到1.0，设置为100会被自动转为1.0，阴影效果会过于浓重。
• 给mainImage单独设置了圆角和裁剪属性，因为父视图关闭了masksToBounds，这样图片才能保持圆角样式。
• 如果需要用titalBackground作为标签的半透明背景，记得打开注释里的配置方法，并且保持它的添加顺序在mainImage和mainTital之间，避免背景挡住标签。

内容的提问来源于stack exchange，提问作者Thomas Pigg