MDChipField Swift - 可滚动的方向

Question

我正在尝试使用 MDCChipField，它是 Swift 的材料设计组件。 我正在实现“输入芯片”类型，并且能够将输入的文本添加为​​带有

的芯片

let mdcSearchField = MDCSearchField()
mdcSearchField.addChip(chipView)

当芯片在 MDCChipField 中溢出时，它们会被添加到下一行。 如何将滚动方向设置为水平而不是垂直？

在链接中， https://material.io/design/components/chips.html#input-chips, 展示位置部分说明

输入芯片可以与其他组件集成。它们可以出现：

 - Inline with the text input cursor in a field
 - In a stacked list
 - In a horizontally scrollable list

如何在代码中实现水平滚动列表？

谢谢。

Answer 1

我的做法是这样的：

• 创建可滚动视图
• 为芯片之间的填充创建一个 10 的偏移量
• 向可滚动视图添加芯片
• 用声明的偏移量设置芯片的帧原点
• 将芯片的宽度加上偏移量加上初始偏移值（在本例中为 10）
• 增加可滚动视图的内容宽度，设置宽度为总宽度 偏移量
• （添加更多筹码/重复）

芯片去除（如果需要）

• 将初始偏移设置回 10
• 从父级可滚动视图中移除芯片
• 循环遍历子视图并再次为每个子视图设置偏移量
• 使用总偏移量设置可滚动视图的新宽度

这是 Swift 中的示例 配置初始布局

class ChipSample
{
    var tagXOffset = 10
    var tagPadding = 10
    func configureTagsView()
    {
        tagView = UIScrollView(frame: CGRect(x: 0, y: 120, width: view.bounds.width, height: 40))
        view.addSubview(tagView)
    }

添加芯片

    func addChip(name:String)
    {
        let chip = MDCChipView()
        chip.titleLabel.text = name
        chip.setTitleColor(.gray, for: .normal)
        chip.sizeToFit()
        chip.addTarget(self, action: #selector(removeChip), for: .touchUpInside)
        tagView.addSubview(chip)
        chip.frame.origin.x = tagXOffset
        chip.frame.origin.y = 0
        tagXOffset += tagPadding + chip.frame.width
        tagView.contentSize = CGSize(width: tagXOffset, height: tagViewHeight)
    }

取出芯片

    @objc func removeChip(sender: MDCChipView!)
    {
        tagXOffset = tagPadding
        sender.removeFromSuperview()
        for subview in tagView.subviews {
            subview.frame.origin.x = tagXOffset
            tagXOffset += tagPadding + subview.frame.width
        }
    }