Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
今時のProgress indicator / Replacing ProgressDialog with ProgressBar
punchdrunker
October 06, 2018
Programming
0
280
今時のProgress indicator / Replacing ProgressDialog with ProgressBar
punchdrunker
October 06, 2018
Tweet
Share
More Decks by punchdrunker
See All by punchdrunker
punchdrunker
2
510
punchdrunker
2
620
punchdrunker
0
980
punchdrunker
2
1.2k
punchdrunker
2
1.6k
punchdrunker
5
3.1k
punchdrunker
0
250
punchdrunker
1
300
punchdrunker
0
350
Other Decks in Programming
See All in Programming
makomakok
1
230
korosuke613
2
250
sansuke05
1
130
manfredsteyer
PRO
0
100
grapecity_dev
0
180
masui_masanori
1
250
grapecity_dev
1
180
grapecity_dev
0
200
ryosukes
0
1.3k
danilop
0
220
saten
1
170
grapecity_dev
0
170
Featured
See All Featured
jonyablonski
19
1.2k
mongodb
23
3.9k
lauravandoore
10
1.5k
iamctodd
19
2k
nonsquared
81
3.4k
chriscoyier
145
20k
lara
590
61k
maltzj
501
36k
danielanewman
200
20k
sferik
610
54k
addyosmani
311
21k
holman
288
130k
Transcript
ࠓ࣌ͷProgress indicator by punchdrunker
ࣗݾհ ‣ ߴߍଔۀ·Ͱࡳຈࡏॅ ‣ 2010ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ ‣ 2011ʙ ϛΫγΟ ‣
ՈΞϧόϜ ΈͯͶ ‣ DroidKaigiͱ͔shibuya.apkӡӦ
՝ ‣ 11݄·ͰʹtargetSdk26ʹ͠ͳ͍ͱ ‣ ProgressDialogAPI26͔Βඇਪʹ ‣ ͱΓ͋͑ͣஔͨ͠DialogFragment IllegalStateException ‣ ͦͦMaterial
Designʹ४ڌ͢Δ ͖
༻ޠͷઆ໌ ‣ ProgressDialog ‣ ͔ͭͯར༻͞Ε͍ͯͨΫϧΫϧDialogΫϥε ‣ ProgressBar ‣ ࠓ࠷ར༻͞Ε͍ͯͦ͏ͳΫϧΫϧΛදࣔ͢ΔΫϥε ‣
Progress indicators ‣ Material Design Guidelineʹग़ͯ͘Δ໊শͰɺ୯ʹ ʮਐḿΛදࣔ͢Δ෦ʯ
എܠ ެࣜͷϦϑΝϨϯεͰɺAPI Level26͔ΒProgressDialog ެࣜʹඇਪͱ͞Εɺ ProgressBar ௨ Λͬͯਐ ḿΛදࣔ͢Δ͖ɺͱ͍͏هࡌ
ProgressDialogͷޭࡑ ‣ ToastϥΠΫʹؾܰʹදࣔͰ͖Δ ‣ ίϐϖ͞Ε͕ͪ ‣ දࣔதʹը໘ͷૢ࡞ΛېࢭͰ͖Δ ‣ Ϣʔβʹͱͬͯෆࣗ༝ʹײ͡Δ ‣
DialogFragmentͰྨࣅ࣮Ͱ͖Δ ‣ ϥΠϑαΠΫϧʹؾΛ͚ͳ͍ͱ...
MDCతΫϧΫϧ (Progress indecators) ༻్ ͪ࣌ؒ/ॲཧ࣌ؒͷදݱΛ͢ΔͨΊͷͷ छྨ Linear ͱ Circular ͷ2ͭ
material.ioΑΓ
Linear ͱ Circular ͷ2ͭಉ͡ProgressBarͰɺstyleΛࢦఆ ͢ΔࣄͰܗΛม͑Δࣄ͕ग़དྷΔ ͲͬͪΛ͍͍͚ͬͯͲɺͲͪΒ͔ʹ౷Ұͨ͠ํ͕ྑ͍
ਐḿදࣔͷͨΊͷݪଇ ‣ Informative: ͨͩͷ০Ͱͳ͘ҙຯͷ͋Δදࣔ ‣ Animated: ҙΛҾ͘ඞཁ͕͋Δ ‣ Consistent: Ұ؏ੑ
ஔ ॲཧ௨৴͕ྃͨ࣌͠ʹදࣔ͞ΕΔ෦ʹຒΊࠐ·Εͯ ͍Δ͖ɻ Ϧετ͕දࣔ͞ΕΔ༧ఆͷॴʹຒΊࠐΜͩΓɺબͨ͠ itemʹԊͬͯදࣔ͢ΔͳͲɻ
None
None
දࣔΛͭදݱॻ͍ͯ͋Δ͚Ͳɺߋ৽ܥ? (Ϣʔβʔͷߘฤूૢ࡞ͳͲ)
༗໊ͳΞϓϦͷࣄྫ ‣ twitter ‣ facebook ‣ gmail ‣ airbnb
༗໊ͳΞϓϦͷࣄྫ ߘɺฤूɺআͦͦॲཧதදࣔͤͣʹɺྃͨ͠ ϑϦΛͯ͠ΤϥʔʹͳͬͨΒ௨͢Δ͜ͱ͕ଟ͍ ௨৴͢Δ͔Βͱ͍ͬͯɺશͯͷ௨৴ॲཧͰProgressBarΛද ࣔ͢Δඞཁͳ͍
ProgressBarΛग़݅͢ Ͳ͏ͯ͠ϢʔβʔΛͨͤͳ͍ͱ͍͚ͳ͍ͱ͜ΖͰ͏ Α͏ʹͨ͠ํ͕Ϣʔβʔʹ༏͍͠ ৽͍͠ใͷऔಘ௨৴ͳͲͷॲཧ͕ऴΘΒͳ͍ͱදࣔͰ ͖ͳ͍͕ɺͦΕҎ֎ͷૢ࡞جຊతʹ͝·͔ͤΔɻ
ஔ͖͕͑໘ͳύλʔϯ ‣ ϘλϯΛλοϓ ‣ ԿΒ͔ͷ௨৴ॲཧ ‣ ޭͨ͠Β࣍ͷը໘ʹҾΛ͠ͳ͕ΒભҠ σʔλΛද͖ࣔ͢ॴʹindicatorΛஔ͠ͳ͍ͱ͍͚ͳ ͘ͳͬͨͷͰɺ ը໘ભҠ͔ͯ͠Β௨৴Λߦ͍ɺProgressDialogΛ
͓·͚: ࣌ؒͷ͔͔Δॲཧͷදݱ
None
͜ΜͳUIඪ४Ͱ༻ҙ͞Εͯͳ͍...
࡞Ζ͏ ButtonΛܧঝͯ͠ɺViewΛࣗલͰΰχϣΰχϣ͢Εग़དྷ ͦ͏ɻ ໘ͳͷͰࠓճConstrainLayoutΛܧঝͯ͠ɺClickableͳ CustomViewΛ࡞ͬͨɻ Layoutͷ࣮Ͱ͋ΕxmlͰϨΠΞτΛఆٛͰ͖ͯ؆୯ ʹݟͨΛ͍͡Δ͜ͱ͕ग़དྷΔɻ
ϨΠΞτ(େମ) TextViewͱProgressBarͷvisibilityΛΓସ͑ΕΑͦ͞ ͏ɻ ࠓճ͚ͩͰͳ͘ɺσʔλΛදࣔ͢Δ༧ఆͷॴʹindicator Λஔ͘߹visibilityͷΓସ͕͑؆୯ͦ͏ɻ <androidx.constraintlayout.widget.ConstraintLayout ...> <TextView android:text="Tap!" ...
/> <ProgressBar android:visibility="gone" ... /> </androidx.constraintlayout.widget.ConstraintLayout>
࣮ ίϯετϥΫλͰ inflateͯ͠ɺOnClickListenerͱλονΠ ϕϯτΛࣗલͰϋϯυϦϯά
࣮ 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ߋ৽ } }
Activityଆ binding.customButton.setOnClickListener { button -> (button as CustomButton).toggle() }
Demo ࣮ͪ͜Β https://github.com/punchdrunker/hocho/pull/42
FIN