GradientProgressBar

一个可定制的渐变进度条 (UIProgressView)。灵感来源于 Codepen 上的 iOS 7 进度条。

要运行示例项目，请克隆 repo，然后从 Example 目录打开 workspace。

• Swift 5.5
• Xcode 13
• iOS 13.0+

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

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

pod 'GradientProgressBar', '~> 3.0'

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

github "fxm90/GradientProgressBar" ~> 3.0

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

Swift Package Manager 是一种用于自动化 Swift 代码分发的工具，并集成到 swift 编译器中。它尚处于早期开发阶段，但 Gradient Progress Bar 确实支持在支持的平台上使用它。

设置好 Swift 包后，将 Gradient Progress Bar 添加为依赖项就像将其添加到 Package.swift 的 dependencies 值一样容易。

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

向下滚动 查看 SwiftUI 文档。

只需将一个 UIView 拖到 Storyboard 中的 View Controller 中。选择您的视图，然后在 Identity Inspector 中将类更改为 GradientProgressBar。

不要忘记也将模块更改为 GradientProgressBar。

根据您的需要设置 UIView 的约束。

在您的 view controller 源文件中导入 GradientProgressBar。

import GradientProgressBar

在您的 view controller 源文件中创建一个进度视图的 IBOutlet。

@IBOutlet weak var gradientProgressView: GradientProgressBar!

之后，您可以像在正常的 UIProgressView 上一样以编程方式设置进度。

gradientProgressView.setProgress(0.75, animated: true)

gradientProgressView.progress = 0.75

调整对 setProgress(_:animated:) 的调用的动画持续时间

progressView.animationDuration = 2.0
progressView.setProgress(progress, animated: true)

调整用于进度视图内渐变的颜色。

progressView.gradientColors: [UIColor] = [
    .red,
    .white,
    .blue
]

调整对 setProgress(_:animated:) 的调用的时间函数，并将 animated 设置为 true。

progressView.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

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

  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

基于 我的 gist，示例应用程序还包含将进度视图附加到 UINavigationBar 的示例代码。 使用 "Key-Value Observing"，我们根据 WKWebView 的属性 estimatedProgress 相应地更改进度条的进度。

请查看示例应用程序以获取更多详细信息 :)

向上滚动 查看 UIKit 文档。

自 2.1.0 版本以来，此框架提供了一个 ProgressViewStyle，可在 SwiftUI 中使用。

struct ExampleView: View {

    @State
    private var progress = 0.5
    
    var body: some View {
        ProgressView(value: progress, total: 1)
            .progressViewStyle(.gradientProgressBar)
            .frame(height: 4)
    }
}

struct ExampleView: View {

    @State
    private var progress = 0.5
    
    var body: some View {
        ProgressView(value: progress, total: 1)
            .progressViewStyle(
                .gradientProgressBar(
                    backgroundColor: .gray.opacity(0.05),
                    gradientColors: [.red, .white, .blue],
                    cornerRadius: 4)
                )
             .frame(height: 8)
    }
}

显示在渐变后面的背景颜色（可能被 cornerRadius 裁剪）。

用于渐变的颜色。

在背景和进度条上使用的圆角半径。

要添加动画，您必须将 @State 属性的更新包装在 withAnimation(_:_:) 中。

Button("Animate progress") {
    withAnimation(.easeInOut) {
        progress += 0.1
    }
}

请查看 Apple 关于 Animation 的文档，了解如何进一步自定义动画。

Felix Mau (me(@)felix.hamburg)

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