KTTagsView

KTTagsView 提供了 Swift 中的 UIView 和协议，以帮助您将自定义视图作为 “标签” 显示。当您需要以 UIScrollView 的形式显示标签时，该库非常有用，因为它由一个 UIView 处理。

💡您可以使用 UICollectionView 和它的 UICollectionLayout 来显示标签，但鉴于在可滚动的元素内部还有一个可滚动的元素时，它并不适合处理它等... 的滚动问题。

功能

它还包含了一些样式属性

水平对齐：标签的水平对齐（left，center 或 right）
垂直对齐：标签的垂直对齐（top，center 或 bottom）。
标签间间隔：标签之间的最小间隔。

📱示例

💡要运行示例项目，请克隆仓库，pod install，并运行 iOS 应用。

安装

CocoaPods

首选安装方法是使用 CocoaPods。将以下内容添加到您的 Podfile

pod 'KTTagsView', '~> 1.0.1'

Carthage

对于 Carthage，将以下内容添加到您的 Cartfile 中：

github "iKiKi/KTTagsView"

用法

1) 实现您需要显示为标签的自定义视图（通常如此）。

它们只需遵守 TagSizable 协议。

public protocol TagSizable: class {
  associatedtype Tag
  static func preferredSize(with contentSize: CGSize, tag: Tag, at index: Int) -> CGSize
}

💡此协议允许您通过 associatedtype 操作表示标签的自定义类型。

以下是一个仅用 String 作为标签的示例

import KTTagsView

final class MyTagView: UIView {

  // Implement it as usual
}

// MARK: - TagSizable
extension MyTagView: TagSizable {
  
  static func preferredSize(with contentSize: CGSize, tag: String, at index: Int) -> CGSize {
    //TODO: return the size of your view from the tag
  }
}

⚠️确保返回的宽度不大于内容大小宽度。

2) 实现一个 TagsProvider 对象。该对象旨在持有您的标签数据和用于在 KTTagsView 中显示的图形上下文。

此协议非常简单。

public protocol TagsProvider: TagSizable {
  var tags: [Tag] { get }
  var horizontalAlignment: TagsView.HorizontalAlignment { get }
  var verticalAlignment: TagsView.VerticalAlignment { get }
  var minimumIntertagSpacing: CGFloat { get }
}

tags：保持标签数据的属性。
horizontalAlignment：标签的水平对齐方式（左、居中或右）。默认为 .left。
verticalAlignment：标签的垂直对齐方式（顶部、居中或底部）。默认为 .top。
minimumIntertagSpacing：标签之间的间距。

💡请注意，TagsProvider 本身是 TagSizable。实际上，预计该对象将直接返回视图提供的尺寸。

以下是一个名为 TagsViewModel 的对象示例（标签数据始终为 String）

import KTTagsView

final class TagsViewModel: TagsProvider {
  
  var tags: [String] {
    //TODO: return your 
  }
  
  var horizontalAlignment: TagsView.HorizontalAlignment = .left
  var verticalAlignment: TagsView.VerticalAlignment = .top
  var minimumIntertagSpacing: CGFloat = 8
  
  // MARK: - TagSizable
  static func preferredSize(with contentSize: CGSize, tag: String, at index: Int) -> CGSize {
    return MyTagView.preferredSize(with: contentSize, tag: tag, at: index)
  }
}

3) 创建符合 TagsViewDataSource 协议的对象。一种简单的方法是使用相同的 TagsProvider 对象。

预计 TagsProvider 将作为数据源。

public protocol TagsViewDataSource: class {
  func tagsView(_ tagsView: TagsView, sizeForTagAt index: Int) -> CGSize
  func tagsView(_ tagsView: TagsView, viewForTagAt index: Int) -> UIView
}

以下是一个名为 MyTagView 的对象的先前 TagsViewModel 示例

import KTTagsView

// MARK: - TagsViewDataSource
extension TagsViewModel: TagsViewDataSource {
  
  func tagsView(_ tagsView: TagsView, sizeForTagAt index: Int) -> CGSize {
    let tag = self.tags[index]
    return MyTagView.preferredSize(with: tagsView.bounds.size, tag: tag, at: index)
  }
  
  func tagsView(_ tagsView: TagsView, viewForTagAt index: Int) -> UIView {
    let tagView = MyTagView./*init()*/
    let tag = self.tags[index]
    //tagView.update(with: tag)
    return tagView
  }
}

4) 最后，将 TagsView 添加到您的 UICollectionViewCell、UITableViewCell 或任何其他父 UIView，并通过传递符合 TagsProvider 和 TagsViewDataSource 的对象调用 reloadData。

import KTTagsView

final class TagsCollectionViewCell: UICollectionViewCell {
  
  // MARK: Outlets

  @IBOutlet weak var ibTagsView: TagsView!
  
  // MARK: - Internal methods
  
  func update(with viewModel: TagsViewModel) {
    self.ibTagsView.reloadData(with: viewModel, dataSource: viewModel)
  }
}

许可协议

KTTagsView 在 MIT 许可下发布。有关详细信息，请参阅 LICENSE。

KTTagsView 1.0.1

KTTagsView 1.0.1

KTTagsView 1.0.1

KTTagsView

功能

📱示例

安装

CocoaPods

Carthage

用法

许可协议