今時の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ʹԊͬͯදࣔ͢ΔͳͲɻ
13. දࣔΛ଴ͭදݱ͸ॻ͍ͯ͋Δ͚Ͳɺߋ৽ܥ͸? (Ϣʔβʔͷ౤ߘ΍ฤूૢ࡞ͳͲ)
14. ༗໊ͳΞϓϦͷࣄྫ ‣ twitter ‣ facebook ‣ gmail ‣ airbnb
15. ༗໊ͳΞϓϦͷࣄྫ ౤ߘɺฤूɺ࡟আ͸ͦ΋ͦ΋ॲཧதදࣔͤͣʹɺ׬ྃͨ͠ ϑϦΛͯ͠ΤϥʔʹͳͬͨΒ௨஌͢Δ͜ͱ͕ଟ͍ ௨৴͢Δ͔Βͱ͍ͬͯɺશͯͷ௨৴ॲཧͰProgressBarΛද ࣔ͢Δඞཁ͸ͳ͍
16. ProgressBarΛग़͢৚݅ Ͳ͏ͯ͠΋ϢʔβʔΛ଴ͨͤͳ͍ͱ͍͚ͳ͍ͱ͜ΖͰ࢖͏ Α͏ʹͨ͠ํ͕Ϣʔβʔʹ͸༏͍͠ ৽͍͠৘ใͷऔಘ͸௨৴ͳͲͷॲཧ͕ऴΘΒͳ͍ͱදࣔͰ ͖ͳ͍͕ɺͦΕҎ֎ͷૢ࡞͸جຊతʹ͝·͔ͤΔɻ
17. ஔ͖׵͕͑໘౗ͳύλʔϯ ‣ ϘλϯΛλοϓ ‣ ԿΒ͔ͷ௨৴ॲཧ ‣ ੒ޭͨ͠Β࣍ͷը໘ʹҾ਺Λ౉͠ͳ͕ΒભҠ σʔλΛදࣔ͢΂͖৔ॴʹindicatorΛ഑ஔ͠ͳ͍ͱ͍͚ͳ ͘ͳͬͨͷͰɺ ը໘ભҠ͔ͯ͠Β௨৴Λߦ͍ɺProgressDialogΛ
18. ͓·͚: ࣌ؒͷ͔͔Δॲཧͷදݱ
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