Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Tips] UICollectionViewCell左寄せ

More than 1 year has passed since last update.

XQWtB.png

概要

UICollectionViewCellを左寄せにする方法まとめTips。

方法

前提

  • FlowLayoutであること。
  • 縦スクロール(vertical)であること。

セルが1種類の場合

スクリーンショット 2018-12-24 16.39.01.png

セルのcontentModeをLeftに設定。

セルが複数種類の場合

final class LeftAlignmentCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return super.layoutAttributesForElements(in: rect)?
            .reduce(into: [UICollectionViewLayoutAttributes]()) { result, attribute in
                let isFirstCellInColumn: Bool = {
                    if attribute.representedElementCategory != .cell {
                        return false
                    } else if let previousAttribute = result.last,
                        previousAttribute.frame.origin.y + previousAttribute.frame.height >= attribute.frame.origin.y {
                        return false
                    } else {
                        return true
                    }
                }()
                if isFirstCellInColumn {
                    attribute.frame.origin.x = self.sectionInset.left
                }
                result += [attribute]
        }
    }

    // ==================================================
    // レイアウト開始時の動きを制御する必要がある場合、上記と合わせて追加する
    // ==================================================
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let attribute = super.layoutAttributesForItem(at: indexPath) else {
            return nil
        }
        let isFirstCellInColumn: Bool = {
            if indexPath.item > 1,
                let previousAttribute = super.layoutAttributesForItem(at: IndexPath(item: indexPath.item - 1, section: indexPath.section)),
                previousAttribute.frame.origin.y + previousAttribute.frame.height >= attribute.frame.origin.y {
                return false
            } else {
                return true
            }
        }()
        if isFirstCellInColumn {
            attribute.frame.origin.x = self.sectionInset.left
        }
        return attribute
    }
}

スクリーンショット 2018-12-24 16.39.08.png

  1. 各セルのcontentModeをLeftに設定。
  2. UICollectionViewFlowLayoutを継承したカスタムクラスを生成し、行ごとの最初のアイテムの左端が揃うようファンクションをオーバーライドする。
  3. 2で作ったクラスをCollectionViewのFlowLayoutに設定する。

※2、3をすることで、復数種類セルが混在しても左寄せになるようになる。

備考

知らないとけっこうハマる。。

ShoichiKuraoka
車メーカー←フリーランス←SIer。フリーランスの頃はiOS系を主に担当。参加プロジェクト:業務用プレゼンApp、位置情報SDK、通貨App、動画配信App…etc
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away