Slide 1
Slide 1 text
2019.02.28
Kenichi Kambara (@korodroid)
ʲAndroidʳ
AndroidΞϓϦͷUI/UXվળྫͦͷ2
potatotips #59
Slide 2
Slide 2 text
About me
•ϞόΠϧؔ࿈׆ಈ
•ࠃ֎Ͱͷߨԋ׆ಈ
• Droidcon UK/FR/NL/ES/SH
• Developers Summit
• Android Bazaar and Conference
• StackOverflow DevDays
• Cloud Days
•ॻ੶ࣥච
•ݸਓϒϩάʮMobile Dev Blogʯ
•ձࣾϒϩάʮਆݪ݈ҰͷAndroidͰ͕Δੈքʯ
•झຯɿཱྀߦʢಛʹॳΊͯͷॴɿݱࡏ26Χࠃʣ
•NTTςΫϊΫϩεɹॴଐ
ਆݪɹ݈Ұ(@korodroid)
Slide 3
Slide 3 text
•͓ͷΞϓϦ
•UI/UXվળͷBefore/After
•ࠓճͷ͓ʢϨΠΞτʣ
Agenda
Slide 4
Slide 4 text
͓ͷΞϓϦ
Slide 5
Slide 5 text
ηΧΠϑΥϯ
Slide 6
Slide 6 text
UI/UXվળͷBefore/After
Slide 7
Slide 7 text
Before [Supporting 18 Languages]
Slide 8
Slide 8 text
18ϲࠃޠˠ100ϲࠃޠରԠ͢Δͱ…
Slide 9
Slide 9 text
After [Supporting 100 Languages]
Slide 10
Slide 10 text
UI/UXվળྫ
Slide 11
Slide 11 text
ଟ͘ͷ߲͔Βͷબ
Ωʔϫʔυݕࡧ
Dialog with Search Feature
Slide 12
Slide 12 text
search-dialog by @mirrajabi
https://github.com/mirrajabi/search-dialog
Slide 13
Slide 13 text
Implementation Sample
data class SampleModel(private var title: String) : Searchable {
// ϥΠϒϥϦͷSearchableΠϯλϑΣʔε࣮ͷͨΊ
override fun getTitle(): String {
return title;
}
}
࣮Πϝʔδ: SampleModel.kt (ϞσϧΫϥε(Ϧετͷ֤߲))
Slide 14
Slide 14 text
Implementation Sample
private fun createSampleList(): ArrayList{
val items = ArrayList()
items.add(SampleModel(“߲1", R.drawable.image1))
items.add(SampleModel("߲2", R.drawable.image2))
items.add(SampleModel("߲3", R.drawable.image3))
items.add(SampleModel("߲4", R.drawable.image4))
items.add(SampleModel("߲5", R.drawable.image5))
return items
}
࣮Πϝʔδ: MainActivity.kt (Ϧετ߲ͷੜ)
Slide 15
Slide 15 text
Implementation Sample
private fun showSampleDialog() {
SampleSearchDialogCompat(this, “߲ΛબΜͰ͍ͩ͘͞ɻ",
"߲", null, createSampleList(),
SearchResultListener { dialog, item, position ->
Toast.makeText(this, item.title, Toast.LENGTH_SHORT
).show()
dialog.dismiss()
}
).show()
}
࣮Πϝʔδ: MainActivity.kt (μΠΞϩάදࣔ/Πϕϯτॲཧ)
Slide 16
Slide 16 text
ͪΐͬ͜ͱϋϚͬͨ͜ͱ
Slide 17
Slide 17 text
[Problem] Index of Selected Item after Search
Slide 18
Slide 18 text
[Before]Implementation
private fun showCountryListDialog() {
CountrySearchDialogCompat(this, "Select Country",
"Country name", null, createSampleLocalContacts(),
SearchResultListener { dialog, item, position ->
// [OLD]position͕બ͞Ε߲ͨͱߟ͑ɺॲཧ
// …
dialog.dismiss()
}
).show()
}
positionʹҙਤͨ͠ͱҟͳΔΠϯσοΫε͕ฦͬͯ͘Δ
(ݕࡧޙʹީิ͕ϑΟϧλϦϯά͞Ε߲ͨͰͷΠϯσοΫε)
Slide 19
Slide 19 text
[After]Implementation
ϞσϧଆʹϢχʔΫͳΠϯσοΫεΛՃ
(ͦͷΠϯσοΫεΛ༻͍ͯॲཧΛ࣮ࢪ͢ΔΑ͏ʹमਖ਼)
private fun showCountryListDialog() {
CountrySearchDialogCompat(this, "Select Country",
"Country name", null, createSampleLocalContacts(),
SearchResultListener { dialog, item, position ->
// [NEW]ϞσϧϢχʔΫΠϯσοΫεՃ+ಉΠϯσοΫεΛ༻͍ͯॲཧ
// …
dialog.dismiss()
}
).show()
}
Slide 20
Slide 20 text
•search-dialog
https://github.com/mirrajabi/search-dialog
Reference
Slide 21
Slide 21 text
Please let me know if you have any requests
such as technical speeches, technical writings and so on.
Facebook:http://fb.com/kanbara.kenichi
Google+:+Kenichi Kambara
LinkedIn:http://www.linkedin.com/in/korodroid
Twitter:@korodroid
Thank you so much