EmptyStateKit 1.1.0

EmptyStateKit 1.1.0

×

维护者：Alberto Aznar.

EmptyStateKit 1.1.0

EmptyStateKit logo

EmptyStateKit

Version License Platform Swift

目录

描述

空状态实际上是在关键时刻吸引、保持和取悦用户的一个极好的方式。使用 EmptyStateKit 使您的应用程序更加有趣，并增加一些趣味到用户界面交互中，无论何时视图没有要显示的内容。在任何具有刷新内容功能的 UIView 或 UITableView/UICollectionView 中显示精彩的占位符空状态。由于其灵活性和易用性，它对于加快移动开发工作流程来说非常实用。EmptyStateKit 使用 Swift 5 编写。

  • 出色的淡入 & 缩放动画
  • 完全可自定义
  • 也可以在您自己的表格和集合视图中使用
  • 易于使用
  • 支持 iOS，在 Swift 5 中开发

示例

要运行示例项目，请克隆仓库，然后首先从示例目录中运行 pod install。

EmptyStateKit

安装

EmptyStateKit 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 并运行 pod install

pod 'EmptyStateKit'

然后您可以在需要时导入它

import EmptyStateKit

使用方法

当出现错误或空状态时，通知或指导用户如何从错误中恢复或如何填充屏幕内容，这很重要。请记住为用户提供下一步操作，例如链接到另一个部分、恢复错误的按钮或可与之交互的内容。这将有助于提高参与度！在示例中，您将看到多种空状态以及如何自定义它们。发挥创意！。

安装 pod 后，按照以下步骤操作。这真的很简单

1. 完成空状态数据

要完成空状态数据，您可以选择实现 EmptyStateDataSource 或扩展您自定义的枚举状态，包括图像、标题、描述和标题按钮参数。

我推荐第二种方法，将状态数据保留在视图控制器之外。

使用 EmptyStateDataSource

实现 EmptyStateDataSource 并完成每个自定义状态。

extension ViewController: EmptyStateDataSource {

    func imageForState(_ state: CustomState, inEmptyState emptyState: EmptyState) -> UIImage? {
        switch state as! MainState {
        case .noInternet: return UIImage(named: "Internet")
        }
    }

    func titleForState(_ state: CustomState, inEmptyState emptyState: EmptyState) -> String? {
        switch state as! MainState {
        case .noInternet:  return "We’re Sorry"
        }
    }

    func descriptionForState(_ state: CustomState, inEmptyState emptyState: EmptyState) -> String? {
        switch state as! MainState {
        case .noInternet: return "Our staff is still working on the issue for better experience"
        }
    }

    func titleButtonForState(_ state: CustomState, inEmptyState emptyState: EmptyState) -> String? {
        switch state as! MainState {
        case .noInternet: return "Try again?"
        }
    }
}

请记住为您的空状态视图分配 dataSource

view.emptyState.dataSource = self

使用 CustomState 枚举

您可以为每个状态实现图像、标题、描述和标题按钮参数。创建实现 CustomState 的自定义状态枚举。然后完成所需的参数。

enum State: CustomState {

    case noNotifications
    case noSearch
    case noInternet

    var image: UIImage? {
        switch self {
        case .noNotifications: return UIImage(named: "Messages")
        case .noSearch: return UIImage(named: "Search")
        case .noInternet: return UIImage(named: "Internet")
        }
    }

    var title: String? {
        switch self {
        case .noNotifications: return "No message notifications"
        case .noSearch: return "No results"
        case .noInternet: return "We’re Sorry"
        }
    }

    var description: String? {
        switch self {
        case .noNotifications: return "Sorry, you don't have any message. Please come back later!"
        case .noSearch: return "Please try another search item"
        case .noInternet: return "Our staff is still working on the issue for better experience"
        }
    }

    var titleButton: String? {
        switch self {
        case .noNotifications: return "Search again?"
        case .noSearch: return "Go back"
        case .noInternet: return "Try again?"
        }
    }
}

2. 显示或隐藏您的空状态

这一步非常简单 ;)

view.emptyState.show(State.noInternet)

您可以在您的 Table 或 Collection 视图中使用空状态，同时保持刷新内容功能。为此，表格或集合视图必须是空的（0 行）。EmptyStateKit 将完成表格或集合背景视图，并删除 separatorStyle 以显示您的空状态。

3. 处理带有 EmptyStateDelegate 的按钮操作

实现 EmptyStateDelegate 协议来委托按钮动作。

extension ViewController: EmptyStateDelegate {

    func emptyState(emptyState: EmptyState, didPressButton button: UIButton) {
        view.emptyState.hide()
    }
}

请记住将委托分配给您的空状态视图

view.emptyState.delegate = self

格式

您可以对空状态进行格式化或使用默认值。查看 EmptyStateFormat 默认值

/// Title attributes
public var titleAttributes: [NSAttributedString.Key: Any] = [.font: UIFont(name: "AvenirNext-DemiBold", size: 26)!, .foregroundColor: UIColor.darkGray]

/// Description attributes
public var descriptionAttributes: [NSAttributedString.Key: Any] = [.font: UIFont(name: "Avenir Next", size: 14)!, .foregroundColor: UIColor.darkGray]

/// Button attributes
public var buttonAttributes: [NSAttributedString.Key: Any] = [.font: UIFont(name: "AvenirNext-DemiBold", size: 14)!, .foregroundColor: UIColor.white]

/// Button color
public var buttonColor: UIColor = .red

/// Button shadow radius
public var buttonShadowRadius: CGFloat = 0

/// Button corner radius
public var buttonRadius: CGFloat = 20.0

/// Button width, nil = auto
public var buttonWidth: CGFloat? = nil

/// Button top margin
public var buttonTopMargin: CGFloat = 20

/// Set image as background
public var coverImage: Bool = false

/// Image animation type
public var animation: EmptyStateAnimation? = .scale(0.3, 0.3)

/// Alpha container
public var alpha: CGFloat = 1.0

/// Tint color for template image
public var imageTintColor: UIColor? = nil

/// Background color
public var backgroundColor: UIColor = .white

/// Background Gradient color
public var gradientColor: (UIColor, UIColor)? = nil

/// Position
public var position = EmptyStatePosition()

/// Margin for vertical position
public var verticalMargin: CGFloat = 40

/// Left & right margin
public var horizontalMargin: CGFloat = 40

/// Image size
public var imageSize: CGSize = CGSize(width: 200, height: 200)

请记住将格式对象分配给您的空状态视图。

view.emptyState.format = format

动画类型

淡入

这种类型将在空状态出现时进行第一个淡入动画与文本，第二个淡入动画与图像

format.animation = EmptyStateAnimation.fade(0.3, 0.3)

(文本淡入动画持续时间，图像淡入动画持续时间)

缩放

此类型将首先在空白状态出现时进行文本淡入动画，然后进行图像缩放动画

format.animation = EmptyStateAnimation.scale(0.3, 0.3)

（文本淡入动画持续时间，图像缩放动画持续时间）

位置类型

EmptyStateViewPosition

public enum EmptyStateViewPosition {
    case top
    case center
    case bottom
}

EmptyStateTextPosition

public enum EmptyStateTextPosition {
    case left
    case center
    case right
}

EmptyStateImagePosition

注意：内容模式图像默认为适配

public enum EmptyStateImagePosition {
    case top
    case bottom
    case cover(MarginTop?, MarginBottom?) 
}

封面图将由（封面顶部边距图像，封面底部边距图像）设置

使用EmptyStateKit的应用

如果您使用EmptyStateKit，我很乐意了解它，并在这里宣传您的应用！

FashTime

作者

Alberto Aznar，[email protected]。本例包含Angga Risky和Sweetie绘制的一些插图。

贡献

欢迎提出想法合作💭，问题⁉️和/或拉取请求🔃.

  1. Fork 它！
  2. 创建您的功能分支： git checkout -b my-new-feature
  3. 提交您的更改： git commit -am '添加某个功能'
  4. 推送到分支： git push origin my-new-feature
  5. 提交拉取请求 :D

许可证

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