Append 項目水平放入 tableView 單元格，但使它們不會填滿所有空間

Question

我有一個想要實現的特定設計，它對我來說似乎並不復雜，但我正在努力實現它。

首先設計看起來像這樣：

所以，我有一個包含圖片的項目的表格視圖，然后是標題，然后是三個項目的集合，這些項目將是 ImageViews。

所有這些都在一個單元格和一個 stackView 內。

我試圖制作一個水平堆棧視圖，並且確實設法正確地 append 我的項目，但它在設計方面出現了可怕的錯誤，因為我的圖像視圖一直水平拉伸。 我想這是不可能不拉伸這些物品的。

我還嘗試在表格視圖中添加一個集合視圖，但發現對於這個基本的東西來說這是非常復雜的（我猜應該是這樣）。 然后，我來了。

這是我的代碼，我被困在哪里：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = debateList.dequeueReusableCell(withIdentifier: "itemsBox", for: indexPath) as! ItemBox
        
        // Make a variable with 3 participants
        let participants = tableView[indexPath.row].participants?.prefix(3)
        // iterate over them and adding them to anything that can be doable
        participants?.forEach { participant in
            let imageView = UIImageView()
            let imageUrl = URL(string: participant.imageURL)
            imageView.kf.setImage(with: imageUrl)
            // Here add item to something
        }
        
        return cell
    }

我被困住了，對於這么小的東西來說太久了。 我猜我對自己不知道該怎么做有點不高興。

Answer 1

首先，如果它們是 3 static 圖像數量，那么最好將它們放在設計內部並將圖像網址分別分配給它們的插座

其次，對於您當前的工作，您需要添加一個寬度約束（關於高度，當它是水平堆棧時，它們將適合所有堆棧高度），例如

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true

Answer 2

如果您最多有 5 個參與者，那么我建議您在水平堆棧視圖中默認添加 2 個子視圖：

1. 寬度約束 >= 5 的空視圖（稱為spaceview ）
2. "60 % no" UILabel 的固定寬度。

然后以編程insert image views with fixed width and aspect ratio 1:1 in horizontal stack view at index 0 。

這樣，如果只有 1-2 個參與者，那么剩余空間將被spaceview占用，因為它的寬度將大於 5。

如果參與者超過 5 個，那么更好的選擇是在水平堆棧視圖中使用帶有 uilabel 的 collectionview。