Проектування мобільних застосунків

Екрани минулого

Одиниці вимірювання
Inches - дюйми
Pixels – точки
щільність пікселів
PPI (англ. pixels per inch) - пікселі на дюйм
розмір пікселя
Еволюція

Класифікація екранів
Книжкова (англ. Portrait)
Альбомна (англ. Landscape)
Квадратна (англ. Square)
Орієнтація

Історичні шляхи вирішення
Плюси:
мінімум часу розробника
Мінуси:
елементи зазвичай малі
наляпистий інтерфейс
необхідно прокручувати екран – не все видно
Статична розмітка

Історичні шляхи вирішення
Плюси:
все красиво виглядає
Мінуси:
дуже велика складність реалізації
дорого
передбачити усе неможливо
Динамічна розмітка

Роздільні здатності
для різних орієнтацій – різні розмітки
для різних розмірів – різні розмітки
Еволюційні рішення
Ми знаємо, що є телефони з розширеннями:
240×320 – можливі повороти
320×240 – неможливі повороти
240×240 – можливі повороти
160×240 – можливі повороти
480×640 – можливі повороти
Потрібно написати застосунок із 4-ма формами по 8 елементів управління на кожній
Задача

Роздільні здатності
щотижня по одному елементу на формі додають
що два тижні по 2 елементи переміщують
Додамо «романтики»

Роздільні здатності
необхідно враховувати роздільності
необхідно враховувати повороти
необхідно враховувати людей з проблемами зору
Висновки

Характеристики екрану
розмір екрану (англ. screen size) – фізичний розмір, діагональ в дюймах
щільність екрану (англ. density) – кількість пікселів на одиницю розміру, DPI
DPI (англ. dots per inch)
роздільна здатність (англ. resolution) – ширина та висота, пікселі
незалежний від щільності піксель (англ. density-independent pixel, dp) – віртуальна одиниця для абстрагування від реальної щільності. Далі – незалежний піксель.
пункт (англ. points, pt) – величина, що дорівнює 1/72 дюйма.
масштабонезалежна точка (англ. scale-independent pixels, sp) – текст, цілі числа, співпадає з dp.
Параметри
DPI – пристрої виводу (переважно принтери)
PPI – екрани
DPI vs PPI

Характеристики екрану
низька - ldpi (low) ~120dpi
середня - mdpi (medium) ~160dpi
висока - hdpi (high) ~240dpi
дуже висока - xhdpi (extra-high) ~320dpi
дуже дуже висока - xxhdpi (extra-extra-high) ~480dpi
дуже дуже дуже висока - xxxhdpi (extra-extra-extra-high) ~640dpi
Типи за щільністю
Скільки фізичних пікселів припадає на один незалежний піксель для високої щільності?
Запитання
Типи за щільністю
px = dp * (dpi / 160)

Характеристики екрану
Дизайнер спроектував, наприклад у Photoshop, дизайн вашого застосунку. Вам необхідно реалізувати його, базуючись на вказаних параметрах. У параметрах вказано три види шрифтів на екрані 24pt, 48pt та 56pt.
Задача

Характеристики екрану
1 inch = 72 pt.
1 px = 1 dp при 160 dpi
Визначимо розмір у дюймах на екрані:
S24 = 24pt * 1"/72pt = 1/3";
S48 = 48pt * 1"/72pt = 2/3";
S56 = 56pt * 1"/72pt = 7/9".
Визначимо розмір у незалежних пікселях та у звичайних пікселях, якщо у нас hdpi:
S'24=160dp*1/3"~54dp => 54px*240/160 = 81px
S'48=160dp*2/3"~107dp => 107px*240/160 ~ 160 px
S'56=160dp*7/9"=124dp => 124px*240/160 ~ 186 px
Рішення

Калькулятор
Демонстрація калькулятора
URL: http://angrytools.com/android/pixelcalc/

Приклад відображення елементів керування при різних розмірах екрану

Основні поняття XML (eXtensible Markup Language - «розширювана мова розмітки».)
Тег - значення
value
value1
value1
value2
value1
Атрибут name='my name'>value
спрощено:
Різниця між XML і HTML
XML не є заміною HTML. Вони призначені для вирішення різних завдань: XML вирішує завдання зберігання і транспортування даних, фокусуючись на тому, що таке ці самі дані, HTML же вирішує завдання відображення даних, фокусуючись на тому, як ці дані виглядають. Таким чином, HTML піклується про відображення інформації, а XML про транспортування інформації.
Теги XML не призначені. Ви повинні самі визначати потрібні теги.

ViewGroup
ViewGroup - розмітка, яка дозволяє розташувати один або кілька View.
Стандартні типи ViewGroups:
FrameLayout;
LinearLayout;
TableLayout;
RelativeLayout;
GridLayout (переважніше ніж TableLayout);
SwipeRefreshLayout;
ConstraintLayout;
CoordinatorLayout.

Приклади Layout (розмітки)
FrameLayout - розмітка для відображення одного елемента. Дочірні View або ViewGroup в FrameLayout вирівнюються по верхньому лівому кутку. Розмітка може містити кілька елементів, але тоді вони будуть перекривати один одного
LinearLayout - розмітка для відображення одного або декількох елементів в одну лінію, горизонтально або вертикально. Для вибору орієнтації використовується атрибут android: orientation з двома можливими значеннями «horizontal» і «vertical»

Приклади Layout (розмітки)
TableLayout - розмітка для розташування елементів у вигляді таблиці. Ряди задаються в xml за допомогою тега TableRow, а осередки в кожному ряду створюються автоматично для кожного елемента. Кількість колонок в таблиці дорівнюватиме максимальній кількості елементів в рядах. Ширина колонки визначається по самому широкому елементу в ній.
RelativeLayout - розмітка для розташування елементів щодо одного з батьків або один одного. Елементи починають розташовуватися в зазначеному порядку, тому необхідно щоб елемент був
описаний до того, як інший
елемент буде на нього посилатися.

Приклади Layout (розмітки)
ScrollView - є спадкоємцем класу FrameLayout. Відмінністю є те, що він дозволяє прокручувати елементи, якщо вони займають більше місця ніж фізичний розмір екрану. У ScrollView також може міститися лише один елемент (View або ViewGroup), найчастіше використовується LinearLayout, в який вкладено декілька елементів. Scrollview підтримує тільки вертикальну прокрутку.
Якщо атрибут layout_weight поставити тільки у одного елемента, то він займе максимум вільного простору. Так на першому скріншоті у трьох кнопок android:layout_width="wrap_content" і не заданий weight. На другому скріншоті у другій кнопки заданий android:layout_weight="1"

Linear Layout
Призначення
однонапрямне розміщення елементів
напрямок – горизонтально android:orientation=“horizontal"
напрямок – вертикально android:orientation="vertical"
Основні атрибути
layout_width, layout_height
gravity – розміщення вмісту всередині елемента
layout_gravity – розміщення всередині контейнера
Спеціальний розмір
match_parent – по розміру контейнера
wrap_content – по розміру вмісту

Структура елемента

Relative Layout
Призначення
відносне розміщення
складні розміщення
Проблеми
елемент може бути розміщений відносно вже оголошеного
Основні атрибути
top, bottom, left, right, center (boolean)
center_vertical, center_horizontal (boolean)
start, end (boolean)

Relative Layout
Відносно сусідів
layout_toEndOf, layout_toLeftOf, layout_toRightOf, layout_toStartOf
layout_alignEnd , layout_alignLeft, layout_alignRight, layout_alignStart, layout_alignTop
layout_alignParentBottom, layout_alignParentEnd, layout_alignParentLeft, layout_alignParentRight, layout_alignParentStart, layout_alignParentTop

Типові помилки