如何使用Swift编程以编程方式添加带有一些约束的图像视图？

Question

我是iOS开发新手。如果使用故事板，我可以在视图控制器中放置一个图片视图，就像这样： 我需要以编程方式创建类似的东西。

因此，我有一个名为RevealingSplashView的库自定义视图，但我需要将一个图像视图添加到该自定义UI视图中。我只知道如何添加图片视图，可能像这样：

let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)

但我不知道如何将约束设置为图像视图以：

a. 居中对齐到父视图的x轴

b. 相对于父视图的宽度比例为0.8

c. 高度约束=25

d. 底部对齐到安全区域=32

怎么做？

这是我在添加图像视图之前使用的代码：

let screenSize = UIScreen.main.bounds
            let iconWidth = (screenSize.width) * 0.8
            let iconHeight = iconWidth * 1 // ratio 1:1
            revealingSplashView = RevealingSplashView(iconImage: UIImage(named: "Loading Page Asset")!,iconInitialSize: CGSize(width: iconWidth, height: iconHeight), backgroundColor: AppColor.mainYellow.getUIColor())
            revealingSplashView.animationType = SplashAnimationType.twitter
            revealingSplashView.imageView?.contentMode = .scaleAspectFill


            // add loading indicator to RevealingSplashView Programatically
            revealingSplashViewIndicator.color = UIColor.white
            revealingSplashViewIndicator.frame = CGRect(x: 0.0, y: 0.0, width: 30.0, height: 30.0)
            revealingSplashViewIndicator.center =  CGPoint(x: self.view.center.x, y: self.view.center.y + (iconHeight/2) + 64 )
            revealingSplashView.addSubview(revealingSplashViewIndicator)
            revealingSplashViewIndicator.bringSubviewToFront(self.revealingSplashView)
            revealingSplashViewIndicator.startAnimating()

            let window = UIApplication.shared.keyWindow
            window?.addSubview(revealingSplashView)

- Agung Laksana

Answer 1

我建议使用锚点：

let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)

// you need to turn off autoresizing masks (storyboards do this automatically)
imageView.translatesAutoresizingMaskIntoConstraints = false

// setup constraints, it is recommended to activate them through `NSLayoutConstraint.activate`
// instead of `constraint.isActive = true` because of performance reasons
NSLayoutConstraint.activate([
    imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor),
    imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8),
    imageView.heightAnchor.constraint(equalToConstant: 25),
    imageView.bottomAnchor.constraint(equalTo: revealingSplashView.safeAreaLayoutGuide.bottomAnchor, constant: -32),
    ])

- Milan Nosáľ

---

很不幸，这导致我的应用程序崩溃：***由于未捕获的异常'NSGenericException'而终止应用程序，原因是：'无法激活约束，锚点为<NSLayoutYAxisAnchor:0x283c9b7c0 "UIImageView:0x104057cd0.bottom">和<NSLayoutYAxisAnchor:0x283c36e40 "UILayoutGuide:0x281e48620'UIViewSafeAreaLayoutGuide'.bottom">，因为它们没有共同的祖先。约束或其锚点是否引用了不同视图层次结构中的项目？这是非法的。' - undefined

@Alexa289 在激活约束之前，你需要将 revealingSplashView 添加为 self.view 的子视图。所以请确保在添加约束之前的某个地方调用 self.view.addSubview(revealingSplashView)。 - undefined

@Alexa289 我已经更新了答案。如果你对视图层次结构为什么不可能的其他问题有任何想法，请更新问题以反映出来。 - undefined

我尝试按照您的代码添加，像这样：https://i.stack.imgur.com/uiexP.png，现在不再崩溃了，但是我不知道为什么图片显示在屏幕顶部，就像这样：https://i.stack.imgur.com/8eepT.jpg。 - undefined

@Alexa289，你有为revealingSplashView设置约束吗？它也必须有约束...我假设你已经做过了...请更新问题以展示你想要如何约束revealingSplashView。 - undefined

Answer 2

为了以编程方式添加约束条件，您需要设置

imageView.translatesAutoresizingMaskIntoConstraints = false

然后你可以设置约束条件：

imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

如果您想激活约束条件，您需要进行设置。

isActive = true

如果您支持iOS < 11，则需要放置一个控件，因为您没有安全区域。

- Alastar

---

很不幸，这导致我的应用程序崩溃，错误信息为：*** Terminating app due to uncaught exception 'NSGenericException'，原因是：无法激活约束条件，锚点为<NSLayoutDimension:0x280d18f80 "UIImageView:0x10483ad70.width">和<NSLayoutDimension:0x280d18cc0 "RevealingSplashView.RevealingSplashView:0x1048648d0.width">，因为它们没有共同的祖先。约束条件或其锚点是否引用了不同视图层次结构中的项目？这是非法的。 - undefined

你是否将 revealingSplashView 添加到你的视图中了？ - undefined

Answer 3

revealingSplashView.addSubview(imageView)

imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.translatesAutoresizingMaskIntoConstraints = false

- iDevid