Swift 背景图像没有拉伸到边界

Question

我目前正在尝试向导航栏添加背景图像，但背景图像本身并未拉伸以填充指定空间的边界（粉红色按钮应覆盖蓝色方块或至少接近相同大小)。

如何让背景图片拉伸/填充空间？

截图：

如何添加按钮：

        let newsButton = UIButton(type: .custom)
        newsButton.translatesAutoresizingMaskIntoConstraints = false
        newsButton.backgroundColor = .blue
        newsButton.setTitle(NSLocalizedString("News", comment: "News button"), for: .normal)
        newsButton.layer.cornerRadius = 7
        newsButton.titleLabel?.font = .systemFont(ofSize: 20)
        
        newsButton.addTarget(self, action: #selector(onClick(_:)), for: .touchUpInside)

       if let image = UIImage(named: "pink_button") {
            newsButton.setBackgroundImage(image, for: .normal)
        }
        
        NSLayoutConstraint.activate([
            newsButton.widthAnchor.constraint(equalToConstant: 128),
            newsButton.heightAnchor.constraint(equalToConstant: 43)
        ])
        
        navigationItem.titleView = newsButton

Answer 1

您的图像在“红色”形状周围有很多透明空间。

如果你用这张图片替换它（我剪掉了 alpha 区域）：

看起来像这样：

作为使用“拉伸图像”的替代方法，您可以使用此自定义视图（绘制您的形状）并将按钮嵌入为子视图：

class MyBottomShadowView: UIView {
    
    var radius: CGFloat = 8
    var primaryColor: UIColor = .red
    var shadowColor: UIColor = .gray
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        // background color needs to be .clear
        self.backgroundColor = .clear
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        var r: CGRect!
        var pth: UIBezierPath!
        
        // if rounded rect for "bottom shadow line"
        //  goes all the way to the top, we'll get
        //  anti-alias artifacts at the top corners
        // so, we'll make it slightly smaller and
        //  move it down from the top
        r = bounds.insetBy(dx: 0, dy: 2).offsetBy(dx: 0, dy: 2)
        
        pth = UIBezierPath(roundedRect: r, cornerRadius: radius)
        
        shadowColor.setFill()
        pth.fill()
        
        // "filled" rounded rect should be
        //  2-points shorter than height
        r = bounds
        r.size.height -= 2.0
        
        pth = UIBezierPath(roundedRect: r, cornerRadius: radius)
        
        primaryColor.setFill()
        pth.fill()
        
    }
    
}

然后您的设置变为：

    let newsButton = UIButton(type: .custom)
    newsButton.translatesAutoresizingMaskIntoConstraints = false
    newsButton.setTitleColor(.white, for: .normal)
    newsButton.setTitleColor(.lightGray, for: .highlighted)
    newsButton.setTitle(NSLocalizedString("News", comment: "News button"), for: .normal)
    newsButton.titleLabel?.font = .systemFont(ofSize: 20)

    // set button background to clear
    newsButton.backgroundColor = .clear

    newsButton.addTarget(self, action: #selector(onClick(_:)), for: .touchUpInside)
    
    // create "bottom shadow view"
    let shadView = MyBottomShadowView()
    
    // set radius, primary and shadow colors as desired
    shadView.radius = 12
    shadView.primaryColor = UIColor(red: 1.00, green: 0.25, blue: 0.40, alpha: 1.0)
    shadView.shadowColor = UIColor(red: 0.65, green: 0.20, blue: 0.30, alpha: 1.0)

    shadView.translatesAutoresizingMaskIntoConstraints = false
    shadView.addSubview(newsButton)
    
    NSLayoutConstraint.activate([
        shadView.widthAnchor.constraint(equalToConstant: 128),
        shadView.heightAnchor.constraint(equalToConstant: 43),
        
        newsButton.topAnchor.constraint(equalTo: shadView.topAnchor),
        newsButton.leadingAnchor.constraint(equalTo: shadView.leadingAnchor),
        newsButton.trailingAnchor.constraint(equalTo: shadView.trailingAnchor),
        newsButton.bottomAnchor.constraint(equalTo: shadView.bottomAnchor),
    ])
    
    navigationItem.titleView = shadView

它看起来像这样：