在 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])

如果您只獲得一個具有相同代碼的堆棧視圖標簽和圖像，則僅傳遞一個參數。