今時のProgress indicator / Replacing ProgressDialog with ProgressBar

今時のProgress indicator / Replacing ProgressDialog with ProgressBar

4f31137c606d3d1c06d0d86fc7fd4bdd?s=128

punchdrunker

October 06, 2018
Tweet

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