在 Swift 4 中以编程方式将 UIImageView、UILabel 添加到 UIStackView

Question

我正在尝试创建一组UIImageView ， UILabel并像这样以编程方式添加到UIStackView 。

var someLetters: [Int: String] = [0:"g",1:"n",2:"d"]

let stackView1 = UIStackView(arrangedSubviews: createLetters(someLetters))
someScrollView.addSubview(stackView1)

func createLetters(_ named: [Int: String]) -> [UIView] {
    return named.map { name in
        let letterImage = UIImageView()
        letterImage.image = UIImage(named: "\(name.key)")

        let letterLabel = UILabel()
        letterLabel.text = name.value

        let subView = UIView()
        subView.addSubview(letterLabel)
        subView.addSubview(letterImage)

        return subView
    }
}

UIStackView的arrangedSubviews UIStackView只接受UIView作为参数，所以我创建了一个额外的UIView作为UILabel和UIImageView的容器。 没有编译错误，但在屏幕上看不到任何 UI 元素。

我在这里做错了什么？

Answer 1

添加一些约束

 stackView1.alignment = .center
        stackView1.distribution = .fillEqually
        stackView1.axis = .vertical
        stackView1.spacing = 10.0
        stackView1.translatesAutoresizingMaskIntoConstraints = false

        let leading = NSLayoutConstraint(item: stackView1, attribute: .leading, relatedBy: .equal, toItem: someScrollView, attribute: .leading, multiplier: 1, constant: 5)
        let trailing = NSLayoutConstraint(item: stackView1, attribute: .trailing, relatedBy: .equal, toItem: someScrollView, attribute: .trailing, multiplier: 1, constant: 5)

        let height = NSLayoutConstraint(item: stackView1, attribute: .height, relatedBy: .equal, toItem: someScrollView, attribute: .height, multiplier: 0.8, constant: 50)

        let alignInCenter = NSLayoutConstraint(item: stackView1, attribute: .centerX, relatedBy: .equal, toItem: someScrollView, attribute: .centerX, multiplier: 1, constant: 1)
        let alignInCenterY = NSLayoutConstraint(item: stackView1, attribute: .centerY, relatedBy: .equal, toItem: someScrollView, attribute: .centerY, multiplier: 1, constant: 1)

        someScrollView.addSubview(stackView1)
        NSLayoutConstraint.activate([alignInCenter,alignInCenterY,leading, trailing, height])

并为字母和 ImageView 添加一些约束

 func createLetters(_ named: [Int: String]) -> [UIView] {
        return named.map { name in
            let letterImage = UIImageView()
            letterImage.image = UIImage(named: "\(name.key)")
            letterImage.backgroundColor = UIColor.gray


            let letterLabel = UILabel()
            letterLabel.text = name.value
            letterLabel.backgroundColor = UIColor.green

            let stackView = UIStackView(arrangedSubviews: [letterLabel, letterImage])
            stackView.alignment = .center
            stackView.distribution = .fillEqually
            stackView.axis = .horizontal
            let widht = NSLayoutConstraint(item: letterImage, attribute: NSLayoutAttribute.width, relatedBy: .equal, toItem: stackView, attribute: .width, multiplier: 1, constant: 100)
            let height = NSLayoutConstraint(item: letterImage, attribute: NSLayoutAttribute.height, relatedBy: .equal, toItem: stackView, attribute: .height, multiplier: 1, constant: 100)
            NSLayoutConstraint.activate([widht, height])
            return stackView
        }
    }

但我不确定您在 stackView 中寻找的是什么轴和什么样的分布。 此代码缺少一些约束，因此您必须识别并添加它们，以便布局中没有歧义

Answer 2

首先，尝试将UILabel和UIImageView添加到故事板中的堆栈视图中。 在这里您可以看到我正在使用包含在垂直堆栈视图中的水平堆栈视图。 从这里您可以看到在代码中创建相同约束所需的约束。

Answer 3

更新代码为：

func createLetters(_ named: [Int: String]) -> [UIView] { return named.map { name in let letterImage = UIImageView(frame: CGRect(x: 0, y: name.key*10, width: 20, height: 20)) letterImage.image = UIImage(named: "(name.key)") letterImage.backgroundColor = .green

        let letterLabel = UILabel(frame: CGRect(x: 30, y: name.key*10, width: 20, height: 20))
        letterLabel.text = name.value
        letterLabel.backgroundColor = .red

        let stackView   = UIStackView(frame: CGRect(x: 0, y:name.key*30, width: 100, height: 50))
        stackView.axis  = UILayoutConstraintAxis.vertical
        stackView.distribution  = UIStackViewDistribution.equalSpacing
        stackView.alignment = UIStackViewAlignment.center
        stackView.spacing   = 16.0

        stackView.addArrangedSubview(letterImage)
        stackView.addArrangedSubview(letterLabel)

        return stackView
    }
}

这将返回 3 个堆栈视图，因为 someLetters 数组计数为 3。将其称为

self.tview.addSubview(createLetters(someLetters)[0])
self.tview.addSubview(createLetters(someLetters)[1])
self.tview.addSubview(createLetters(someLetters)[2])

如果您只获得一个具有相同代码的堆栈视图标签和图像，则仅传递一个参数。