UEBubblePicker 1.4.0

UEBubblePicker 1.4.0

×

由 Iuri Chiba 维护。

UEBubblePicker 1.4.0

  • 由
  • Iuri Chiba 和 Thiago Penna

Banner

UEBubblePicker 受 Apple Music 启发，并在此基础上使用 UIKit Dynamics 自由手势和引力模拟构建。UEBubblePicker 非常灵活，允许您配置大量属性，甚至还能 创建自己的泡泡。

Version License Platform

特性

  • 🚀 许多交互
    • 拖动你的泡泡；
    • 动态地移除泡泡；
    • 通过在背景上拖动手指来改变引力点
  • 🤓 物理定制
    • 边框碰撞（泡泡是否能穿过屏幕边界）；
    • 引力点/锚（占容器大小的百分比）；
    • 选择和不选中的泡泡的密度；
    • 泡泡的阻力；
  • 👩‍🎨 可定制的泡泡
    • 创建自己的泡泡，通过扩展 UEBubbleView 并实现 UEBubbleViewLayoutProvider；
    • 使用我们的默认泡泡，并改变大小、颜色、图片、文本、字体

示例

查看我们的示例项目！您可以自己修改 pod 配置，并找到一些有趣的交互。
重要：请首先在 Example 目录中克隆仓库并运行 pod install。

注意：这个视频使用的是默认泡泡，但有一个自定义泡泡已经准备好了--
在视图控制器中更改 customBubbles 属性

Sample Video

真实示例

此组件曾用于我们的应用 Sapiência Today。 看看 你可以用它实现的交互

注意：屏幕转换动画使用了 Hero，刷新图标使用了 Lottie

Sample Video

需求

  • Xcode 10+（兼容Swift 4.2）

安装

UEBubblePicker 通过 CocoaPods 提供。为了安装这个库，请在您的 Podfile 中添加以下行

pod 'UEBubblePicker', '~> 1.0'

简单设置

1. 创建容器

创建一个 UEBubbleContainerView，编程方式或使用界面构建器。我们建议使用界面构建器，因为它允许在它出现之前自由更改一些设置，例如滚动方向、吸引点/锚点等。

此外，您可能需要实现 UEBubbleContainerViewDelegate（并将其添加到 UEBubbleContainerView），以使用 bubbleSelected(_:) 和 bubbleDeselected(_:) 知道气泡何时被选中或取消选中。

2. 创建并添加气泡

创建并添加您的气泡，使用 createAndAddDefaultBubble(withData:tag:forceSelection:) 或 addBubble(_:onCenter:animated)。更多详情见下文

2.1. 默认气泡

func createAndAddDefaultBubble(withData: UEBubbleData!, tag: Int? = nil, forceSelection: Bool? = nil)
/// Creates a new **UEDefaultBubbleView**, using any data from **UEBubbleData**
/// - parameter withData: your data object. It customizes the view w/ images, colors, etc
/// - parameter tag: any tag (must be Int) can be used to identify your bubbles
/// - parameter forceSelection: force an initial state for your bubble, selected or not

注意：如果您决定创建一个默认气泡，必须传递一个 UEBubbleData 对象。它包含两个部分：数据，其中您可以设置 image、text；和配置，其中您可以设置 minSize、maxSize、bgColor、imageUnselected（透明度）、hasLabel（布尔值）、labelFont 和 labelColor（如果 hasLabel 设置为 false，则标签配置不会生效）。

这些属性的默认值如下

/// UEBubbleData
public var image: UIImage? = nil
public var text: String = "UOL edtech_"
/// UEBubbleConfiguration
// MARK: - Size Values
public var minSize: CGFloat = 80
public var maxSize: CGFloat = 80 * 1.33
    
// MARK: - Bubble Values
public var bgColor: UIColor = .black
    
// MARK: - Image Values
public var imageUnselected: CGFloat = 0.33
    
// MARK: - Label Values
public var hasLabel: Bool = true
public var labelFont: UIFont = UIFont.systemFont(ofSize: 12)
public var labelColor: UIColor = .white

2.2. 自定义气泡

func addBubble(_ bubbleView: UEBubbleView!, onCenter: Bool = false, animated: Bool = true) throws
/// Adds a new bubble to the container. It can be a custom bubble, subclassing **UEBubbleView**
/// - parameter bubbleView: your bubble view. It could be an **UEDefaultBubbleView** or any **UEBubbleView** subclass
/// - throws: **UEBubbleContainerException.duplicateBubble**: if this bubble is already in the container

3.1. 获取这些气泡！

您可以从这些 UEBubbleContainerView 变量中获取它们

  • bubbles 或 allBubbles：获取容器中当前的所有气泡；
  • selectedBubbles：获取容器中当前所有 已选 的气泡；
  • unselectedBubbles：获取容器中当前所有 未选 的气泡。

或者这些函数，如果您想要更具体一些

  • bubblesWithTag(_:)：如果您使用了 默认 气泡，则建议使用；
  • bubblesWhere(_:)：如果您使用了 自定义 气泡，则建议使用。传递一个代码块。

3.2. 删除那些气泡!？

您可以使用

  • removeBubblesWithTag(_:)：如果使用了 默认 气泡，则建议使用；
  • removeBubblesWhere(_:)：如果使用了 自定义 气泡，则建议使用。传递一个代码块；
  • removeBubble(_:)：如果使用 3.1. 方法获取了气泡引用，则建议使用。

注意：删除气泡时总是 动画 的。请小心使用 layoutIfNeeded。

如何创建自己的气泡

默认气泡提供的选项并不多。
在大多数情况下，您可能想要创建自己的气泡——幸运的是，这非常简单。

这里有一个简单的例子

import UIKit
import UEBubblePicker

public class UECustomBubbleView: UEBubbleView, UEBubbleViewLayoutProvider {
    
    private lazy var view = { return UIView() }()
    // Feel free to store anything you like into this view (ids, labels, etc)
    // e.g.: a category variable
    
    public func viewForBubble(_ bubbleView: UEBubbleView) -> UIView {
        self.view.backgroundColor = bubbleView.isSelected ? .blue : .red
        // You can provide a different view for each situation, based on any other data you put into this object
        // e.g.: put an image on the view, based on its category
        return self.view
    }
    
    public func sizeForBubble(_ bubbleView: UEBubbleView) -> CGFloat {
        return bubbleView.isSelected ? 96 : 48
    }
    
}

您需要子类化 UEBubbleView 并实现 UEBubbleViewLayoutProvider 协议。

该协议请求实现两个方法

  • viewForBubble(_:) 返回将显示在气泡前景中的视图。
  • sizeForBubble(_:) 返回气泡的大小。

对于这两个方法，您都可以使用 bubbleView.isSelected 来确定气泡是否已选择。

您可以在您的 UEBubbleView 子类中实现任何功能。您可能希望有一个分类（如'艺术家'，'专辑'等），为每种分类提供不同的视图，并使用 bubblesWhere(_:) 方法找到它们

计划中的功能

我们计划在不久的将来推出一些功能

  • 更多定制选项
    • 启用/禁用背景滚动，例如。
  • 气泡循环
    • 如果您想要放置无数个气泡，但没有足够的空间怎么办？您可能想要循环显示。如果有20个最大屏幕数，当添加第21个气泡时，堆栈中最先添加的气泡将被移除，依此类推。

作者

Iuri Chiba:
[email protected]
[email protected]

Thiago Penna:
[email protected]

许可

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