Ios 将项目水平附加到tableView单元格中,但不要让它们填满所有空间

Ios 将项目水平附加到tableView单元格中,但不要让它们填满所有空间,ios,swift,uitableview,Ios,Swift,Uitableview,我有一个我想要实现的特定设计,对我来说似乎并不复杂,但我正在努力实现它 首先,设计如下所示: 因此,我有一个项目的表视图,其中有一张图片,然后是一个标题,然后是三个项目的集合,这三个项目将是ImageView 所有这些都在一个单元格和stackView中 我尝试创建一个水平堆栈视图,并成功地正确地添加了我的项目,但它在设计方面出现了可怕的错误,因为我的ImageView一直水平延伸。我想这是不可能不拉伸这个项目 我还试图在表视图中添加一个集合视图,但发现这对于这样一个基本的东西来说是非常复杂的

我有一个我想要实现的特定设计,对我来说似乎并不复杂,但我正在努力实现它

首先,设计如下所示:

因此,我有一个项目的表视图,其中有一张图片,然后是一个标题,然后是三个项目的集合,这三个项目将是ImageView

所有这些都在一个单元格和stackView中

我尝试创建一个水平堆栈视图,并成功地正确地添加了我的项目,但它在设计方面出现了可怕的错误,因为我的ImageView一直水平延伸。我想这是不可能不拉伸这个项目

我还试图在表视图中添加一个集合视图,但发现这对于这样一个基本的东西来说是非常复杂的(我想应该是这样的)。然后,我就在这里

这是我的代码和我的困境:

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
    }

我被卡住了,时间太长了,不能做这么小的事情。我想我对自己不知道怎么做感到有点不安。

首先,如果它们是3个静态数量的图像,那么最好让它们在内部设计,并分别将图像URL分配给它们的输出

其次,对于您当前的工作,您需要添加一个宽度约束(关于高度,当它是水平堆栈时,它们将适合所有堆栈高度),如


首先,如果它们是3个静态数量的图像,那么最好将它们设置为内部设计,并将图像URL分别分配给它们的输出

其次,对于您当前的工作,您需要添加一个宽度约束(关于高度,当它是水平堆栈时,它们将适合所有堆栈高度),如


如果您最多有5名参与者,那么我建议您在水平堆栈视图中默认添加2个子视图:

  • 宽度约束>=5的空视图(称之为
    spaceview
  • “60%无”标签的固定宽度
  • 然后以编程方式
    在索引0处的水平堆栈视图中插入具有固定宽度和纵横比1:1的图像视图

    这样,如果只有1-2名参与者,则剩余空间将被
    spaceview
    占用,因为其宽度将大于5


    如果参与者超过5名,那么更好的选择是在水平堆栈视图中使用collectionview和uilabel。

    如果您最多有5名参与者,则我建议您在水平堆栈视图中默认添加2个子视图:

  • 宽度约束>=5的空视图(称之为
    spaceview
  • “60%无”标签的固定宽度
  • 然后以编程方式
    在索引0处的水平堆栈视图中插入具有固定宽度和纵横比1:1的图像视图

    这样,如果只有1-2名参与者,则剩余空间将被
    spaceview
    占用,因为其宽度将大于5


    如果参与者超过5人,然后,更好的选择是在水平堆栈视图中使用collectionview和uilabel。

    我已经尝试以这种方式添加约束,结果控制台中出现了大量约束错误消息+最后一个图像仍在拉伸。将分布设置为填充,并将StackView的对齐设置为前导我已经尝试以这种方式添加约束这导致控制台中出现大量约束错误消息+最后一个图像仍在拉伸。将stackView的“分布”设置为“填充”,并将“对齐”设置为“前导”
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true