Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

to4iki
September 19, 2021

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

to4iki

September 19, 2021
Tweet

More Decks by to4iki

Other Decks in Programming

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