UICollectionViewFlowLayout 将部分标题放在部分左插图上

Question

我正在尝试修改UICollectionViewFlowLayout（垂直滚动），以便将每个节标题放在该节所有项目的左侧（而不是在顶部，这是默认设置）。

也就是说，这是默认行为：

...这就是我想要的：

所以我继承了UICollectionViewFlowLayout：

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let attributesToReturn = super.layoutAttributesForElementsInRect(rect) else {
        return nil
    }

    // Copy to avoid the dreadded "Cached frame mismatch" runtime warning:
    var copiedAttributes = [UICollectionViewLayoutAttributes]()

    for attribute in attributesToReturn {
        copiedAttributes.append(attribute.copy() as! UICollectionViewLayoutAttributes)
    }

    for attributes in copiedAttributes {
        if let kind = attributes.representedElementKind {
            // Non nil: It is a supplementary View

            if kind == UICollectionElementKindSectionHeader {
                // HEADER

                var frame = attributes.frame
                frame.origin.y = frame.origin.y + frame.size.height
                frame.size.width = sectionInset.left
                attributes.frame = frame     
            }
        }
        else{
            // Nil: It is an item
        }
    }
    return copiedAttributes
}

另外，为了更好的措施（？），我采用了协议UICollectionViewDelegateFlowLayout并实现了这个方法（虽然不清楚什么优先。然后，故事板文件中有设置，但是那些似乎被他们的运行时对应物覆盖）：

func collectionView(
    collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    referenceSizeForHeaderInSection section: Int) -> CGSize {

    let left = (collectionViewLayout as! UICollectionViewFlowLayout).sectionInset.left

    return CGSizeMake(left, 1)
}

...我成功地将标题降低到其部分的第一行；但是，最初由 header 占用的空间保持打开状态：

...我能做到这一点的唯一方法是将标题视图高度设置为1 并将“剪辑子视图”设置为 false，以便显示标签（如果我将高度设置为 0，则标签未绘制），但这绝对是不是最优雅的解决方案（很可能会中断-说-iOS 9.2）

也就是说，标题的实际高度链接到部分之间的垂直空间：我不能将空间设置为零，同时将标题视图保持在合理的大小以进行显示。

也许我也应该向上移动所有部分项目（与我的标题高度相同的数量）来填补这个洞？

Answer 1

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *originalAttributes = [super layoutAttributesForElementsInRect:rect];
    NSMutableArray *allAttributes = [NSMutableArray new];
    for (UICollectionViewLayoutAttributes* attributes in originalAttributes) {
        [allAttributes addObject:[attributes copy]];
    }

    for (UICollectionViewLayoutAttributes *attributes in allAttributes) {
         NSString *kind = attributes.representedElementKind;
         if (kind == UICollectionElementKindSectionHeader) {
            CGRect frame = attributes.frame;
            UICollectionViewLayoutAttributes *cellAttrs = [super layoutAttributesForItemAtIndexPath:attributes.indexPath];
            frame.origin.x = frame.origin.x;
            frame.size.height = self.sectionInset.top;
            frame.size.width = cellAttrs.frame.size.width;
            attributes.frame = frame;
         }
    }

    return allAttributes;
}

Answer 2

好的，这就是我所做的：

首先，我基于this github project 对UICollectionViewFlowLayout 进行了子类化，以获得我正在寻找的左对齐（我必须将它从Objective-C 转换为swift，但除此之外几乎相同） .

由于我已经对布局对象进行了子类化，我可以在这个子类中实现任何修改。

我声明了一个属性来存储我的“侧页眉”的宽度（这个数量也是每个部分的左插图的两倍）：

import UIKit

class LeftAlignedFlowLayout: UICollectionViewFlowLayout
{
    let customHeaderWidth:CGFloat = 150.0

    required init?(coder aDecoder: NSCoder) {

        super.init(coder: aDecoder)        
        sectionInset.left = customHeaderWidth
    }

然后，在layoutAttributesForElementsInRect()的实现中我这样做了：

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]?
{
    guard let attributesToReturn = super.layoutAttributesForElementsInRect(rect) else {
        return nil
    }

    var copiedAttributes = [UICollectionViewLayoutAttributes]()

    for attribute in attributesToReturn {
        // Must copy attributes to avoid runtime warning:

        copiedAttributes.append(attribute.copy() as! UICollectionViewLayoutAttributes)
    }

    for attributes in copiedAttributes {

        if let kind = attributes.representedElementKind {
            // Non nil : Supplementary View

            if kind == UICollectionElementKindSectionHeader {
                // [A] HEADER

                var frame = attributes.frame

                frame.origin.y = frame.origin.y + frame.size.height

                frame.size.width = sectionInset.left
                frame.size.height = 60 // Hard-coded - header height

                attributes.frame = frame        
            }
            else if kind == UICollectionElementKindSectionFooter {
                // [B] FOOTER

                var frame = attributes.frame

                // My footer view is a "hairline" taking most of the width
                // (save for 8 points of inset margin on each side):
                frame.origin.x += 8
                frame.size.width -= 16

                attributes.frame = frame
            }
        }
        else{
            // Kind is nil : Item (cell)

            if let attributesForItem = self.layoutAttributesForItemAtIndexPath(attributes.indexPath){

                attributes.frame = attributesForItem.frame
            }
        }     
    }

    return copiedAttributes
}

还有layoutAttributesForItemAtIndexPath()的实现，但是更多的是关于items-part的左对齐，所以我省略了它（如果有人有兴趣，请查看上面链接的github项目）。

一旦有时间，我将创建一个包含我的实施演示项目的存储库。

这些分别是集合视图和流布局对象的 Size Inspector 设置：

（顺便说一下，项目大小是可变的，由委托方法在运行时确定，所以忽略这些值）

我也采用了UICollectionViewDelegateFlowLayout协议，像这样：

func collectionView(collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        referenceSizeForHeaderInSection section: Int) -> CGSize
{
    let left = (collectionViewLayout as! UICollectionViewFlowLayout).sectionInset.left

    return CGSizeMake(left, 1)
}

虽然，老实说，一些布局属性可以在很多地方指定（接口生成器、布局对象的属性、委托方法的返回值等...），我不记得具体哪个优先在每种情况下，我都需要稍微清理一下我的代码。