そーす

福岡在住。iOS/Androidアプリ, Webフロントエンドのエンジニアです。Swift, Kotlin, JavaScript, ReactNative

UICollectionViewにHeaderとFooterを付ける

f:id:saburesan:20160427075732p:plain

意外と纏まってる記事無くて困ったのでメモ

Header

Header用UICollectionReusableViewのサブクラスを作成

class SectionHeader: UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        ...
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Header用Viewの登録

collectionView?.registerClass(SectionHeader.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header")

Headerのサイズを返す

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    //sectionに応じて変更可能
    if section = 0 {    return CGSizeMake(self.view.frame.width, 60) }
    else  {    return CGSizeMake(self.view.frame.width, 80) }
}

HeaderのCellを作成

    override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        if kind == UICollectionElementKindSectionHeader {
              return SectionHeader()
        else {
              return SectionFooter()
        }             
    }
    

Footer

上記のUICollectionElementKindSectionHeaderのところをUICollectionElementKindSectionFooterにして

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

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

に変更するだけです。