JPCActivityIndicatorButton 2.1.0

JPCActivityIndicatorButton 2.1.0

测试已测试
Lang语言 SwiftSwift
许可证 MIT
Released最新版本2015年9月
SPM支持 SPM

Maintained by Jon Chmura.



JPCActivityIndicatorButton

ActivityIndicatorButton 是 App Store 应用以及苹果其他几个应用中使用的进度控制的实现。不过,其样式灵感来源于 Google 的材料设计。

UIButton, UIActivityIndicator, UIProgressView

它是 UIActivityIndicatorView 和 UIProgressView 的替换方案,像 UIButton 一样跟踪触摸输入。在以下场景中可能很有用:

  • UIActivityIndicatorView 的替代品
  • UIProgressView 的替代品
  • 带有 Google 材料设计风格的 UIButton 的替代品
  • 以创建与应用商店应用中的开始和停止下载类似的交互。

默认“App Store”样式

outline

Material Design 样式

solid


安装

手动

将 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)

Storyboard

storyboard

布局

它根据图像的大小定义 intrinsicContentSize。因此,就像 UIButton 一样,您不需要定义其宽度和高度(除非您愿意)。

事件

它继承自 UIControl,因此设置触摸事件就像您对 UIButton 一样。

组件

按钮由 4 个组件组成:进度条、轨道、按钮和图像。以下是颜色应用的方式。

colors

样式

按钮支持两种样式

  • 纯色(受材料设计启发)
  • 概要(在App Store中下载按钮)
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属性。这样可以创建不同的状态,例如完成或错误状态,具有不同的着色。下面的图示显示了如何应用每种颜色。

  • tintColor
  • trackColor
  • foregroundColor

将在进度状态下显示的图像

  • image

此状态下的进度条

  • progressBarStyle

存储状态

存储状态功能是管理具有多个状态的按钮的便捷方式。这就是示例项目的设计方式。以下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