УДК 004.451.9 Android:004.5
ББК 32.972.11
К49
К49 Проектирование пользовательского интерфейса в Android/ пер. с англ.
А. Н. Киселева. 2-е изд. – М.: ДМК Пресс, 2017. – 452 с.: ил.
Клифтон Я.
ISBN 978-5-97060-449-6
С развитием операционной системы Android и увеличением ее конкурентоспособности
разработчики признали исключительную важность хорошего оформления приложений.
В виде положений материального дизайна компания Google представила самые
радикальные визуальные изменения, которые когда-либо производились, и подняла
значимость эффективного дизайна на еще более высокий уровень. В данной книге автор
демонстрирует, как создавать исключительно удобные и внешне очень привлекательные
интерфейсы. Книга научит вас создавать приложения, использующие предыдущий
опыт пользователя и никогда не испытывающие его терпения! Приложения, успешно
осваиваемые новыми пользователями с первой попытки!
Издание предназначено всем разработчикам Android-приложений, как начинающим,
так и более опытным.
УДК 004.451.9 Android:004.5
ББК 32.972.11
Authorized translation from the English language edition, entitled ANDROID USER INTERFACE
DESIGN: IМPLEMENTING MAТERIAL DESIGN FOR DEVELOPERS, 2nd Edition;
ISBN 0134191404; Ьу CLIFTON, IAN G.; published Ьу Pearson Education Inc., publishing as
Addison-Wesley Professional. Copyright © 2016 Ьу Pearson Education, lnc.
All rights reserved. No part of this book may Ье reproduced or transmitted in any form or Ьу
any means, electronic or mechanical, including photocopying, recording or Ьy any information storage
retrieval system, without permission from Pearson Education Inc. RUSSIAN Language edition
puЫished Ьу DМК PUBLISHERS. Copyright © 2017.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой
бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев
авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность
технических ошибок все равно существует, издательство не может гарантировать абсолютную
точность и правильность приводимых сведений. В связи с этим издательство не несет ответственности
за возможные ошибки, связанные с использованием книги.
ISBN 978-0-134-19140-9 (анг.) © 2016 Pearson Education, Inc.
ISBN 978-5-97060-449-6 (рус.) © Оформление, издание, перевод, ДМК Пресс, 2017
Стр.5
Содержание
Предисловие ........................................................................................... 14
Благодарности ........................................................................................ 15
Об авторе ................................................................................................. 16
Введение .................................................................................................. 17
Часть I. ОСНОВЫ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ .......... 19
Глава 1. Пользовательский интерфейс Android
и материальный дизайн ........................................................................ 20
Краткая история развития дизайна Android .............................................................................. 20
Материальный дизайн ....................................................................................................................... 23
Основные понятия ......................................................................................................................... 23
Взаимодействия и анимация ...................................................................................................... 26
Типографика ..................................................................................................................................... 27
Единицы измерения и выравнивание ..................................................................................... 28
Веб-сайт о дизайне Android .............................................................................................................. 28
Основные принципы ........................................................................................................................... 29
Делайте что-то одно, но делайте это хорошо ........................................................................ 29
Будьте вежливы ............................................................................................................................... 31
Образы, образы, образы ................................................................................................................ 32
Простое, но мощное ....................................................................................................................... 33
Единообразие с платформой....................................................................................................... 35
Покорите пользователя ................................................................................................................ 36
Стандартные компоненты ................................................................................................................. 36
Системные панели .......................................................................................................................... 36
Уведомления ..................................................................................................................................... 37
Панель приложения ....................................................................................................................... 38
Вкладки и навигационное меню ................................................................................................ 40
Плавающая кнопка ......................................................................................................................... 40
Поддержка разных устройств .......................................................................................................... 41
Как избежать болезненных ошибок .............................................................................................. 42
Кнопка «Меню» ............................................................................................................................... 42
Долгое нажатие ................................................................................................................................ 42
Пиктограммы уведомлений ........................................................................................................ 43
Стили из других платформ ......................................................................................................... 43
В заключение ......................................................................................................................................... 44
Стр.7
Содержание 7
Глава 2. Виджеты – строительные блоки
пользовательского интерфейса .......................................................... 45
Что такое виджет .................................................................................................................................. 45
Идентификаторы виджетов ........................................................................................................ 47
Размеры виджетов .......................................................................................................................... 48
Отображение текста ............................................................................................................................ 52
TextView ............................................................................................................................................. 53
EditText ............................................................................................................................................... 56
Button .................................................................................................................................................. 56
Отображение изображений .............................................................................................................. 57
Фон ...................................................................................................................................................... 57
ImageView .......................................................................................................................................... 58
ImageButton ...................................................................................................................................... 59
Виджеты для ввода информации пользователем ..................................................................... 59
Другие примечательные виджеты .................................................................................................. 63
Прием и обработка событий ............................................................................................................. 66
OnClickListener ............................................................................................................................... 66
OnLongClickListener ...................................................................................................................... 66
OnTouchListener .............................................................................................................................. 66
Другие обработчики событий .......................................................................................................... 67
В заключение ......................................................................................................................................... 67
Глава 3. Создание пользовательских интерфейсов
с применением фрагментов и групп компонентов ........................... 68
ViewGroup и типовые реализации ................................................................................................. 68
FrameLayout ...................................................................................................................................... 69
LinearLayout ..................................................................................................................................... 69
RelativeLayout .................................................................................................................................. 72
AdapterView ...................................................................................................................................... 74
ListView .............................................................................................................................................. 74
GridView ............................................................................................................................................ 76
Spinner ................................................................................................................................................ 76
Gallery ................................................................................................................................................. 77
Adapter ................................................................................................................................................ 77
Интерфейсы для AdapterView ....................................................................... 78
ViewPager ........................................................................................................................................... 78
Toolbar ................................................................................................................................................. 79
Другие примечательные реализации ViewGroup ..................................................................... 79
Инкапсуляция логики отображения с использованием фрагментов ................................ 81
Жизненный цикл фрагментов .................................................................................................... 82
Передача данных фрагменту ....................................................................................................... 83
Взаимодействие с Activity ........................................................................................................... 85
Транзакции с фрагментами ......................................................................................................... 87
Стр.8
8 Содержание
Обсуждение проблем ..................................................................................................................... 88
Библиотека поддержки ...................................................................................................................... 89
Библиотека CardView ................................................................................................................... 91
Библиотека Design ......................................................................................................................... 91
Библиотека GridLayout ................................................................................................................ 92
Библиотека Leanback..................................................................................................................... 92
Библиотека MediaRouter ............................................................................................................. 92
Библиотека Palette ......................................................................................................................... 92
Библиотека RecyclerView ............................................................................................................ 93
Библиотека Support Annotations ............................................................................................... 93
В заключение ......................................................................................................................................... 94
Глава 4. Добавление графики
и ресурсов в приложения ..................................................................... 95
Введение в ресурсы ОС Android ..................................................................................................... 95
Квалификаторы ресурсов ................................................................................................................. 96
Разрешение ...........................................................................................................................................101
Поддерживаемые файлы изображений ......................................................................................102
Растровые изображения .............................................................................................................103
Векторные изображения ............................................................................................................104
Изображения в формате Nine-Patch ............................................................................................104
Графические элементы в XML ......................................................................................................106
Список слоев ..................................................................................................................................107
Список состояний .........................................................................................................................108
Список уровней ............................................................................................................................. 111
TransitionDrawable ....................................................................................................................... 112
InsetDrawable ................................................................................................................................. 112
ClipDrawable ................................................................................................................................... 112
ScaleDrawable ................................................................................................................................. 113
ShapeDrawable................................................................................................................................ 113
VectorDrawable............................................................................................................................... 115
AnimatedVectorDrawable ............................................................................................................ 118
RippleDrawable............................................................................................................................... 119
Другие ресурсы ...................................................................................................................................120
Строки ..............................................................................................................................................121
Массивы ...........................................................................................................................................122
Цвета .................................................................................................................................................123
Размеры ............................................................................................................................................124
Анимации ........................................................................................................................................124
Числовые идентификаторы ......................................................................................................124
Меню .................................................................................................................................................125
В заключение .......................................................................................................................................126
Стр.9
Содержание 9
Часть II. ПОЛНЫЙ ПРОЦЕСС ПРОЕКТИРОВАНИЯ
И РАЗРАБОТКИ ......................................................................................127
Глава 5. Начало создания нового приложения ................................128
Методы проектирования .................................................................................................................128
Типичные методы .........................................................................................................................128
Проектирование с ориентацией на пользователя .............................................................129
Определение целей ............................................................................................................................132
Цели пользователей .....................................................................................................................132
Группы пользователей.................................................................................................................133
Цели продукта ................................................................................................................................134
Поддержка устройств и конфигураций ................................................................................135
Высокоуровневая диаграмма .........................................................................................................136
Эскизы ...................................................................................................................................................139
Начните с навигации ...................................................................................................................142
Информационное наполнение ......................................................................................................145
Эскиз страницы с описанием ....................................................................................................147
Поддержка нескольких устройств ..........................................................................................149
Соглашения об именовании ......................................................................................................150
Заготовки для ресурсов ..............................................................................................................151
В заключение .......................................................................................................................................152
Глава 6. Макетирование и разработка основы приложения .........153
Организация экранов и фрагментов ...........................................................................................153
Создание первого прототипа .........................................................................................................154
Вкладки ............................................................................................................................................156
Навигационное меню ..................................................................................................................158
Представление инструментов ..................................................................................................161
Фрагменты для вкладок .............................................................................................................166
Сведения об инструменте ..........................................................................................................180
Оценка первого прототипа .............................................................................................................184
Работа с пользователями ...........................................................................................................184
Свободное исследование ............................................................................................................185
Специализированные цели .......................................................................................................185
Динамические цели ......................................................................................................................186
Отзывы пользователей ...............................................................................................................186
Следующие шаги ...........................................................................................................................188
В заключение .......................................................................................................................................189
Глава 7. Визуальный дизайн ...............................................................190
Эскизы и графический дизайн ......................................................................................................190
Инструменты .......................................................................................................................................191
Стили ......................................................................................................................................................192
Стр.10
10 Содержание
Скевоморфизм ...............................................................................................................................192
Минимализм ...................................................................................................................................192
Плоский дизайн .............................................................................................................................193
Материальный дизайн ................................................................................................................193
Освещение ............................................................................................................................................194
Цвета .......................................................................................................................................................195
Теория ...............................................................................................................................................195
Выбор цветов ..................................................................................................................................198
Приложение выбора столярных инструментов .................................................................202
Текст ........................................................................................................................................................202
Контраст текста .............................................................................................................................203
Размер текста, стили оформления и заглавные буквы ....................................................204
Интервалы в тексте ......................................................................................................................204
Тени, отбрасываемые текстом ..................................................................................................205
Нестандартные шрифты .............................................................................................................205
Доступный словарь ......................................................................................................................207
Другие вопросы ..................................................................................................................................207
Разный объем текста ....................................................................................................................207
Размеры и доступность изображений....................................................................................208
Прозрачность и правило 3× .................................................................................... 208
Стандартные пиктограммы .......................................................................................................209
Навигация и визуализация переходов ..................................................................................209
Обработка ошибочных ситуаций ............................................................................................210
Пошаговое оформление ...................................................................................................................210
В заключение .......................................................................................................................................215
Глава 8. Реализация дизайна...............................................................216
Совместная работа с дизайнером .................................................................................................216
Нарезка графических ресурсов .....................................................................................................217
Простые нарезки ...........................................................................................................................218
Изображения в формате Nine-Patch ......................................................................................219
Создание альтернативных ресурсов для других размеров .............................................223
Темы и стили ........................................................................................................................................224
Деление дизайн-макета на виджеты ............................................................................................225
Разработка приложения выбора столярных инструментов ................................................227
Главный экран ................................................................................................................................227
Список инструментов..................................................................................................................236
Описание отдельных инструментов .......................................................................................249
Тестирование на разных типах устройств .................................................................................253
В заключение .......................................................................................................................................254
Глава 9. Украшение анимацией ...........................................................255
Назначение анимации ......................................................................................................................255
Анимация виджетов ..........................................................................................................................256
Стр.11
Содержание 11
Анимация свойств ..............................................................................................................................257
Управление анимацией свойств ....................................................................................................258
Обработчики ...................................................................................................................................258
Типы вычисляемых значений ...................................................................................................259
Интерполяция во времени .........................................................................................................262
Ключевые кадры ...........................................................................................................................264
Класс ViewPropertyAnimator .........................................................................................................265
Анимация вывода сообщений об ошибках в формах ............................................................265
Анимация пиктограмм .....................................................................................................................269
Анимация векторных пиктограмм ..........................................................................................269
Анимация растровых пиктограмм ..........................................................................................274
Простые переходы .............................................................................................................................275
Переходы между сценами ..........................................................................................................276
Переходы между экранами ........................................................................................................279
Переходы в виде расширяющегося круга .............................................................................283
В заключение .......................................................................................................................................286
Часть III. ДОПОЛНИТЕЛЬНЫЕ ВОПРОСЫ СОЗДАНИЯ
ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ ..........................................287
Глава 10. Продвинутые приемы .........................................................288
Выявление задержек .........................................................................................................................288
Использование Systrace для определения причин задержек .............................................290
Оптимизация изображений ............................................................................................................297
Сжатие изображений ...................................................................................................................297
Использование изображений подходящих размеров ......................................................299
Кэширование изображений .......................................................................................................303
Дополнительные методы увеличения производительности...............................................309
Управление сборкой мусора ......................................................................................................309
Шаблон «Держатель виджетов» ..............................................................................................310
Устранение избыточного рисования ......................................................................................312
Обозреватель иерархии ...................................................................................................................316
Поиск пропавших виджетов .....................................................................................................318
Устранение ненужных виджетов .............................................................................................319
Экспорт в формат PSD ...............................................................................................................319
Нестандартные шрифты ..................................................................................................................320
Комплексные виджеты TextView .................................................................................................323
Имеющиеся промежутки ...........................................................................................................323
Использование промежутков для отображения текста со сложным
оформлением ..................................................................................................................................325
Класс RecyclerView ...........................................................................................................................326
Диспетчер размещения ...............................................................................................................327
Адаптер .............................................................................................................................................327
Стр.12
12 Содержание
Аниматор элементов ....................................................................................................................328
Декорирование элементов .........................................................................................................328
В заключение .......................................................................................................................................328
Глава 11. Холсты и дополнительные приемы
отображения графики ...........................................................................330
Создание собственных графических элементов .....................................................................330
Основная идея................................................................................................................................330
Другие важные методы ...............................................................................................................331
Класс Paint ............................................................................................................................................332
Класс Canvas ........................................................................................................................................332
Работа с текстом .................................................................................................................................333
Простой текстовый элемент ......................................................................................................333
Улучшенный текстовый элемент .............................................................................................335
Работа с изображениями .................................................................................................................338
Цветовые фильтры.............................................................................................................................340
Простой цветовой фильтр ..........................................................................................................340
Цветовая матрица .........................................................................................................................341
Наложение изображений с помощью режимов PorterDuff ...........................................343
Шейдеры ...............................................................................................................................................353
Закругление краев изображений .............................................................................................353
Эффект градиентного растворения ........................................................................................356
В заключение .......................................................................................................................................359
Глава 12. Разработка собственных виджетов ..................................360
Основные идеи ....................................................................................................................................360
Измерение размеров .........................................................................................................................361
Размещение ..........................................................................................................................................361
Рисование .............................................................................................................................................362
Сохранение и восстановление состояния..................................................................................363
Создание собственного виджета ...................................................................................................363
Измерение .......................................................................................................................................365
Размещение дочерних виджетов .............................................................................................366
Создание изображения ...............................................................................................................366
Сохранение и восстановление состояния ............................................................................368
В заключение .......................................................................................................................................375
Глава 13. Обработка ввода и прокрутки ............................................376
Сенсорный ввод ..................................................................................................................................376
Другие формы ввода .........................................................................................................................378
Создание собственного виджета ...................................................................................................378
Создание первоначальных файлов виджета .......................................................................379
Измерение .......................................................................................................................................384
Стр.13
Содержание 13
Рисование ........................................................................................................................................387
Подготовка к обработке событий сенсорного ввода .........................................................392
Обработка событий сенсорного ввода ...................................................................................396
Прочие вопросы ............................................................................................................................412
В заключение .......................................................................................................................................412
Приложение A. Ресурсы Google Play .................................................413
Описание приложения .....................................................................................................................413
Список изменений .............................................................................................................................414
Пиктограмма приложения ..............................................................................................................415
Простой способ создания пиктограмм ..................................................................................416
Создание пиктограмм вручную ...............................................................................................417
Скриншоты...........................................................................................................................................421
Основной баннер ................................................................................................................................423
Рекламный баннер .............................................................................................................................425
Видео (YouTube) .................................................................................................................................426
Продвижение приложения .............................................................................................................426
Amazon Appstore .................................................................................................................................427
Приложение B. Справочник по типичным задачам .........................428
Сокрытие экранной клавиатуры ..................................................................................................428
Включение полноэкранного режима ...........................................................................................429
Предотвращение выключения экрана ........................................................................................430
Определение физических размеров экрана устройства .......................................................430
Определение размеров экрана в пикселях ................................................................................431
Определение разрешения экрана .................................................................................................431
Проверка подключения к сети ......................................................................................................432
Проверка, является ли текущий поток выполнения потоком
пользовательского интерфейса .....................................................................................................433
Нестандартные атрибуты виджетов ............................................................................................434
Предметный указатель .........................................................................441
Стр.14