2

我正在尝试使用 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

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

谢谢。

4

1 回答 1

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
        }
    }
于 2020-02-18T02:23:57.103 回答