如何以編程方式將 UIStackview 放入 Swift 中的 UIView 中

Question

我想將 5 個圖像的 Stackview 放入 UIView 中。 基本上我想要的是制作一個帶有陰影的圓形按鈕，並在按鈕內水平放置 5 個不同的小圖像。

我已經擁有的是一個視圖控制器，每個控制器都有一個聲明和設置 function。 我能夠制作 UIView。

這是我要實現的目標的圖像：

我該如何解決這個問題？

我已經有一些代碼：

private let btnUIView: UIView = {
        let btnUIView = UIView(frame: CGRect(x: 50, y: 50, width: 343, height: 77))
        btnUIView.layer.shadowColor = UIColor.black.cgColor
        btnUIView.layer.shadowOpacity = 0.5
        btnUIView.layer.shadowOffset = .zero
        btnUIView.layer.shadowRadius = 3
        btnUIView.backgroundColor = .white
        btnUIView.translatesAutoresizingMaskIntoConstraints = false
        btnUIView.layer.borderWidth = 0
        btnUIView.layer.borderColor = UIColor.gray.cgColor
        return btnUIView
    }()

 private let btnStackView: UIStackView = {
        let image = UIStackView()
        image.translatesAutoresizingMaskIntoConstraints = false
        image.distribution = .fillEqually
//        image.spacing = 60
        return image
    }()




func setupBtnView(){
        view.addSubview(btnUIView)
        btnUIView.addSubview(btnStackView)
        NSLayoutConstraint.activate([
            btnUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            btnUIView.topAnchor.constraint(equalTo: btnText.bottomAnchor, constant: 15),
            btnUIView.heightAnchor.constraint(equalToConstant: btnUIView.frame.height),
            btnUIView.widthAnchor.constraint(equalToConstant: btnUIView.frame.width),
        ])


let imgone = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgtwo = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgthree = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgfour = UIImageView(image: #imageLiteral(resourceName: "imgtst1"))
        let imgfive = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))




btnStackView.addArrangedSubview(imgone)
btnStackView.addArrangedSubview(imgtwo)
btnStackView.addArrangedSubview(imgthree)
btnStackView.addArrangedSubview(imgfour)
btnStackView.addArrangedSubview(imgfive)

imgone.contentMode = .scaleAspectFill
imgtwo.contentMode = .scaleAspectFill
imgthree.contentMode = .scaleAspectFill
imgfour.contentMode = .scaleAspectFill
imgfive.contentMode = .scaleAspectFill


imgone.clipsToBounds = true
imgtwo.clipsToBounds = true
imgthree.clipsToBounds = true
imgfour.clipsToBounds = true
imgfive.clipsToBounds = true
    }


func setupImages(){
        view.addSubview(btnStackView)
        NSLayoutConstraint.activate([
            btnStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            btnStackView.topAnchor.constraint(equalTo: btnUIView.bottomAnchor, constant: 20),
            btnStackView.widthAnchor.constraint(equalToConstant: btnStackView.frame.width)
        ])

我在應用程序中看到的是一個空的 UIView：

Answer 1

這似乎很簡單。 我花了大約兩分鍾的時間來編寫代碼：

這只是您所追求的粗略渲染，但它表明基本想法很簡單。 我所做的只是：

1. 創建外部視圖，配置圓角邊框，並將其添加為子視圖。

2. 創建堆棧視圖，將其配置為等間距等，並將其作為子視圖添加到外部視圖。

3. 創建五個帶有圖像的圖像視圖（這里只是圓圈）並將它們作為排列好的子視圖添加到堆棧視圖中。

從字面上看，我的viewDidLoad中只有 11 行代碼。

---

至於您的代碼（您現在已經顯示），主要問題可能是約束沒有意義。 這是我對您的代碼的更正（替換我自己的圓形圖像，用於測試目的）； 這是我的測試應用程序視圖 controller 的完整代碼：

private let btnUIView: UIView = {
    let btnUIView = UIView()
    btnUIView.layer.shadowColor = UIColor.black.cgColor
    btnUIView.layer.shadowOpacity = 0.5
    btnUIView.layer.shadowOffset = .zero
    btnUIView.layer.shadowRadius = 3
    btnUIView.backgroundColor = .white
    btnUIView.translatesAutoresizingMaskIntoConstraints = false
    btnUIView.layer.borderWidth = 0
    btnUIView.layer.borderColor = UIColor.gray.cgColor
    return btnUIView
}()
private let btnStackView: UIStackView = {
    let image = UIStackView()
    image.translatesAutoresizingMaskIntoConstraints = false
    image.distribution = .fillEqually
    image.alignment = .center
    return image
}()

override func viewDidLoad() {
    super.viewDidLoad()
    let r = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30))
    let im = r.image { _ in UIBezierPath.init(ovalIn: CGRect(x: 1, y: 1, width: 28, height: 28)).stroke() }

    let imgone = UIImageView(image: im)
    let imgtwo = UIImageView(image: im)
    let imgthree = UIImageView(image: im)
    let imgfour = UIImageView(image: im)
    let imgfive = UIImageView(image: im)
    
    btnStackView.addArrangedSubview(imgone)
    btnStackView.addArrangedSubview(imgtwo)
    btnStackView.addArrangedSubview(imgthree)
    btnStackView.addArrangedSubview(imgfour)
    btnStackView.addArrangedSubview(imgfive)
    
    setupBtnView()
}

func setupBtnView(){
    view.addSubview(btnUIView)
    btnUIView.addSubview(btnStackView)
    NSLayoutConstraint.activate([
        btnUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        btnUIView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40),
        btnUIView.heightAnchor.constraint(equalToConstant: 100),
        btnUIView.widthAnchor.constraint(equalToConstant: 300),
    ])
    NSLayoutConstraint.activate([
        btnStackView.leadingAnchor.constraint(equalTo: btnUIView.leadingAnchor),
        btnStackView.trailingAnchor.constraint(equalTo: btnUIView.trailingAnchor),
        btnStackView.topAnchor.constraint(equalTo: btnUIView.topAnchor),
        btnStackView.bottomAnchor.constraint(equalTo: btnUIView.bottomAnchor),
    ])
}

結果：