今時のProgress indicator / Replacing ProgressDialog with ProgressBar

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