拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 Swift背景影像没有延伸到边界

Swift背景影像没有延伸到边界

白鹭 - 2022-02-11 2114 0 0

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

如何让背景影像拉伸/填充空间?

截屏: Swift 背景影像没有延伸到边界

我如何添加按钮:

        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

Swift 背景影像没有延伸到边界

uj5u.com热心网友回复:

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

如果你用这个影像替换它(我修剪掉了 alpha 区域):

Swift 背景影像没有延伸到边界

它看起来像这样:

Swift 背景影像没有延伸到边界

作为使用“拉伸影像”的替代方法,您可以使用此自定义视图(绘制您的形状)并将按钮嵌入为子视图:

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

它看起来像这样:

Swift 背景影像没有延伸到边界

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *