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

今時のProgress indicator / Replacing ProgressDialog with ProgressBar

今時のProgress indicator / Replacing ProgressDialog with ProgressBar

punchdrunker

October 06, 2018
Tweet

More Decks by punchdrunker

Other Decks in Programming

Transcript

  1. ࠓ࣌ͷProgress indicator
    by punchdrunker

    View Slide

  2. ࣗݾ঺հ
    ‣ ߴߍଔۀ·Ͱࡳຈࡏॅ
    ‣ 2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ
    ‣ 2011೥ʙ ϛΫγΟ
    ‣ Ո଒ΞϧόϜ ΈͯͶ
    ‣ DroidKaigiͱ͔shibuya.apkӡӦ

    View Slide

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

    View Slide

  4. ༻ޠͷઆ໌
    ‣ ProgressDialog
    ‣ ͔ͭͯར༻͞Ε͍ͯͨΫϧΫϧDialogΫϥε
    ‣ ProgressBar
    ‣ ࠓ࠷΋ར༻͞Ε͍ͯͦ͏ͳΫϧΫϧΛදࣔ͢ΔΫϥε
    ‣ Progress indicators
    ‣ Material Design Guidelineʹग़ͯ͘Δ໊শͰɺ୯ʹ
    ʮਐḿΛදࣔ͢Δ෦඼ʯ

    View Slide

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

    View Slide

  6. ProgressDialogͷޭࡑ
    ‣ ToastϥΠΫʹؾܰʹදࣔͰ͖Δ
    ‣ ίϐϖ͞Ε͕ͪ
    ‣ දࣔதʹը໘ͷૢ࡞ΛېࢭͰ͖Δ
    ‣ Ϣʔβʹͱͬͯ͸ෆࣗ༝ʹײ͡Δ
    ‣ DialogFragmentͰྨࣅ඼΋࣮૷Ͱ͖Δ
    ‣ ϥΠϑαΠΫϧʹؾΛ෇͚ͳ͍ͱ...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

  12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

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

    View Slide

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

    View Slide

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




    View Slide

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

    View Slide

  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ߋ৽ }
    }

    View Slide

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

    View Slide

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

    View Slide

  27. FIN

    View Slide