insertSubview() is working on one UIView in UIStackView, But not on adjacent view

huangapple go评论71阅读模式
英文:

insertSubview() is working on one UIView in UIStackView, But not on adjacent view

问题

以下是您要翻译的代码部分:

extension UIView {
    
    func backgroundImage(image: String){
        let background = UIImage(named: image)
        
        var imageView : UIImageView!
        imageView = UIImageView(frame: self.frame)
        print(self.frame.origin.x)
        imageView.contentMode =  UIView.ContentMode.scaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = background
        imageView.center = self.center
        self.insertSubview(imageView, at: 0)
    }
}

private func loadViews() {
    leftCardView.backgroundImage(image: "green-card")
    rightCardView.backgroundImage(image: "purple-card")
}

loadViews()  viewDidAppear() 中调用。

希望这能帮助您解决问题。

英文:

I am working on autolayouts in storyboard, I have two adjacent UIViews in a single UIStackView. I need to insert image in both UIView background.

Problem is that background image is showing in left UIView but not in right UIView. Below is the code.

extension UIView {
    
    func backgroundImage(image: String){
        let background = UIImage(named: image)
        
        var imageView : UIImageView!
        imageView = UIImageView(frame: self.frame)
        print(self.frame.origin.x)
        imageView.contentMode =  UIView.ContentMode.scaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = background
        imageView.center = self.center
        self.insertSubview(imageView, at: 0)
    }
}

private func loadViews() {
        leftCardView.backgroundImage(image: "green-card")
        rightCardView.backgroundImage(image: "purple-card")
    }

and loadViews() is called in viewDidAppear().

Below are the images.
insertSubview() is working on one UIView in UIStackView, But not on adjacent view

insertSubview() is working on one UIView in UIStackView, But not on adjacent view

You can see that, in the View Inspector, right UIView (Purple View) background is absent. I have searched a lot, but didn't come to any fix.

答案1

得分: 1

这一行存在问题:imageView.center = self.center。你正在将imageView的中心(在UIView坐标中)设置为UIView的中心(在UIStackView坐标中)。按照@HangarRash的建议操作:将imageView的frame设置为self.bounds,并且不要设置中心。

let imageView = UIImageView(frame: self.bounds)
imageView.center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)

这里有一张图来解释。由于leftCardView和rightCardView是UIStackView的子视图,它们的中心相对于堆栈视图的原点。在我的示例中,中心点(x,y)=(64,64)和(232,64)分别对应左侧和右侧卡片视图。由于imageViews是UIView的子视图,它们的中心相对于UIView的原点。左侧imageView没问题,但在你的原始代码中,右侧imageView被放置在屏幕外。

insertSubview() is working on one UIView in UIStackView, But not on adjacent view

为了修复这个问题,使用self.bounds.width / 2 = 64和self.bounds.height / 2 = 64来为两个卡片视图的imageView放置在它们的UIView的中心。

英文:

The problem is with this line: imageView.center = self.center. You are setting the imageView's center (in UIView coordinates) to the UIView's center (in UIStackView coordinates). Do what @HangarRash suggested: set imageView's frame to self.bounds, and don't set the center.

let imageView = UIImageView(frame: self.bounds)
imageView.center = self.center <- remove this

Or, set the center like this:

imageView.center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)

Here's a diagram to explain. Since leftCardView and rightCardView are subviews of UIStackView, their center's are relative to the stack view's origin. In my example, center (x, y) = (64, 64) and (232, 64) for left and right card views. Since the imageViews are subviews of the UIViews, their centers are relative to the UIView's origins. The left imageView is ok, but the right imageView was placed off-screen in your original code.

insertSubview() is working on one UIView in UIStackView, But not on adjacent view

For the fix, self.bounds.width / 2 = 64, and self.bounds.height / 2 = 64, for both card views, placing the imageViews in the center of their UIViews.

huangapple
  • 本文由 发表于 2023年5月30日 01:46:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76359371.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定