测试已测试 | ✗ |
Lang语言 | SwiftSwift |
许可证 | MIT |
Released最新版本 | 2015年9月 |
SPM支持 SPM | ✗ |
Maintained by Jon Chmura.
ActivityIndicatorButton 是 App Store 应用以及苹果其他几个应用中使用的进度控制的实现。不过,其样式灵感来源于 Google 的材料设计。
它是 UIActivityIndicatorView 和 UIProgressView 的替换方案,像 UIButton 一样跟踪触摸输入。在以下场景中可能很有用:
将 ActivityIndicatorButton.swift 复制到您的项目中
此控件可以在 Storyboard 或编程中使用。它是 IBDesignable,因此您可以从界面构建器直接查看预览和编辑其属性。只需添加一个 UIView 并将其类型更改为“ActivityIndicatorButton”。
import JPCActivityIndicatorButton // Only if you use Pods or build as a module! (Which you should)
// ...
let button = ActivityIndicatorButton(frame: CGRectZero)
它根据图像的大小定义 intrinsicContentSize。因此,就像 UIButton 一样,您不需要定义其宽度和高度(除非您愿意)。
它继承自 UIControl,因此设置触摸事件就像您对 UIButton 一样。
按钮由 4 个组件组成:进度条、轨道、按钮和图像。以下是颜色应用的方式。
按钮支持两种样式
button.style = .Solid // or .Outline
圆形进度条有3种状态
您可以直接设置它
button.activityState.progressBarStyle = .Inactive // .Spinning or .Percentage(value: .2)
给定状态可能会覆盖常规颜色。然而,在正常操作中,您可以直接设置它们。所有这些属性都是可在Interface Builder中检查的。
button.tintColor = UIColor.blueColor()
button.normalTrackColor = UIColor.lightGreyColor()
button.normalForegroundColor = UIColor.whiteColor()
图像放置在按钮的中心。如果将其设置为按模板渲染,则将根据按钮样式着色。对于固态样式按钮,将使用foregroundColor;对于轮廓按钮,将使用tintColor。以下两个API都用于设置当前状态下的图像。此“image”属性可以从Storyboard获得。
button.activityState.image = UIImage(named: "tick")
// Or...
button.image = UIImage(named: "tick")
ActivityIndicatorButtonState是一个包含按钮显示属性的struct。您可以为按钮创建自己的状态struct并设置它。这比在“快速设置”部分中直接更改属性提供了更大的灵活性。您可以为按钮的不同逻辑状态创建多个struct。
/**
* This struct defines the current state of an ActivityIndicatorButton.
*/
public struct ActivityIndicatorButtonState: Equatable {
/// An optional property to help identify this button. Does not effect rendering is any way. Must be set to use the "SavedStates" feature.
public let name: String?
/// If this is set it will override the tintColor property on the button.
public var tintColor: UIColor?
/// If this is set it will override the "normalTrackColor" property on the button.
public var trackColor: UIColor?
/// If this is set it will override the "normalforegroundColor" property on the button.
public var foregroundColor: UIColor?
/// Optionally provide an image for this state. It is centered in the button.
public var image: UIImage?
/// The activity state of the button.
/// :see: ActivityIndicatorButtonProgressBarStyle
public var progressBarStyle: ActivityIndicatorButtonProgressBarStyle
/**
Default initializer. No properties are required. All have default values.
:param: name Default value is nil
:param: tintColor Default value is nil
:param: trackColor Default value is nil
:param: foregroundColor Default value is nil
:param: image Default value is nil
:param: progressBarStyle Default value is .Inactive
*/
public init(name: String? = nil, tintColor: UIColor? = nil, trackColor: UIColor? = nil, foregroundColor: UIColor? = nil, image: UIImage? = nil, progressBarStyle: ActivityIndicatorButtonProgressBarStyle = .Inactive) {
self.name = name
self.tintColor = tintColor
self.trackColor = trackColor
self.foregroundColor = foregroundColor
self.image = image
self.progressBarStyle = progressBarStyle
}
/**
Convenience function to set the progressBarStyle to .Percentage(value: value)
*/
public mutating func setProgress(value: Float) {
self.progressBarStyle = .Percentage(value: value)
}
}
可以通过此属性在按钮上访问当前状态
public var activityState: ActivityIndicatorButtonState
活动状态确定以下颜色属性。所有这些都被视为正常值的重写。例如,如果tintColor为nil,则使用UIView上的tintColor属性。这样可以创建不同的状态,例如完成或错误状态,具有不同的着色。下面的图示显示了如何应用每种颜色。
将在进度状态下显示的图像
此状态下的进度条
存储状态功能是管理具有多个状态的按钮的便捷方式。这就是示例项目的设计方式。以下API允许您轻松地创建、存储和设置状态
public var savedStatesCount: Int
// Access a saved state by name or change the value of a saved state. Setting to nil removes the state.
public subscript (name: String) -> ActivityIndicatorButtonState?
// Saves an array of state. The name property MUST be set. Does not remove existing states
public func saveStates(states: [ActivityIndicatorButtonState])
// Change the activityState to one of the saved states
public func transitionSavedState(name: String, animated: Bool = true) -> Bool
由于我们使用的是值类型,我们不必担心设置存储状态后更改活动状态值。因为它不是通过引用传递的,所以所有已保存的状态都不会受到影响。
以下是一个示例设置
// Create names for easy reference
struct Names {
static let Inactive = "Inactive", Spinning = "Spinning", ProgressBar = "Progress Bar", Paused = "Paused", Complete = "Complete", Error = "Error"
}
// Create our states
button.saveStates([
ActivityIndicatorButtonState(name: Names.Inactive, image: UIImage(named: "inactive")),
ActivityIndicatorButtonState(name: Names.Spinning, progressBarStyle: .Spinning),
ActivityIndicatorButtonState(name: Names.ProgressBar, image: UIImage(named: "pause"), progressBarStyle: .Percentage(value: 0)),
ActivityIndicatorButtonState(name: Names.Paused, image: UIImage(named: "play"), progressBarStyle: .Percentage(value: 0)),
ActivityIndicatorButtonState(name: Names.Complete, tintColor: UIColor(red:0.0, green:0.78, blue:0.33, alpha:1.0), image: UIImage(named: "complete")),
ActivityIndicatorButtonState(name: Names.Error, tintColor: UIColor(red:0.84, green:0.0, blue:0.0, alpha:1.0), image: UIImage(named: "error"))
])
// Change a value in one of our states
button[Names.ProgressBar].setProgress(0.35)
// Set a saved state
button.transitionSavedState(Names.ProgressBar)
当点击活动按钮时,它会创建涟漪动画并弹起按钮。这种效果可以进行调整或关闭。所有这些属性都在Storyboard中可访问。
/// The distance past the edge of the button which the ripple animation will propagate on touch up and touch down
button.hitAnimationDistance = 5
/// The duration of the ripple hit animation
button.hitAnimationDuration = 0.5
/// The color of the touch down and touch up ripple animation
button.hitAnimationColor = UIColor.grayColor().colorWithAlphaComponent(0.5) // Set to UIColor.clearColor() to remove the animation
要编辑阴影...
button.shadowColor = UIColor.blackColor() // Set to UIColor.clearColor() to remove