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 Slide

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

    View Slide

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

    View 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 Slide

  5. ެࣜͷղઆ΋ஸೡ😃

    View Slide

  6. Add a page indicator

    View Slide

  7. Add a page indicator

    View Slide

  8. +FUQBDL$PNQPTF

    View Slide

  9. "DDPNQBOJTU*OEJDBUPS࣮૷

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. *OEJDBUPS෦෼ͷ࣮૷
    🎉

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide