ShimmerBlocks 0.1.1

ShimmerBlocks 0.1.1

×

由 Jonathan Samudio 维护。

 
依赖
Shimmer~> 1.0.2
PureLayout~> 3.0.2
 

ShimmerBlocks 0.1.1

  • 作者：
  • jgsamudio

ShimmerBlocks

Travis build status Cocoapods Compatible Platform Docs

向您的视图组件添加带遮挡的模糊视图。

shimmerblocks.gif

为什么我们构建了这个

这个项目的灵感来源于 Facebook 的 Shimmer pod，它为任何视图添加了简单的模糊效果。模糊效果通常在产品的加载状态下作为遮挡视图看到。但是 Facebook 的 Shimmer pod 不太容易允许我们向现有的布局中添加遮挡视图。针对这个问题，我们创建了 ShimmerBlocks 来轻松向现有布局中添加遮挡模糊视图。

要求

  • iOS 9.0+

安装

CocoaPods

ShimmerBlocks 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中

pod 'ShimmerBlocks'

使用

1. 设置ShimmerContainer

ShimmerContainer包含特定子视图的所有ShimmerBlocks。

public init(parentView: UIView?)

应该用包含ShimmerContainer的parentView来初始化ShimmerContainer。需要parentView来添加shimmerBlocks。在我们的示例中，父视图是UITableViewCell。

public func applyShimmer(enable: Bool, with shimmerData: [ShimmerData])

可以通过传递enable来开始对视图进行闪光，该属性表示视图是否在闪光，以及ShimmerData。

public static func generateShimmerView(image: UIImage? = nil, backgroundColor: UIColor)

如果您只需要一个单独的ShimmerBlock，ShimmerContainer提供了静态函数返回一个包含可选图像和闪光背色的ShimmerView。

2. 生成ShimmerData

ShimmerData是一个模型，包含有关如何将闪光块应用到子视图的信息。以下是可初始化的可调整ShimmerData属性。

/// View to add shimmer overlay to.
public weak var view: UIView?

ShimmerData的view通常是需要在加载状态下屏蔽的UILabel或UIImage。

/// Image to apply to the overlay instead of using a blocked section.
public let image: UIImage?

可以提供一个自定义图像，在默认闪光块而不是使用默认闪光块时显示。

/// Background color of the overlay sections. Does not overlay the image.
public let backgroundColor: UIColor

可以按块定制闪光的背景颜色。默认颜色是UIColor.lightGray.withAlphaComponent(0.3)。

/// Sets the container view size to match the provided view's size.
public let matchViewDimensions: Bool

在设置ShimmerBlock的高度和宽度时，将matchViewDimensions设置为true将匹配ShimmerBlock的大小。

/// Spacing between each section.
public let sectionSpacing: CGFloat

/// Sections to display over the provided view.
public let sections: [ShimmerSection]

如果您需要更多样化的ShimmerBlocks尺寸，我们为您提供了设置自己的ShimmerSections的选项。

3. 创建自定义ShimmerSections

/// Width of the shimmer section.
public let width: CGFloat

/// Height of the shimmer section.
public let height: CGFloat

一个ShimmerSection由宽度、高度组成，这将用于在应用闪光时确定ShimmerBlock的大小。每个ShimmerSection将对应一个单独的ShimmerBlock。

public static func generate(minWidth: CGFloat,
                            height: CGFloat,
                            totalWidth: CGFloat,
                            maxNumberOfSections: Int) -> [ShimmerSection]

为了创建更定制的视觉效果，可以使用几个参数随机生成ShimmerSections。

  • 《minWidth`是当生成大小时应进行的 《ShimmerBlock`的最小宽度。

  • 《height》是《ShimmerBlock`期望的高度。

  • 《totalWidth`是随机生成函数应该尝试填充的总宽度范围。

  • 《maxNumberOfSections`是在 《totalWidth`内应生成的最大《ShimmerBlock`数量。

示例设置

以下代码是示例项目中使用的《UITableViewCell`以及上面的动画。

import UIKit
import ShimmerBlocks

final class InfoTableViewCell: UITableViewCell {

    @IBOutlet weak var infoImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    private lazy var shimmerContainer = ShimmerContainer(parentView: self)

    private lazy var shimmerData: [ShimmerData] = {
        let titleSections = ShimmerSection.generate(minWidth: 50, 
                                                    height: 21, 
                                                    totalWidth: 150, 
                                                    maxNumberOfSections: 3)
      
        return [ShimmerData(titleLabel, sectionSpacing: 6, sections: titleSections),
                ShimmerData(infoImageView, matchViewDimensions: true),
                ShimmerData(descriptionLabel, matchViewDimensions: true)]
    }()

    func isLoading(_ loading: Bool) {
        shimmerContainer.applyShimmer(enable: loading, with: shimmerData)
    }

}

为ShimmerBlocks做出贡献

要报告错误或增强功能请求，请分别在相应标题下提交问题。

如果您想为该项目做出贡献，请fork这个仓库并提交一个pull request。代码贡献应遵循在Prolific Swift Style Guide中指定的标准。

许可协议

prolific

版权所有 © 2017 Prolific Interactive

ShimmerBlocks由Prolific Interactive维护和支持。它可以按照LICENSE文件中指定的条款重新分发。