Давайте обращать внимание на детали? (Gorod.it, Томск, 10.11.19)

Transcript

1. Давайте обращать внимание на детали? Алексей Быков 10.11.18
2. ๏ Android Developer at KasperskyLab ๏ Mosdroid Speaker ๏ Android Academy MSK Co-orgaznizer ๏ Passionate about mobile UX About 2
3. !3
4. !4
5. !5 Don’t do that
6. Старт приложения 6
7. Старт приложения 7 Cold start Hot start Warm start
8. Cold start 8
9. Cold start 9 Первый запуск приложения Создание процесса приложения Пользователь видит белое окно
10. Hot start 10
11. Hot start 11 Приложение уже запускалось Пересоздание процесса (Возможно) Пользователь всё ещё видит белое окно Task с Activities жив (Возможно)
12. Warm start 12
13. Warm start 13 Приложение уже запускалось Процесс приложения жив Пользователь не видит белое окно
14. Проблема: Белое окно 14
15. Белое окно: А точно ли проблема? 15
16. Material Design 16
17. Material Design 17 Placeholder Branded
18. Placeholder 18 Привязан к пользовательскому интерфейсу Минимализм Не надоедает пользователю Грузится быстрее Нет «вау» эффекта
19. Branded 19 Грузится дольше Подходит для крупных компаний Больше возможности с анимациями Может надоесть пользователю
20. Реализация 20
21. Manifest 21 <activity android:name=".activities.SplashActivity" android:theme="@style/SplashScreen"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
22. 22 <activity android:name=".activities.SplashActivity" android:theme="@style/SplashScreen"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> Manifest
23. 23 Style <style name="SplashScreen" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/background_splash</item> <item name="colorAccent">@color/light_background</item> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:windowTranslucentStatus">true</item> </style>
24. 24 Style <style name="SplashScreen" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/background_splash</item> <item name="colorAccent">@color/light_background</item> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:windowTranslucentStatus">true</item> </style>
25. 25 Style: API 26+ <style name="Splashscreen" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowSplashscreenContent">@drawable/splashscreen</item> </style>
26. 26 Drawable (Branded) <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <color android:color="@color/colorAccent"/> </item> <item android:drawable="@drawable/car3" android:gravity="center_horizontal|center_vertical"/> </layer-list>
27. 27 Drawable (Branded) <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <color android:color="@color/colorAccent"/> </item> <item android:drawable="@drawable/car3" android:gravity="center_horizontal|center_vertical"/> </layer-list>
28. 28 Drawable (Placeholder) <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity=«opaque" > <item> <shape> <solid android:color="@color/grey"/> </shape> </item> <item android:height="?actionBarSize" android:gravity="top"> <shape android:shape="rectangle"> <solid android:color="?colorPrimary"/> </shape> </item> </layer-list>
29. 29 Drawable (Placeholder) <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity=«opaque" > <item> <shape> <solid android:color="@color/grey"/> </shape> </item> <item android:height="?actionBarSize" android:gravity="top"> <shape android:shape="rectangle"> <solid android:color="?colorPrimary"/> </shape> </item> </layer-list>
30. Как делать не надо 30
31. Как делать не надо 31 Http-запросы в SplashScreen Использовать таймеры Использовать текст в Branded Screen
32. !32
33. Авторизация 33
34. Don’t do that
35. OnKeyboardStateChangeListener 35
36. OnKeyboardStateChangeListener 36 ¯ \ _ (ツ) _ / ¯
37. Manifest 37 <activity android:name=".MainActivity" android:windowSoftInputMode="adjustResize"/>
38. Manifest 38 <activity android:name=".MainActivity" android:windowSoftInputMode="adjustResize"/>
39. ViewGroup 39 fun ViewGroup.onKeyboardStateChanged(activity: Activity, listener: (Boolean) -> Unit) { viewTreeObserver.addOnGlobalLayoutListener { val screenSize = Point() activity.windowManager.defaultDisplay.getSize(screenSize) val rect = Rect() getWindowVisibleDisplayFrame(rect) val diff = screenSize.y - rect.bottom listener.invoke(diff != 0) } }
40. ViewGroup 40 fun ViewGroup.onKeyboardStateChanged(activity: Activity, listener: (Boolean) -> Unit) { viewTreeObserver.addOnGlobalLayoutListener { val screenSize = Point() activity.windowManager.defaultDisplay.getSize(screenSize) val rect = Rect() getWindowVisibleDisplayFrame(rect) val diff = screenSize.y - rect.bottom listener.invoke(diff != 0) } }
41. ViewGroup 41 fun ViewGroup.onKeyboardStateChanged(activity: Activity, listener: (Boolean) -> Unit) { viewTreeObserver.addOnGlobalLayoutListener { val screenSize = Point() activity.windowManager.defaultDisplay.getSize(screenSize) val rect = Rect() getWindowVisibleDisplayFrame(rect) val diff = screenSize.y - rect.bottom listener.invoke(diff != 0) } }
42. ViewGroup 42 fun ViewGroup.onKeyboardStateChanged(activity: Activity, listener: (Boolean) -> Unit) { viewTreeObserver.addOnGlobalLayoutListener { val screenSize = Point() activity.windowManager.defaultDisplay.getSize(screenSize) val rect = Rect() getWindowVisibleDisplayFrame(rect) val diff = screenSize.y - rect.bottom listener.invoke(diff != 0) } }
43. Fragment/Activity 43 ltRoot.onKeyboardStateChanged(activity, { isShown -> ivHeader.show(!isShown) })
44. !44
45. !45 Don’t do that
46. EditText 46 <EditText android:inputType="textEmailAddress" android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" />
47. EditText 47 <EditText android:inputType="textEmailAddress" android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" />
48. !48
49. Обработка ошибок 49
50. WTF? 50 fun handleError(e: Throwable) { viewState.showError("Какие-то проблемы..") }
51. Какие-то проблемы..
53. 53 Don’t do that
55. 55 Don’t do that
56. Try again later — no more! 56 https://bit.ly/2ALQF8D
57. Валидация 57
58. Валидация 58 Отображайте ошибки в TextInputLayout Убирайте ошибки в afterTextChanged
59. !59
60. NavigationView 60
61. Don’t do that
62. Start Activity 62 handler.postDelayed({ startActivity(Intent(this, TestActivity::class.java)) overridePendingTransition(R.anim.move_right_in_activity, R.anim.move_left_out_activity) }, 300)
63. Start Activity 63 override fun finish() { super.finish() overridePendingTransition(R.anim.move_left_in_activity, R.anim.move_right_out_activity) }
64. !64
65. !65
66. !66
67. RecyclerView 67
68. Don’t do that
69. Scrollbar 69 <android.support.v7.widget.RecyclerView android:scrollbars="vertical" android:id="@+id/rv_test" android:layout_width="match_parent" android:layout_height="wrap_content"/>
70. Scrollbar 70 <android.support.v7.widget.RecyclerView android:scrollbars="vertical" android:id="@+id/rv_test" android:layout_width="match_parent" android:layout_height="wrap_content"/>
71. Fab animation 71 class RecyclerViewWithFloatingActionButton : RecyclerView { var mFloatingActionButton: FloatingActionButton? = null constructor(context: Context) : super(context) {} constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {} constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {} override fun onScrolled(dx: Int, dy: Int) { super.onScrolled(dx, dy) if (dy > 0) { // Scrolling up mFloatingActionButton?.hide() } else { // Scrolling down mFloatingActionButton?.show() } } }
72. Fab animation 72 class RecyclerViewWithFloatingActionButton : RecyclerView { var mFloatingActionButton: FloatingActionButton? = null constructor(context: Context) : super(context) {} constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {} constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {} override fun onScrolled(dx: Int, dy: Int) { super.onScrolled(dx, dy) if (dy > 0) { // Scrolling up mFloatingActionButton?.hide() } else { // Scrolling down mFloatingActionButton?.show() } } }
73. Fab animation 73 class RecyclerViewWithFloatingActionButton : RecyclerView { var mFloatingActionButton: FloatingActionButton? = null constructor(context: Context) : super(context) {} constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {} constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {} override fun onScrolled(dx: Int, dy: Int) { super.onScrolled(dx, dy) if (dy > 0) { // Scrolling up mFloatingActionButton?.hide() } else { // Scrolling down mFloatingActionButton?.show() } } }
74. !74
75. !75 Don’t do that
76. Debounce Click 76 <ru.alexbykov.sampleapplication.RecyclerViewWithFloatingActionButton android:splitMotionEvents="false" android:scrollbars="vertical" android:id="@+id/rv_test" android:layout_width="match_parent" android:layout_height="wrap_content"/>
77. Debounce Click 77 <ru.alexbykov.sampleapplication.RecyclerViewWithFloatingActionButton android:splitMotionEvents="false" android:scrollbars="vertical" android:id="@+id/rv_test" android:layout_width="match_parent" android:layout_height="wrap_content"/>
78. Debounce Click 78 abstract class DebounceOnClickListener() : View.OnClickListener { companion object { const private val CLICK_DELAY = 500L private var sIsClickEnabled = true } private val mClickLockRunnable = Runnable { sIsClickEnabled = true } override fun onClick(view: View?) { if (sIsClickEnabled) { sIsClickEnabled = false onDelayedClick(view) view?.postDelayed(mClickLockRunnable, CLICK_DELAY) } } abstract fun onDelayedClick(view: View?) }
79. Extension 79 fun View.setDebounceOnClickListener(listener: (view: View?) -> Unit) { setOnClickListener(object : DebounceClickListener() { override fun onDelayedClick(view: View?) { listener.invoke(view) } }) }
80. Adapter 80 itemView.setDebounceOnClickListener { mListener?.invoke(id) }
81. Пагинация 81
82. Пагинация 82 Делайте подгрузку с отступом Показывайте ошибку в конце списка
83. !83
84. !84
85. NoPaginate 85
86. NoPaginate 86 val noPaginate = NoPaginate.with(recyclerView) .setOnLoadMoreListener { //http or db request } .build()
87. NoPaginate 87 val noPaginate = NoPaginate.with(recyclerView) .setOnLoadMoreListener { //http or db request } .setLoadingTriggerThreshold(5) //0 by default .setCustomErrorItem(CustomErrorItem()) .setCustomLoadingItem(CustomLoadingItem()) .build()
88. NoPaginate 88 implementation 'ru.alexbykov:nopaginate:0.9.9' https://github.com/NoNews/NoPaginate
89. !89
90. Animation 90 TransitionManager.beginDelayedTransition(rootView)
91. !91
92. Давайте обращать внимание на детали? 92
93. Давайте обращать внимание на детали! 93
94. Let’s talk @NoNews @NoNews me@alexbykov.ru