PinterestLayout 1.0.3

PinterestLayout 1.0.3

×

测试已测试✗
Lang语言 SwiftSwift
许可证 MIT
发布最后发布2017年7月
SwiftSwift 版本3.0
SPM支持 SPM✗

由 Roman Sorochak 维护。

PinterestLayout 1.0.3

  • 由
  • Roman Sorochak

PinterestLayout

具有不同图片和文本尺寸的自定义UICollectionView布局。

PinterestVC 自定义 Cell
Demo Demo

内容

要求

  • iOS 8.0+
  • Swift 3.0+

用法

PinterestVC 子类

  • 您只需从 PinterestVC 继承并提供要显示的项目即可。
  • PinterestVC 将计算图片和文本的大小。
import UIKit
import PinterestLayout

class MyPinterestVC: PinterestVC {
    
    override public func viewDidLoad() {
        super.viewDidLoad()
        
        let text = "Some text. Some text. Some text. Some text."
        
        items = [
            PinterestItem(image: UIImage(named: "new_york"), text: text),
            PinterestItem(image: UIImage(named: "bigben_river"), text: text),
            PinterestItem(image: UIImage(named: "dubai"), text: text),
            PinterestItem(image: UIImage(named: "4"), text: text),
            PinterestItem(image: UIImage(named: "tiger"), text: text)
        ]
    }
}

使用自定义 Cell

0 - 导入 PinterestLayout

import PinterestLayout

1 - 将 PinterestLayout 设置到您的 collection view。

let layout = PinterestLayout()
collectionView.collectionViewLayout = layout

2 - 设置布局

layout.delegate = self
layout.cellPadding = 5
layout.numberOfColumns = 2

3 - 实现 PinterestLayoutDelegate 的方法

/**
Height for image view in cell.
     
@param collectionView - collectionView
@param indexPath - index path for cell
     
Returns height of image view.
*/
func collectionView(collectionView: UICollectionView,
                    heightForImageAtIndexPath indexPath: IndexPath,
                    withWidth: CGFloat) -> CGFloat
    
/**
Height for annotation view (label) in cell.
     
@param collectionView - collectionView
@param indexPath - index path for cell
     
Returns height of annotation view.
*/
func collectionView(collectionView: UICollectionView,
                    heightForAnnotationAtIndexPath indexPath: IndexPath,
                    withWidth: CGFloat) -> CGFloat
  • PinterestLayout 提供公开 API，以便根据可用宽度轻松计算最佳的 ImageView 和文本高度。
public extension UIImage {
    /**
     Calculates the best height of the image for available width.
     */
    public func height(forWidth width: CGFloat) -> CGFloat
//...
public extension String {
    /**
     Calculates the best height of the text for available width and font used.
     */
    public func heightForWidth(width: CGFloat, font: UIFont) -> CGFloat
  • 所以 PinterestLayoutDelegate 的实现可能是
extension CustomCollectionVC: PinterestLayoutDelegate {
    
    func collectionView(collectionView: UICollectionView,
                        heightForImageAtIndexPath indexPath: IndexPath,
                        withWidth: CGFloat) -> CGFloat {
        let image = images[indexPath.item]
        
        return image.height(forWidth: withWidth)
    }
    
    func collectionView(collectionView: UICollectionView,
                        heightForAnnotationAtIndexPath indexPath: IndexPath,
                        withWidth: CGFloat) -> CGFloat {
        let textFont = UIFont(name: "Arial-ItalicMT", size: 11)!                
        return "Some text".heightForWidth(width: withWidth, font: textFont)
    }
}

4 - 创建自定义 cell 并应用 PinterestLayoutAttributes

class CollectionViewCell: UICollectionViewCell {
//...
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
        if let attributes = layoutAttributes as? PinterestLayoutAttributes {
            //change image view height by changing its constraint
            imageViewHeightLayoutConstraint.constant = attributes.imageHeight
        }
    }
}

提示

  • PinterestLayout 完全支持 collection view 的头部和尾部。因此您可以有多个部分。
  • 如果您异步加载数据，请遵循以下步骤
  1. 不要将 PinterestVC 用作您视图控制器的主类。使用 自定义 Cell 方法。
  2. 确保服务器返回带有其尺寸（高度和宽度）的图片源
{
    "src": "/upload/resize_cache/iblock/8e7/204_265_2/8e7f1f04d5e835f596ef33da74946847.jpg",
    "width": 204,
    "height": 265
}
  1. 加载数据时，请同时使布局无效以及重新加载数据到 collection view。
collectionView.collectionViewLayout.invalidateLayout()
collectionView.reloadData()

联系我们

通过电子邮件联系我们的团队 - [email protected]

许可证

可重用性遵循 MIT 许可证发布。有关详细信息，请参阅 LICENSE。