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

Let's Take a Deep Dive into Pager Indicators

OG1
July 14, 2023

Let's Take a Deep Dive into Pager Indicators

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

OG1

July 14, 2023
Tweet

More Decks by OG1

Other Decks in Programming

Transcript

  1. +FUQBDL$PNQPTF
    1BHFSͷ*OEJDBUPSTਂ͘ݟͯΈΑ͏ʂ
    4IJCVZBBQL

    View full-size slide

  2. ࢯ໊ɿ5TVZPTIJ0HJIBSB
    ॴଐɿגࣜձࣾ7PJDZ
    ɹɹɹd
    ɹɹɹ"OESPJEΤϯδχΞ
    झຯɿπʔϦϯά73%5.
    !PHJPHJ

    View full-size slide

  3. $PNQPTF
    1BHFSͷJOEJDBUPSTʹ͍ͭͯ࿩͠·͢

    View full-size slide

  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

    View full-size slide

  5. ެࣜͷղઆ΋ஸೡ😃

    View full-size slide

  6. Add a page indicator

    View full-size slide

  7. Add a page indicator

    View full-size slide

  8. +FUQBDL$PNQPTF

    View full-size slide

  9. "DDPNQBOJTU*OEJDBUPS࣮૷

    View full-size slide

  10. +FUQBDL$PNQPTF*OEJDBUPS࣮૷
    Add a page indicator

    View full-size slide

  11. +FUQBDL$PNQPTFͰ
    εϜʔζͳΠϯδέʔλʔΞχϝʔγϣϯ͸
    Ͳ͏͢Ε͹͍͍͔ʁ

    View full-size slide

  12. ɾ"DDPNQBOJTUQBHFSJOEJDBUPSTΛ࢖͏
    ɾ)PSJ[POUBM1BHFS*OEJDBUPSͷॲཧΛࣗલͰॻ͘
    ɾ.PEJ
    fi
    FSHSBQIJDT-BZFSΛ࢖͏

    View full-size slide

  13. ɾ"DDPNQBOJTUQBHFSJOEJDBUPSTΛ࢖͏
    ɾ)PSJ[POUBM1BHFS*OEJDBUPSͷॲཧΛࣗલͰॻ͘
    ɾ.PEJ
    fi
    FSHSBQIJDT-BZFSΛ࢖͏

    View full-size slide

  14. .PEJ
    fi
    FSHSBQIJDT-BZFS
    $PNQPTBCMFཁૉʹରͯ͠ඳը࣌ͷม׵΍ޮՌΛద༻͢ΔͨΊͷ.PEJ
    fi
    FS
    graphicsLayer

    View full-size slide

  15. *OEJDBUPS෦෼ͷ࣮૷
    ϖʔδ෼શͯͷυοτͱ
    ݱࡏͷϖʔδͷυοτΛผʑʹඳը

    View full-size slide

  16. *OEJDBUPS෦෼ͷ࣮૷
    ϖʔδ෼શͯͷυοτͱ
    ݱࡏͷϖʔδͷυοτΛผʑʹඳը

    View full-size slide

  17. *OEJDBUPS෦෼ͷ࣮૷
    QBHF0
    ff
    TFU
    ˠݱࡏͷϖʔδͱεφοϓҐஔ·Ͱͷࠩ෼
    TDSPMM1PTJUJPO
    ˠݱࡏͷϖʔδͷυοτҐஔͱP
    ff
    TFU
    USBOTMBUJPO9
    ˠυοτͷ෯ͱυοτؒͷϚʔδϯΛ
    ɹߟྀͯ͠ҐஔΛҠಈͤ͞Δ

    View full-size slide

  18. *OEJDBUPS෦෼ͷ࣮૷
    🎉

    View full-size slide

  19. ·ͱΊ
    •"DDPNQBOJTUͱ+FUQBDL$PNQPTFͷ1BHFS͸ϓϩύςΟ͕ҟͳΔ
    •+FUQBDL$PNQPTFʹ͸*OEJDBUPST͕·ͩແ͍
    •JOEJDBUPSͷΞχϝʔγϣϯʹ͸HSBQIJDT-BZFS͕͓͢͢Ί

    View full-size slide

  20. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide

  21. ࢀߟϦϯΫ
    ɾ$VTUPNJ[JOH$PNQPTF1BHFSXJUIGVOJOEJDBUPSTBOEUSBOTJUJPOT
    ɾ8IBU`TOFXJO+FUQBDL$PNQPTF
    ɾ1BHFSJO$PNQPTF
    ɾBOESPJEYDPNQPTFGPVOEBUJPOQBHFS
    ɾ"DDPNQBOJTU1BHFSMBZPVUT
    ɾ+FUQBDLDPNQPTFŠ)PXUPJNQMFNFOU$VTUPN1BHFS*OEJDBUPST

    View full-size slide