ios - MDChipField Swift - 可滚动的方向

Question

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

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

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

在链接中，
https://material.io/design/components/chips.html#input-chips ,
安置部分解释

Input chips can be integrated with other components. They can appear:

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

我如何在代码中做一个水平滚动的列表？

谢谢。

Answer 1

我的方法是这样的:

创建可 ScrollView

为芯片之间的填充创建一个 10 的偏移量

将筹码添加到可 ScrollView

用声明的偏移量设置芯片的帧原点

将芯片的宽度添加到偏移量加上初始偏移值(在本例中为 10)

增加可 ScrollView 的内容宽度，设置宽度为总
偏移量

(添加更多筹码/重复)

切屑去除(如果需要)

将初始偏移设置回 10

从父可 ScrollView 中移除芯片

循环遍历 subview 并再次为每个 subview 设置偏移量

使用总偏移量

设置可 ScrollView 的新宽度

这是 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
        }
    }