AndroidアプリのUI/UX改善例その2

potatotips #59の発表資料です。
【Android枠】AndroidアプリのUI/UX改善例その2

Transcript

1. 2019.02.28 Kenichi Kambara (@korodroid) ʲAndroid࿮ʳ AndroidΞϓϦͷUI/UXվળྫͦͷ2 potatotips #59
2. 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)
3. •͓୊໨ͷΞϓϦ •UI/UXվળͷBefore/After •ࠓճͷ͓୊໨ʢϨΠΞ΢τʣ Agenda
4. ͓୊໨ͷΞϓϦ
5. ηΧΠϑΥϯ
6. UI/UXվળͷBefore/After
7. Before [Supporting 18 Languages]
8. 18ϲࠃޠˠ100ϲࠃޠରԠ͢Δͱ…
9. After [Supporting 100 Languages]
10. UI/UXվળྫ
11. ଟ͘ͷ߲໨͔Βͷબ୒ Ωʔϫʔυݕࡧ Dialog with Search Feature
12. search-dialog by @mirrajabi https://github.com/mirrajabi/search-dialog
13. Implementation Sample data class SampleModel(private var title: String) : Searchable { // ϥΠϒϥϦͷSearchableΠϯλϑΣʔε࣮૷ͷͨΊ override fun getTitle(): String { return title; } } ࣮૷Πϝʔδ: SampleModel.kt (ϞσϧΫϥε(Ϧετ಺ͷ֤߲໨))
14. Implementation Sample private fun createSampleList(): ArrayList<SampleModel>{ val items = ArrayList<CountryModel>() 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 (Ϧετ߲໨ͷੜ੒)
15. 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 (μΠΞϩάදࣔ/Πϕϯτॲཧ)
16. ͪΐͬ͜ͱϋϚͬͨ͜ͱ
17. [Problem] Index of Selected Item after Search
18. [Before]Implementation private fun showCountryListDialog() { CountrySearchDialogCompat(this, "Select Country", "Country name", null, createSampleLocalContacts(), SearchResultListener { dialog, item, position -> // [OLD]position͕બ୒͞Ε߲ͨ໨ͱߟ͑ɺॲཧ // … dialog.dismiss() } ).show() } positionʹ͸ҙਤͨ͠஋ͱҟͳΔΠϯσοΫε͕ฦͬͯ͘Δ
 (ݕࡧޙʹީิ͕ϑΟϧλϦϯά͞Ε߲ͨ໨಺ͰͷΠϯσοΫε)
19. [After]Implementation ϞσϧଆʹϢχʔΫͳΠϯσοΫεΛ௥Ճ
 (ͦͷΠϯσοΫεΛ༻͍ͯॲཧΛ࣮ࢪ͢ΔΑ͏ʹमਖ਼) private fun showCountryListDialog() { CountrySearchDialogCompat(this, "Select Country", "Country name", null, createSampleLocalContacts(), SearchResultListener { dialog, item, position -> // [NEW]Ϟσϧ΁ϢχʔΫΠϯσοΫε௥Ճ+ಉΠϯσοΫεΛ༻͍ͯॲཧ // … dialog.dismiss() } ).show() }
20. •search-dialog
 https://github.com/mirrajabi/search-dialog Reference
21. 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