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

MDCChipField Swift-滚动方向

1 个答案: