Slide 1

Slide 1 text

ࠓ࣌ͷProgress indicator by punchdrunker

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

FIN