GradientLoadingBar 3.0.0

GradientLoadingBar 3.0.0

×

测试已测试✓
Lang语言 SwiftSwift
许可证 MIT
发布最后发布2022 年 10 月
SPM支持 SPM✗

由 Felix M.，Felix Mau 维护。

GradientLoadingBar 3.0.0

  • 由
  • Felix Mau

GradientLoadingBar

Swift5.0 CI Status Code Coverage Version License Platform

一个可定制的动画渐变加载栏。灵感来源于 Codepen 上的 iOS 7 进度条。

示例

Example

要运行示例项目，克隆仓库，然后从 Example 目录打开工作区。

要求

  • Swift 5.5
  • Xcode 13
  • iOS 13.0+

注意：如果您需要支持低于 13 的 iOS 版本，您可以将版本回退到 `2.X.X`。

集成

CocoaPods

CocoaPods 是 Cocoa 项目的依赖管理器。有关使用和安装说明，请访问其网站。要使用 CocoaPods 将 GradientLoadingBar 集成到您的 Xcode 项目中，请在您的 Podfile 中指定它。

pod 'GradientLoadingBar', '~> 3.0'
Carthage

Carthage 是一个去中心化的依赖管理器，它构建您的依赖并提供二进制框架。要使用 Carthage 将 GradientLoadingBar 集成到您的 Xcode 项目中，请在您的 Cartfile 中指定它。

github "fxm90/GradientLoadingBar" ~> 3.0

运行 carthage update 来构建框架，并将构建的 GradientLoadingBar.framework 拖动到您的 Xcode 项目中。

Swift 包管理器

Swift 包管理器 是一个用于自动分发 Swift 代码的工具，并且集成到 swift 编译器中。它处于早期开发阶段，但是 Gradient Loading Bar 在支持的平台上支持其使用。

一旦您设置了 Swift 包，添加 Gradient Loading Bar 作为依赖就像将其添加到 Package.swift 的 dependencies 值一样简单。

dependencies: [
    .package(url: "https://github.com/fxm90/GradientLoadingBar", from: "3.0.0")
]

如何使用

此框架提供了四个类

  • GradientLoadingBar：一个控制器，管理当前关键窗口中 GradientActivityIndicatorView 的可见性。
  • NotchGradientLoadingBar：GradientLoadingBar 的子类，将 GradientActivityIndicatorView 包装在 iPhone 的刘海周围。
  • GradientActivityIndicatorView：一个包含带有动画的渐变 UIView。它可以作为子视图添加到另一个视图，无论是通过界面构建器还是以编程方式。示例应用程序中展示了这两种方法。
  • GradientLoadingBarView：一个用于 SwiftUI 的带有动画的渐变 View。该视图可以添加到任何其他 SwiftUI 视图中。示例应用程序还包含此用例的示例代码。

梯度加载栏

要开始使用，请将模块 GradientLoadingBar 导入到您的文件中，并在视图控制器属性中保存 GradientLoadingBar() 实例。要显示加载栏，只需调用 fadeIn(duration:completion) 方法，在异步操作完成后调用 fadeOut(duration:completion) 方法。

final class UserViewController: UIViewController {

    private let gradientLoadingBar = GradientLoadingBar()

    // ...

    override func viewDidLoad() {
        super.viewDidLoad()

        gradientLoadingBar.fadeIn()

        userService.loadUserData { [weak self] _ in
            // ...
            // Be sure to call this on the main thread!
            self?.gradientLoadingBar.fadeOut()
        }
    }
}
配置

您可以通过使用可选参数 height 和 isRelativeToSafeArea 调用初始化器来覆盖默认配置。

let gradientLoadingBar = GradientLoadingBar(
    height: 4.0,
    isRelativeToSafeArea: true
)
– 参数 height: CGFloat

通过设置此参数，您可以设置加载栏的高度（默认值为 3.0）。

– 参数 isRelativeToSafeArea: Bool

使用此参数，您可以配置加载栏是否相对于安全区域定位（默认值为 true）。

将 isRelativeToSafeArea 设置为 true 的示例。 示例

将 isRelativeToSafeArea 设置为 false 的示例。 示例

注意

还有第三种选项可以将加载栏围绕 iPhone 开孔包裹。有关详细信息，请参阅 NotchGradientLoadingBar 类的文档。

属性
– gradientColors: [UIColor]

此属性调整加载条上显示的渐变颜色。

– progressAnimationDuration: TimeInterval

此属性调整渐变从左到右移动的动画持续时间。

方法
– fadeIn(duration:completion)

此方法使加载条淡入。您可以使用相应的参数调整持续时间。此外，您还可以传递一个完成处理程序，在动画完成后调用。

– fadeOut(duration:completion)

此方法使加载条淡出。您可以使用相应的参数调整持续时间。此外，您还可以传递一个完成处理程序，在动画完成后调用。

自定义共享实例（单例）

如果您的应用需要在不同部分显示加载进度条，可以使用提供的静态变量 shared

GradientLoadingBar.shared.fadeIn()

// Do e.g. server calls etc.

GradientLoadingBar.shared.fadeOut()

如果您希望自定义共享实例，可以在应用程序代理的 didFinishLaunchingWithOptions 方法中添加以下代码，并重写 shared 变量

GradientLoadingBar.shared = GradientLoadingBar(height: 5.0)

NotchGradientLoadingBar

此子类来自 GradientLoadingBar，它将加载进度条包裹在iPhone的刘海部分。

对于没有安全区域的iPhone，其表现与上述 GradientLoadingBar 文档中提到的相同。

let notchGradientLoadingBar = NotchGradientLoadingBar(
    height: 3.0
)

Example

GradientActivityIndicatorView

如果您不想将加载进度条添加到主窗口，此框架提供了 GradientActivityIndicatorView，它是 UIView 的直接子类。您可以通过界面构建器或编程方式将视图添加到另一个视图中。

例如，将视图作为子视图添加到 UINavigationBar 中。 示例

例如，将视图作为子视图添加到 UIButton 中。 示例

备注

进度动画的开始和结束根据 isHidden 标志来控制。将此标志设置为 false 将开始动画，设置为 true 将停止动画。通常，您可能不想直接显示/隐藏视图，而是平滑地渐入或渐出。因此，视图提供了 fadeIn(duration:completion) 和 fadeOut(duration:completion) 方法。基于 gists UIView+AnimateAlpha.swift，这些方法调整视图的 alpha 值并相应地更新 isHidden 标志。

属性
– gradientColors: [UIColor]

此属性调整加载条上显示的渐变颜色。

– progressAnimationDuration: TimeInterval

此属性调整渐变从左到右移动的动画持续时间。

要查看这些截图在真实应用中的样子，请查看 示例应用。为了进一步定制，您还可以创建 GradientLoadingBar 的子类并覆盖 setupConstraints() 方法。

GradientLoadingBarView

这是 SwiftUI 版本的 GradientActivityIndicatorView。该视图可以通过传递给初始化器的两个参数 gradientColors: [Color] 和 progressDuration: TimeInterval 进行配置。

– gradientColors: [Color]

此参数调整加载条上显示的渐变颜色。

– progressDuration: TimeInterval

此参数调整渐变质从左到右移动的动画持续时间。

可以通过视图修饰符 opacity() 或 hidden() 更新视图的可见性。

为了动画显示状态的变更，您需要使用带有 @State 性质包装器的属性，并从 withAnimation 块中更新值，例如：

struct ExampleView: some View {

    @State
    private var isVisible = false

    var body: some View {
        VStack {
            GradientLoadingBarView()
                .frame(maxWidth: .infinity, maxHeight: 3)
                .cornerRadius(1.5)
                .opacity(isVisible ? 1 : 0)

            Button("Toggle visibility") {
                withAnimation(.easeInOut) {
                    isVisible.toggle()
                }
            }
        }
    }
}

问题排查

Interface Builder 支持

不幸的是，对于 Cocoapods 框架的 Interface Builder 支持目前是中断的。如果您需要 Interface Builder 支持，请将以下代码添加到您的 Podfile 中，然后再次运行 pod install。之后，您应该在 Interface Builder 中能够使用 GradientLoadingBar :)：

  post_install do |installer|
    installer.pods_project.build_configurations.each do |config|
      next unless config.name == 'Debug'

      config.build_settings['LD_RUNPATH_SEARCH_PATHS'] = [
        '$(FRAMEWORK_SEARCH_PATHS)'
      ]
    end
  end

来源： Cocoapods – Issue 7606

作者

Felix Mau (me(@)felix.hamburg)

许可

GradientLoadingBar 在 MIT 许可下提供。更多信息请参阅 LICENSE 文件。