ケースに応じた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
2. ࣗݾ঺հ !UPJLJ UPJLJ 5PTIJLJ
   5BLF[BXB w .JSSBUJW
   *OD
   
   w J04%$
   
   
   -5
   w α΢φʔ🧖
3. ໨࣍  ςʔϚͷഎܠ
    6*$PMMFDUJPO7JFX-BZPVUͷ͓͞Β͍
    ϨΠΞ΢τ࣮૷ͷઃܭ
    ·ͱΊ
4. ෳࡶͳը໘ ಠཱͨ͠ϨΠΞ΢τͷू߹
   ը໘ཁૉͱͳΔίϯςϯπͷ૿ݮ
5. IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU WJFXT@BOE@DPOUSPMTDPMMFDUJPO@WJFXTMBZPVUT
6. 6*$PMMFDUJPO7JFX 6*$PMMFDUJPO7JFX%BUB4PVDF
   6*$PMMFDUJPO7JFX%FMFHBUF
   0QUJPOBM
   6*$PMMFDUJPO7JFX-BZPVU
   
   
   Ͳ͜ʹΞΠςϜΛͲͷΑ͏ʹ഑ஔ͢Δ͔Λࣔ͢
8. ϨΠΞ΢τ࣮૷ͷબ୒ʹ໎͏ 6*$PMMFDUJPO7JFX'MPX-BZPVU
   6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU
   6*$PMMFDUJPO7JFX-BZPVUΛܧঝͨ͠$VTUPN࣮૷
   6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
9. 6*$PMMFDUJPO7JFX-BZPVU
   ͷ͓͞Β͍
10. 6*$PMMFDUJPO7JFX'MPX-BZPVU ॎԣʹۉ౳഑ஔ
    ಈతͳϨΠΞ΢τ͸Ͱ͖ͳ͍
11. 6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU EFMFHBUFϝιου಺Ͱ*OEFY1BUIΛࢀরՄೳ
    EFMFHBUFϝιουΛհͯ͠ͷมߋͷΈ
12. 6*$PMMFDUJPO7JFX-BZPVU$VTUPN ཁૉʹԠͯ͡ϨΠΞ΢τΛසൟʹߋ৽͢Δέʔε
    ൺֱత೉қ౓ͷߴ͍࣮૷ͱͳΔ
13. 6*$PMMFDUJPO7JFX-BZPVU$VTUPN Մม௕ͷΞΠςϜΛUPQʹ੔ྻ͢Δ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO8JOEPXT7JFXT$PODFQUVBM$PMMFDUJPO7JFX1(GPS*046TJOHUIF'MPX-BZPVU 6TJOHUIF'MPX-BZPVUIUNM
14. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
15. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU w *OEFY1BUIͷࢀরແ͠਌ཁૉʹରͯ͠ͷ
    ɹൺ཰ઃఆʹΑΔαΠδϯά
    w ԣεΫϩʔϧͷ࣮૷͕؆୯ʹग़དྷΔ
    w σʔλʹΞΫηεͯ͠ಈతʹϨΠΞ΢τ
    ɹมߋ͢Δͷ͸ۤख
16. 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU άϦουදࣔ
17. ϨΠΞ΢τ࣮૷ͷར༻έʔε w 6*$PMMFDUJPO7JFX'MPX-BZPVU
    ɹɹશηΫγϣϯͰΞΠςϜͷαΠζ͕ݻఆͷϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX%FMFHBUF'MPX-BZPVU
    ɹɹαΠζ͕Մม͢ΔϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX-BZPVU$VTUPN
    ɹɹ֤ཁૉͷϨΠΞ΢τΛසൟʹߋ৽͢ΔಠࣗͷϨΠΞ΢τ
    w 6*$PMMFDUJPO7JFX$PNQPTJUJPOBM-BZPVU
    ɹɹ্هͷύλʔϯΛجຊతʹ͸໢ཏ͠දࣔσʔλΛࢀর͠ͳͯ͘ࡁΉ৔߹
18. ϨΠΞ΢τ࣮૷ͷઃܭྫ
19. ৄࡉը໘
    ෳ਺ηΫγϣϯ IUUQTHJUIVCDPNUPJLJDPMMFDUJPOWJFXMBZPVUQBUUFSOTBNQMF
20. ํ਑ l$PNQPTJUJPOBM-BZPVU
    
    %J ff BCMF%BUB4PVSDFz
    w 7JFX$POUSPMMFS͔ΒϨΠΞ΢τͱσʔλ൓өͷؔ৺ຖΛ෼཭
    w දࣔϞσϧ
    
    ը໘ͦͷ΋ͷ
21. ํ਑
22. 6*$PMMFDUJPO7JFX%J ff BCMF%BUB4PVSDF ܕʹΑΔ੍໿Ͱσʔλͱ6*ͷෆ੔߹Λ๷ࢭ
23. ํ਑
24. 4FDUJPO1SPWJEFS ϨΠΞ΢τɾσʔλ൓өͷఏڙ
25. 4FDUJPO.PEFM දࣔσʔλͱ1SPWJEFSͷอ࣋
26. FY
    ৄࡉը໘ ෳ਺ίϯςϯπ͕ଘࡏ͢Δը໘
    w %FTDSJQUJPO4FDUJPO
    Մม௕
    w 'FBUVSF4FDUJPO
    ԣεΫϩʔϧɾٵணදࣔ
27. 4FDUJPOɾ4FDUJPO*UFN දࣔϞσϧ
    
    ը໘ͦͷ΋ͷ
28. 4FDUJPO.PEFMT දࣔϞσϧ
    
    ը໘ͦͷ΋ͷ
29. ϨΠΞ΢τͷద༻ $PNQPTJUJPOBM-BZPVUTͷॳظԽ
30. දࣔσʔλͷద༻ %J ff BCMF%BUB4PVSDFͷॳظԽ
31. %FTDSJQUJPO4FDUJPO1SPWJEFS ߴ͞ՄมͷϨΠΞ΢τ
32. 'FBUVSF4FDUJPO1SPWJEFS ԣεΫϩʔϧՄೳͳϨΠΞ΢τ ԣεΫϩʔϧՄೳͳϨΠΞ΢τ
    (SPVQͷٵணදࣔ
33. 'FBUVSF4FDUJPO1SPWJEFS ԣεΫϩʔϧՄೳͳϨΠΞ΢τ
    (SPVQͷٵணදࣔ IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJDPMMFDUJPOMBZPVUTFDUJPOPSPUP
34. ·ͱΊ w ·ͣ͸$PNQPTJUJPOBM-BZPVUTΛݕ౼͢Δ
    ɹɹදࣔσʔλͷঢ়ଶͰՄม͢Δ৔߹͸%FMFHBUF'MPX-BZPVUɾ$VTUPN-BZPVU
    w $PNQPTJUJPOBM-BZPVUT
    
    %J ff BCMF%BUB4PVSDF
    ɹɹૄ݁߹Ͱ௚ײతͳ࣮૷͕ՄೳͱͳΔ
35. ࢀߟࢿྉ w "EWBODFT
    JO
    $PMMFDUJPO
    7JFX
    -BZPVU 
 IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFT
    JO
    6*
    %BUB
    4PVSDFT 
 IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFT
    JO
    6*$PMMFDUJPO7JFX 
 IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w "EWBODFT
    JO
    EJ ff BCMF
    EBUB
    TPVSDFT 
 IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    w -JTUT
    JO
    6*$PMMFDUJPO7JFX 
 IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
36. 5IBOLT
    🙌