0

UICollectionViewを使ってセクションが複数ある画面を実装しています。
セルの大きさを可変にするため、UICollectionViewFlowLayoutをカスタムして利用しています。

ヘッダーを表示するには、レイアウトを生成した際に以下の値を設定する認識です。

let layout = UICollectionViewFlowLayout()
layout.headerReferenceSize = CGSizeMake(10,10)

上記を設定することで、以下のファンクションが呼ばれる認識です。

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {}

以下のようにレイアウトにカスタムクラスを利用した際、上記のファンクションが呼ばれなくなってしまいました。

let layout = CustomLayout()
layout.headerReferenceSize = CGSizeMake(10,10)

どこかでheaderReferenceSizeの値がクリアされてしまう等、何か原因がありますでしょうか?

ViewController.swift

var myCollectionView : UICollectionView!

var mySection: [String] = [“セクション1”,”セクション2”]

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = CustomLayout()

    // セクション毎のヘッダーサイズ
    layout.headerReferenceSize = CGSizeMake(self.view.frame.width, 100)

    layout.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8)

    layout.minimumLineSpacing = 8
    layout.minimumInteritemSpacing = 8

    layout.maxColumn = 5
    layout.cellPattern.append((sideLength: 2,heightLength: 2,column: 0,row: 0))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 2,row: 0))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 3,row: 0))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 4,row: 0))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 2,row: 1))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 3,row: 1))
    layout.cellPattern.append((sideLength: 1,heightLength: 1,column: 4,row: 1))

    myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)

    myCollectionView.registerClass(CustomUICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
    myCollectionView.registerClass(CustomCollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "MySection")

    myCollectionView.delegate = self
    myCollectionView.dataSource = self

    self.view.addSubview(myCollectionView)

}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return mySection.count
}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    print(“セル押下”)
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    switch (section) {
    case 0:
        return 7
    case 1:
        return 7
    default:
        return 0
    }
}

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

    let headerView: CustomCollectionReusableView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "MySection", forIndexPath: indexPath) as! CustomCollectionReusableView

    headerView.title?.text = mySection[indexPath.section]

    return headerView

}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell: CustomUICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath) as! CustomUICollectionViewCell

    switch (indexPath.section) {
    case 0:
        cell.backgroundColor = UIColor.redColor()
        cell.textLabel?.text = "0"
        cell.imageTest.image = UIImage(named: "image01.jpg")
    case 1:
        cell.backgroundColor = UIColor.greenColor()
        cell.textLabel?.text = "1"
    default:
        print("section error")
        cell.backgroundColor = UIColor.whiteColor()
    }
    return cell
}

CustomUICollectionViewCell.swift

var textLabel: UILabel!
var imageTest: UIImageView!

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

override init(frame: CGRect) {
    super.init(frame: frame)

    textLabel = UILabel(frame: CGRectMake(0,0,frame.width,frame.height))
    textLabel?.text = "nil"
    textLabel?.textAlignment = NSTextAlignment.Center

    imageTest = UIImageView(frame: CGRectMake(0,0,frame.width,frame.height))

    self.contentView.addSubview(imageTest)
    self.contentView.addSubview(textLabel)
}

CustomLayout.swift

private static let maxRow = 3

var maxColumn = maxRow
var cellPattern:[(sideLength: CGFloat, heightLength: CGFloat, column: CGFloat, row:CGFloat)] = []

private var sectionCells = [[CGRect]]()
private var contentSize = CGSizeZero

override func prepareLayout() {
    super.prepareLayout()

    sectionCells = [[CGRect]]()

    if let collectionView = self.collectionView {
        contentSize = CGSize(width: collectionView.bounds.width - collectionView.contentInset.left - collectionView.contentInset.right, height: 0)
        let smallCellSideLength: CGFloat = (contentSize.width - super.sectionInset.left - super.sectionInset.right - (super.minimumInteritemSpacing * (CGFloat(maxColumn) - 1.0))) / CGFloat(maxColumn)

        for section in (0..<collectionView.numberOfSections()) {
            var cells = [CGRect]()
            let numberOfCellInSection = collectionView.numberOfItemsInSection(section)
            var height = contentSize.height

            for i in (0..<numberOfCellInSection) {
                let position = i % (numberOfCellInSection)
                let cellPosition = position % cellPattern.count
                let cell = cellPattern[cellPosition]
                let x = (cell.column * (smallCellSideLength + super.minimumInteritemSpacing)) + super.sectionInset.left
                let y = (cell.row * (smallCellSideLength + super.minimumLineSpacing)) + contentSize.height + super.sectionInset.top
                let cellwidth = (cell.sideLength * smallCellSideLength) + ((cell.sideLength-1) * super.minimumInteritemSpacing)
                let cellheight = (cell.heightLength * smallCellSideLength) + ((cell.heightLength-1) * super.minimumInteritemSpacing)

                let cellRect = CGRectMake(x, y, cellwidth, cellheight)
                cells.append(cellRect)

                if (height < cellRect.origin.y + cellRect.height ) {
                    height = cellRect.origin.y + cellRect.height
                }
            }
            contentSize = CGSize(width: contentSize.width, height: height)
            sectionCells.append(cells)
        }
    }
}

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var layoutAttributes = [UICollectionViewLayoutAttributes]()

    if let collectionView = self.collectionView {
        for i in (0..<collectionView.numberOfSections()) {

            let numberOfCellsInSection = collectionView.numberOfItemsInSection(i)

            for j in (0..<numberOfCellsInSection) {
                let indexPath = NSIndexPath(forRow: j, inSection: i)
                if let attributes = layoutAttributesForItemAtIndexPath(indexPath) {
                    if (CGRectIntersectsRect(rect, attributes.frame)) {
                        layoutAttributes.append(attributes)
                    }
                }
            }
        }
    }
    return layoutAttributes
}

override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
    let attributes = super.layoutAttributesForItemAtIndexPath(indexPath)
    attributes!.frame = sectionCells[indexPath.section][indexPath.row]
    return attributes
}

override func collectionViewContentSize() -> CGSize {
    return contentSize
}

CustomCollectionReusableView.swift

var title: UILabel!
var backgroundImage: UIImageView!

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

override init(frame: CGRect) {
    super.init(frame: frame)

    title = UILabel(frame: CGRectMake(frame.width*0.05,0,frame.width,frame.height))
    title.text = "nil"
    title.textAlignment = NSTextAlignment.Left
    title.textColor = UIColor.redColor()

    let bgImage: UIImage = UIImage(named: "image02.jpg")!
    backgroundImage = UIImageView(frame: CGRectMake(0, 0, frame.width, frame.height))
    backgroundImage.image = bgImage

    self.addSubview(backgroundImage)
    self.addSubview(title)

}
1
  • headerReferenceSizeに非0のサイズを設定することで collectionView(collectionView:viewForSupplementaryElementOfKind:indexPath:)が呼び出されるかどうかは、CustomLayout をどう実装したのかといった情報がないとなんとも言えません。あるいは別の単純ミスがどこかにあるのかもしれませんが、もちろんそれについても何も情報がないため、なんとも言えません。あなたが直面している状況を再現するのに十分な情報をご質問内に追記していただくようにお願いします。
    – OOPer
    Commented 2017年2月20日 22:46

1 件の回答 1

1

こちらのドキュメントはじっくり読まれましたでしょうか。

Collection View プログラミングガイド

(pdfの日本語版よりHTMLの英語版の方が読みやすいかもしれません。)

その中のこちら:

フローレイアウトのサブクラスを定義するべき状況

(表3-1中、シナリオ:補助ビューや装飾ビューを新たに追加したい より)

標準の「フローレイアウト」クラスは、セクションヘッダやセクションフッタを補助ビューとして追加できるだけであり、装飾ビューにも対応していません。補助ビューや装飾ビューを追加したい場合、少なくとも次のメソッドをオーバーライドする必要があります。

  • layoutAttributesForElementsInRect:(必須)
  • layoutAttributesForItemAtIndexPath:(必須)
  • layoutAttributesForSupplementaryViewOfKind:atIndexPath:(補助ビューの場合)
  • layoutAttributesForDecorationViewOfKind:atIndexPath:(装飾ビューの場合)

あなたの場合、補助ビュー(Supplementary View)であるヘッダーを定義しようとしているので、以下の3つのメソッドを 正しく実装 してやる必要(*1)があります。

  • layoutAttributesForElementsInRect:
  • layoutAttributesForItemAtIndexPath:
  • layoutAttributesForSupplementaryViewOfKind:atIndexPath:

(*1) 上記では オーバーライドする必要があります (you need to override) ですが、今回の場合、新たに追加ではないので、UICollectionViewFlowLayoutに定義された動作がそのまま使える場合もあります。

あなたのコードでは以上3つの中で、layoutAttributesForElementsInRect(_:)の実装に問題があるのが目に付きます。

layoutAttributesForElementsInRect:メソッドでは、superを呼び出してセルのレイアウト属性を取得し、指定された矩形内に置く、新しい補助ビューや装飾ビューの属性を追加します。他のメソッドには、必要に応じて属性を指定する働きがあります。

(上記の文章、どう贔屓目に見ても良い訳には見えないので、原文にも目を通しておくことをお勧めします。)

In your layoutAttributesForElementsInRect: method, you can call super to get the layout attributes for the cells and then add the attributes for any new supplementary or decoration views that are in the specified rectangle. Use the other methods to provide attributes on demand.

(最後の文の拙訳: 必要に応じて属性を提供するための他のメソッドを使用してください。)

本題にとって重要な事柄は、layoutAttributesForElementsInRect(_:)では、補助ビューや装飾ビューのためのレイアウト属性も返さないといけない と言うことです。


前提になるドキュメントの記述の紹介が長くなってしまいましたが、あなたのコードのlayoutAttributesForElementsInRect(_:)では、セルに対するレイアウト属性しか返そうとしていませんので、結果的にcollectionView(_:viewForSupplementaryElementOfKind:indexPath:)も呼ばれない、と言うことになっています。

上記のメソッドを例えば以下のように修正してみてください。

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var layoutAttributes = [UICollectionViewLayoutAttributes]()
    
    if let collectionView = self.collectionView {
        for i in 0..<collectionView.numberOfSections() {
            
            let numberOfCellsInSection = collectionView.numberOfItemsInSection(i)
            
            for j in 0..<numberOfCellsInSection {
                let indexPath = NSIndexPath(forRow: j, inSection: i)
                if let attributes = layoutAttributesForItemAtIndexPath(indexPath) {
                    if (CGRectIntersectsRect(rect, attributes.frame)) {
                        layoutAttributes.append(attributes)
                    }
                }
                //補助ビューと装飾ビューのレイアウト属性も返す必要がある
                //UICollectionViewFlowLayoutの場合はヘッダーとフッター(どちらも補助ビュー)
                if let attributes = layoutAttributesForSupplementaryViewOfKind(UICollectionElementKindSectionHeader, atIndexPath: indexPath) {
                    if CGRectIntersectsRect(rect, attributes.frame) {
                        layoutAttributes.append(attributes)
                    }
                }
                if let attributes = layoutAttributesForSupplementaryViewOfKind(UICollectionElementKindSectionFooter, atIndexPath: indexPath) {
                    if CGRectIntersectsRect(rect, attributes.frame) {
                        layoutAttributes.append(attributes)
                    }
                }
            }
        }
    }
    return layoutAttributes
}

少なくともご質問の本題の「上記のファンクション(collectionView(_:viewForSupplementaryElementOfKind:indexPath:))が呼ばれなくなってしまいました」については、これで解消できるはずです。お試しください。

1
  • ご丁寧な回答ありがとうございました。回答の通りに修正したところ、該当のファンクションが呼ばれるようになりました。セクション毎にヘッダーを表示するので、「for i in...」のループの方に補助ビューのレイアウトを追加する処理を移動してみました。また、ヘッダーが表示されることでCellの表示位置の調整が必要と分かりました。ありがとうございました。
    – junaka
    Commented 2017年2月22日 5:21

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。