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