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

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

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

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

February 28, 2019
Tweet

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