DCFilterView 0.3.0

DCFilterView 0.3.0

×

由 Vincent Berihuete 维护。

DCFilterView 0.3.0

  • 由
  • Vincent Berihuete

DCFilterView

一个友好的堆叠视图兼容的筛选视图，具有标签式外观。

filter view demo

该组件旨在涵盖类似筛选功能的解决方案，而不是完全更改视图控制器（VC）的类型，而是在同一 VC 中更改内容类型。

示例

要运行示例项目，请克隆仓库，然后首先在 Example 目录下运行 pod install。包含 UI 测试，所以只需运行 UI 测试即可看到效果，无需编写一行代码。

安装

DCFilterView 不通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中

pod 'DCFilterView', :git => 'https://github.com/vberihuete/DCFilterView.git'

如何做

设置好 cocoapods 并已从 git 中添加 DCFilterView pod 后，您只需在您想要使用筛选视图的视图控制器中导入它。

import DCFilterView

然后向您的视图控制器添加一个 Stack View，这将是你将存放内容和 DCFilterView 的视图。

@IBOutlet weak var containerSV: UIStackView!

您可以声明一个类型为 DCFilterView 的变量，这将创建一个筛选视图实例（或按您所愿！）

var filterView: DCFilterView!

然后，为了给您的 DCFilterView 提供一些结构，您有下面的初始化方法

filterView = DCFilterView(items: ["Popular", "Related", "Oldest"], color: .black, selectedColor: .red, selectedIndex: 1)

构造函数的属性如下

  • items：过滤器字符串数组
  • color：未选择过滤器的颜色
  • selectedColor：所选滤镜的颜色
  • selectedIndex：初始选中索引（基于items属性中的项目确定）

将您最近创建的DCFilterView实例添加到容器栈视图中。

self.containerSV.insertArrangedSubview(filterView, at: 0)

并为其设置一些高度限制。例如，40

self.containerSV.addConstraint(NSLayoutConstraint(item: self.filterView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 40))

这样就可以使筛选视图可见。

注意：在我的案例中，我在第一个位置设置了筛选视图，使其作为一个顶部筛选视图可见，但是您可以将其放置在您喜欢的位置。

filter view demo

赋予交互性

为了响应用户对筛选器更改的操作，您需要实现DCFilterViewDelegate协议，例如。

extension ViewController: DCFilterViewDelegate{
    
    func dcFilterView(selected index: Int) {
        print("filter selected at index \(index)")
    }
    
}

正如您习惯处理所有委托一样，您还必须让DCFilterView知道您希望成为其委托

filterView.delegate = self

PD：欢迎拉取请求，所以请随意下载并尝试使用它。

作者

Vincent Berihuete，[email protected]

许可证

DCFilterView可在MIT许可证下使用。有关更多信息，请参阅LICENSE文件。