Let's Take a Deep Dive into Pager Indicators

AcommpanistのPager IndicatorsとJetpack ComposeのBuilt-in Pagerの違いについて、そして、Jetpack ComposeでのスムーズなIndicators Animationについて記載しています。

Transcript

1. +FUQBDL
   $PNQPTF
   1BHFSͷ*OEJDBUPSTਂ͘ݟͯΈΑ͏ʂ 4IJCVZBBQL
   
2. ࢯ໊ɿ5TVZPTIJ
   0HJIBSB ॴଐɿגࣜձࣾ7PJDZ
   ɹɹɹd
   ɹɹɹ"OESPJEΤϯδχΞ झຯɿπʔϦϯά73%5. !PHJPHJ
3. $PNQPTF
   1BHFSͷJOEJDBUPSTʹ͍ͭͯ࿩͠·͢
4. BOESPJEYDPNQPTFGPVOEBUJPO
   ͔Β
   1BHFS͕ར༻Մೳʹ🎉 >The new pager component allows you to horizontally or vertically flip through content, which is similar to ViewPager2 in Views. It allows deep customization options, making it possible to create visually stunning effects: What’s new in Jetpack Compose
5. ެࣜͷղઆ΋ஸೡ😃
6. Add a page indicator
7. Add a page indicator
8. +FUQBDL
   $PNQPTF
9. "DDPNQBOJTU
   *OEJDBUPS࣮૷
10. +FUQBDL
    $PNQPTF
    *OEJDBUPS࣮૷ Add a page indicator
11. +FUQBDL
    $PNQPTFͰ
    εϜʔζͳΠϯδέʔλʔΞχϝʔγϣϯ͸
    Ͳ͏͢Ε͹͍͍͔ʁ
12. ɾ"DDPNQBOJTUQBHFSJOEJDBUPSTΛ࢖͏
    ɾ)PSJ[POUBM1BHFS*OEJDBUPSͷॲཧΛࣗલͰॻ͘
    ɾ.PEJ fi FSHSBQIJDT-BZFSΛ࢖͏
13. ɾ"DDPNQBOJTUQBHFSJOEJDBUPSTΛ࢖͏
    ɾ)PSJ[POUBM1BHFS*OEJDBUPSͷॲཧΛࣗલͰॻ͘
    ɾ.PEJ fi FSHSBQIJDT-BZFSΛ࢖͏
14. .PEJ fi FSHSBQIJDT-BZFS $PNQPTBCMFཁૉʹରͯ͠ඳը࣌ͷม׵΍ޮՌΛద༻͢ΔͨΊͷ.PEJ fi FS graphicsLayer
15. *OEJDBUPS෦෼ͷ࣮૷ ϖʔδ෼શͯͷυοτͱ
    ݱࡏͷϖʔδͷυοτΛผʑʹඳը
16. *OEJDBUPS෦෼ͷ࣮૷ ϖʔδ෼શͯͷυοτͱ
    ݱࡏͷϖʔδͷυοτΛผʑʹඳը
17. *OEJDBUPS෦෼ͷ࣮૷ QBHF0 ff TFU
    ˠݱࡏͷϖʔδͱεφοϓҐஔ·Ͱͷࠩ෼ TDSPMM1PTJUJPO
    ˠݱࡏͷϖʔδͷυοτҐஔͱP ff TFU USBOTMBUJPO9
    ˠυοτͷ෯ͱυοτؒͷϚʔδϯΛ
    ɹߟྀͯ͠ҐஔΛҠಈͤ͞Δ
18. *OEJDBUPS෦෼ͷ࣮૷ 🎉
19. ·ͱΊ •
    "DDPNQBOJTUͱ+FUQBDL$PNQPTFͷ1BHFS͸ϓϩύςΟ͕ҟͳΔ
    •
    +FUQBDL$PNQPTFʹ͸*OEJDBUPST͕·ͩແ͍
    •
    JOEJDBUPSͷΞχϝʔγϣϯʹ͸HSBQIJDT-BZFS͕͓͢͢Ί
20. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
21. ࢀߟϦϯΫ ɾ$VTUPNJ[JOH
    $PNQPTF
    1BHFS
    XJUI
    GVO
    JOEJDBUPST
    BOE
    USBOTJUJPOT
    ɾ8IBU`T
    OFX
    JO
    +FUQBDL
    $PNQPTF
    ɾ1BHFS
    JO
    $PNQPTF
    ɾBOESPJEYDPNQPTFGPVOEBUJPOQBHFS
    ɾ"DDPNQBOJTU
    1BHFS
    MBZPVUT
    ɾ+FUQBDL
    DPNQPTF
    Š
    )PX
    UP
    JNQMFNFOU
    $VTUPN
    1BHFS
    *OEJDBUPST