ケースに応じたUICollectionViewのレイアウト実装パターン

iOSDC 2021 09/19
https://fortee.jp/iosdc-japan-2021/proposal/dae86b07-b55c-449f-bdf1-72acf578d11a

sample code: https://github.com/to4iki/collection-view-layout-pattern-sample

Transcript

1. έʔεʹԠͨ͡
   6*$PMMFDUJPO7JFXͷ
   ϨΠΞ΢τ࣮૷ύλʔϯ
   J04%$+BQBO
   !UPJLJ
   

   View Slide

2. ࣗݾ঺հ
   !UPJLJ
   UPJLJ
   5PTIJLJ5BLF[BXB
   w .JSSBUJW *OD
   w J04%$-5
   w α΢φʔ🧖
   

   View Slide

3. ໨࣍
   ςʔϚͷഎܠ
   6*$PMMFDUJPO7JFX-BZPVUͷ͓͞Β͍
   ϨΠΞ΢τ࣮૷ͷઃܭ
   ·ͱΊ
   

   View Slide

4. ෳࡶͳը໘
   ಠཱͨ͠ϨΠΞ΢τͷू߹
   ը໘ཁૉͱͳΔίϯςϯπͷ૿ݮ
   

   View Slide

5. IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU
   WJFXT@BOE@DPOUSPMTDPMMFDUJPO@WJFXTMBZPVUT
   

   View Slide

6. 6*$PMMFDUJPO7JFX
   6*$PMMFDUJPO7JFX%BUB4PVDF
   6*$PMMFDUJPO7JFX%FMFHBUF 0QUJPOBM
   
   6*$PMMFDUJPO7JFX-BZPVU
   Ͳ͜ʹΞΠςϜΛͲͷΑ͏ʹ഑ஔ͢Δ͔Λࣔ͢
   

   View Slide

7. View Slide

8. ϨΠΞ΢τ࣮૷ͷબ୒ʹ໎͏
   6*$PMMFDUJPO7JFX'MPX-BZPVU
   6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU
   6*$PMMFDUJPO7JFX-BZPVUΛܧঝͨ͠$VTUPN࣮૷
   6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
   

   View Slide

9. 6*$PMMFDUJPO7JFX-BZPVU
   ͷ͓͞Β͍
   

   View Slide

10. 6*$PMMFDUJPO7JFX'MPX-BZPVU
    ॎԣʹۉ౳഑ஔ
    ಈతͳϨΠΞ΢τ͸Ͱ͖ͳ͍
    

    View Slide

11. 6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU
    EFMFHBUFϝιου಺Ͱ*OEFY1BUIΛࢀরՄೳ
    EFMFHBUFϝιουΛհͯ͠ͷมߋͷΈ
    

    View Slide

12. 6*$PMMFDUJPO7JFX-BZPVU$VTUPN
    ཁૉʹԠͯ͡ϨΠΞ΢τΛසൟʹߋ৽͢Δέʔε
    ൺֱత೉қ౓ͷߴ͍࣮૷ͱͳΔ
    

    View Slide

13. 6*$PMMFDUJPO7JFX-BZPVU$VTUPN
    Մม௕ͷΞΠςϜΛUPQʹ੔ྻ͢Δ
    IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO8JOEPXT7JFXT$PODFQUVBM$PMMFDUJPO7JFX1(GPS*046TJOHUIF'MPX-BZPVU
    6TJOHUIF'MPX-BZPVUIUNM
    

    View Slide

14. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    

    View Slide

15. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
    w *OEFY1BUIͷࢀরແ͠਌ཁૉʹରͯ͠ͷ
    ɹൺ཰ઃఆʹΑΔαΠδϯά
    w ԣεΫϩʔϧͷ࣮૷͕؆୯ʹग़དྷΔ
    w σʔλʹΞΫηεͯ͠ಈతʹϨΠΞ΢τ
    ɹมߋ͢Δͷ͸ۤख
    

    View Slide

16. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
    άϦουදࣔ
    

    View Slide

17. ϨΠΞ΢τ࣮૷ͷར༻έʔε
    w 6*$PMMFDUJPO7JFX'MPX-BZPVU
    ɹɹશηΫγϣϯͰΞΠςϜͷαΠζ͕ݻఆͷϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU
    ɹɹαΠζ͕Մม͢ΔϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX-BZPVU$VTUPN
    ɹɹ֤ཁૉͷϨΠΞ΢τΛසൟʹߋ৽͢ΔಠࣗͷϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
    ɹɹ্هͷύλʔϯΛجຊతʹ͸໢ཏ͠දࣔσʔλΛࢀর͠ͳͯ͘ࡁΉ৔߹
    

    View Slide

18. ϨΠΞ΢τ࣮૷ͷઃܭྫ
    

    View Slide

19. ৄࡉը໘
    ෳ਺ηΫγϣϯ
    IUUQTHJUIVCDPNUPJLJDPMMFDUJPOWJFXMBZPVUQBUUFSOTBNQMF
    

    View Slide

20. ํ਑
    l$PNQPTJUJPOBM-BZPVU%J
    ff
    BCMF%BUB4PVSDFz
    w 7JFX$POUSPMMFS͔ΒϨΠΞ΢τͱσʔλ൓өͷؔ৺ຖΛ෼཭
    w දࣔϞσϧը໘ͦͷ΋ͷ
    

    View Slide

21. ํ਑
    

    View Slide

22. 6*$PMMFDUJPO7JFX%J
    ff
    BCMF%BUB4PVSDF
    ܕʹΑΔ੍໿Ͱσʔλͱ6*ͷෆ੔߹Λ๷ࢭ
    

    View Slide

23. ํ਑
    

    View Slide

24. 4FDUJPO1SPWJEFS
    ϨΠΞ΢τɾσʔλ൓өͷఏڙ
    

    View Slide

25. 4FDUJPO.PEFM
    දࣔσʔλͱ1SPWJEFSͷอ࣋
    

    View Slide

26. FYৄࡉը໘
    ෳ਺ίϯςϯπ͕ଘࡏ͢Δը໘
    w %FTDSJQUJPO4FDUJPOՄม௕
    w 'FBUVSF4FDUJPOԣεΫϩʔϧɾٵணදࣔ
    

    View Slide

27. 4FDUJPOɾ4FDUJPO*UFN
    දࣔϞσϧը໘ͦͷ΋ͷ
    

    View Slide

28. 4FDUJPO.PEFMT
    දࣔϞσϧը໘ͦͷ΋ͷ
    

    View Slide

29. ϨΠΞ΢τͷద༻
    $PNQPTJUJPOBM-BZPVUTͷॳظԽ
    

    View Slide

30. දࣔσʔλͷద༻
    %J
    ff
    BCMF%BUB4PVSDFͷॳظԽ
    

    View Slide

31. %FTDSJQUJPO4FDUJPO1SPWJEFS
    ߴ͞ՄมͷϨΠΞ΢τ
    

    View Slide

32. 'FBUVSF4FDUJPO1SPWJEFS
    ԣεΫϩʔϧՄೳͳϨΠΞ΢τ
    ԣεΫϩʔϧՄೳͳϨΠΞ΢τ
    (SPVQͷٵணදࣔ
    

    View Slide

33. 'FBUVSF4FDUJPO1SPWJEFS
    ԣεΫϩʔϧՄೳͳϨΠΞ΢τ
    (SPVQͷٵணදࣔ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJDPMMFDUJPOMBZPVUTFDUJPOPSPUP
    

    View Slide

34. ·ͱΊ
    w ·ͣ͸$PNQPTJUJPOBM-BZPVUTΛݕ౼͢Δ
    ɹɹදࣔσʔλͷঢ়ଶͰՄม͢Δ৔߹͸%FMFHBUF'MPX-BZPVUɾ$VTUPN-BZPVU
    w $PNQPTJUJPOBM-BZPVUT%J
    ff
    BCMF%BUB4PVSDF
    ɹɹૄ݁߹Ͱ௚ײతͳ࣮૷͕ՄೳͱͳΔ
    

    View Slide

35. ࢀߟࢿྉ
    w "EWBODFTJO$PMMFDUJPO7JFX-BZPVU
    

    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFTJO6*%BUB4PVSDFT
    

    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFTJO6*$PMMFDUJPO7JFX
    

    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFTJOEJ
    ff
    BCMFEBUBTPVSDFT
    

    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w -JTUTJO6*$PMMFDUJPO7JFX
    

    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    

    View Slide

36. 5IBOLT🙌
    

    View Slide