今時のProgress indicator / Replacing ProgressDialog with ProgressBar

Transcript

1. ࠓ࣌ͷProgress indicator by punchdrunker

2. ࣗݾ঺հ ‣ ߴߍଔۀ·Ͱࡳຈࡏॅ ‣ 2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ ‣ 2011೥ʙ ϛΫγΟ ‣

   Ո଒ΞϧόϜ ΈͯͶ ‣ DroidKaigiͱ͔shibuya.apkӡӦ

3. ՝୊ ‣ 11݄·Ͱʹ͸targetSdk26ʹ͠ͳ͍ͱ ‣ ProgressDialog͸API26͔Βඇਪ঑ʹ ‣ ͱΓ͋͑ͣஔ׵ͨ͠DialogFragment ͸IllegalStateException ‣ ͦ΋ͦ΋Material

   Designʹ४ڌ͢Δ ΂͖

4. ༻ޠͷઆ໌ ‣ ProgressDialog ‣ ͔ͭͯར༻͞Ε͍ͯͨΫϧΫϧDialogΫϥε ‣ ProgressBar ‣ ࠓ࠷΋ར༻͞Ε͍ͯͦ͏ͳΫϧΫϧΛදࣔ͢ΔΫϥε ‣

   Progress indicators ‣ Material Design Guidelineʹग़ͯ͘Δ໊শͰɺ୯ʹ ʮਐḿΛදࣔ͢Δ෦඼ʯ

5. എܠ ެࣜͷϦϑΝϨϯεͰ͸ɺAPI Level26͔ΒProgressDialog ͸ެࣜʹඇਪ঑ͱ͞Εɺ ProgressBar ΍ ௨஌ Λ࢖ͬͯਐ ḿΛදࣔ͢Δ΂͖ɺͱ͍͏هࡌ

6. ProgressDialogͷޭࡑ ‣ ToastϥΠΫʹؾܰʹදࣔͰ͖Δ ‣ ίϐϖ͞Ε͕ͪ ‣ දࣔதʹը໘ͷૢ࡞ΛېࢭͰ͖Δ ‣ Ϣʔβʹͱͬͯ͸ෆࣗ༝ʹײ͡Δ ‣

   DialogFragmentͰྨࣅ඼΋࣮૷Ͱ͖Δ ‣ ϥΠϑαΠΫϧʹؾΛ෇͚ͳ͍ͱ...

7. MDCతΫϧΫϧ (Progress indecators) ༻్ ଴ͪ࣌ؒ/ॲཧ࣌ؒͷදݱΛ͢ΔͨΊͷ΋ͷ छྨ Linear ͱ Circular ͷ2ͭ

   material.ioΑΓ

8. Linear ͱ Circular ͷ2ͭ͸ಉ͡ProgressBarͰɺstyleΛࢦఆ ͢ΔࣄͰܗΛม͑Δࣄ͕ग़དྷΔ ͲͬͪΛ࢖ͬͯ΋͍͍͚ͲɺͲͪΒ͔ʹ౷Ұͨ͠ํ͕ྑ͍

9. ਐḿදࣔͷͨΊͷݪଇ ‣ Informative: ͨͩͷ૷০Ͱ͸ͳ͘ҙຯͷ͋Δදࣔ ‣ Animated: ஫ҙΛҾ͘ඞཁ͕͋Δ ‣ Consistent: Ұ؏ੑ

10. ഑ஔ ॲཧ΍௨৴͕׬ྃͨ࣌͠ʹදࣔ͞ΕΔ෦෼ʹຒΊࠐ·Εͯ ͍Δ΂͖ɻ Ϧετ͕දࣔ͞ΕΔ༧ఆͷ৔ॴʹຒΊࠐΜͩΓɺબ୒ͨ͠ itemʹԊͬͯදࣔ͢ΔͳͲɻ

11. None
12. None

13. දࣔΛ଴ͭදݱ͸ॻ͍ͯ͋Δ͚Ͳɺߋ৽ܥ͸? (Ϣʔβʔͷ౤ߘ΍ฤूૢ࡞ͳͲ)

14. ༗໊ͳΞϓϦͷࣄྫ ‣ twitter ‣ facebook ‣ gmail ‣ airbnb

15. ༗໊ͳΞϓϦͷࣄྫ ౤ߘɺฤूɺ࡟আ͸ͦ΋ͦ΋ॲཧதදࣔͤͣʹɺ׬ྃͨ͠ ϑϦΛͯ͠ΤϥʔʹͳͬͨΒ௨஌͢Δ͜ͱ͕ଟ͍ ௨৴͢Δ͔Βͱ͍ͬͯɺશͯͷ௨৴ॲཧͰProgressBarΛද ࣔ͢Δඞཁ͸ͳ͍

16. ProgressBarΛग़͢৚݅ Ͳ͏ͯ͠΋ϢʔβʔΛ଴ͨͤͳ͍ͱ͍͚ͳ͍ͱ͜ΖͰ࢖͏ Α͏ʹͨ͠ํ͕Ϣʔβʔʹ͸༏͍͠ ৽͍͠৘ใͷऔಘ͸௨৴ͳͲͷॲཧ͕ऴΘΒͳ͍ͱදࣔͰ ͖ͳ͍͕ɺͦΕҎ֎ͷૢ࡞͸جຊతʹ͝·͔ͤΔɻ

17. ஔ͖׵͕͑໘౗ͳύλʔϯ ‣ ϘλϯΛλοϓ ‣ ԿΒ͔ͷ௨৴ॲཧ ‣ ੒ޭͨ͠Β࣍ͷը໘ʹҾ਺Λ౉͠ͳ͕ΒભҠ σʔλΛදࣔ͢΂͖৔ॴʹindicatorΛ഑ஔ͠ͳ͍ͱ͍͚ͳ ͘ͳͬͨͷͰɺ ը໘ભҠ͔ͯ͠Β௨৴Λߦ͍ɺProgressDialogΛ

18. ͓·͚: ࣌ؒͷ͔͔Δॲཧͷදݱ

19. None

20. ͜ΜͳUIඪ४Ͱ༻ҙ͞Εͯͳ͍...

21. ࡞Ζ͏ ButtonΛܧঝͯ͠ɺViewΛࣗલͰΰχϣΰχϣ͢Ε͹ग़དྷ ͦ͏ɻ ໘౗ͳͷͰࠓճ͸ConstrainLayoutΛܧঝͯ͠ɺClickableͳ CustomViewΛ࡞ͬͨɻ Layoutͷ࣮૷Ͱ͋Ε͹xmlͰϨΠΞ΢τΛఆٛͰ͖ͯ؆୯ ʹݟͨ໨Λ͍͡Δ͜ͱ͕ग़དྷΔɻ

22. ϨΠΞ΢τ(େମ) TextViewͱProgressBarͷvisibilityΛ੾Γସ͑Ε͹Αͦ͞ ͏ɻ ࠓճ͚ͩͰͳ͘ɺσʔλΛදࣔ͢Δ༧ఆͷ৔ॴʹindicator Λஔ͘৔߹͸visibilityͷ੾Γସ͕͑؆୯ͦ͏ɻ <androidx.constraintlayout.widget.ConstraintLayout ...> <TextView android:text="Tap!" ...

    /> <ProgressBar android:visibility="gone" ... /> </androidx.constraintlayout.widget.ConstraintLayout>

23. ࣮૷ ίϯετϥΫλͰ inflateͯ͠ɺOnClickListenerͱλονΠ ϕϯτΛࣗલͰϋϯυϦϯά

24. ࣮૷ class CustomButton(context: Context, attrs: AttributeSet?) : ConstraintLayout(context, attrs) {

    var cListener: OnClickListener? = null constructor() { ... // inflate} override fun setOnClickListener(listener: OnClickListener?) { cListener = listener } override fun dispatchTouchEvent(ev: MotionEvent): Boolean { ... // ACTION_UPͰonClickΛinvoke } // Activity͔ΒݺͿ fun toggle() { ... // visibilityߋ৽ } }

25. Activityଆ binding.customButton.setOnClickListener { button -> (button as CustomButton).toggle() }

26. Demo ࣮૷͸ͪ͜Β https://github.com/punchdrunker/hocho/pull/42

27. FIN