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

Содержание

Слайд 2

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

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

Слайд 3

Одиниці вимірювання

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

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

Еволюція

Слайд 4

Класифікація екранів

Книжкова (англ. Portrait)
Альбомна (англ. Landscape)
Квадратна (англ. Square)

Орієнтація

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

Слайд 5

Історичні шляхи вирішення

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

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

Статична розмітка

Слайд 6

Історичні шляхи вирішення

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

Динамічна розмітка

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

Слайд 7

Роздільні здатності

для різних орієнтацій – різні розмітки
для різних розмірів – різні розмітки

Еволюційні

Роздільні здатності для різних орієнтацій – різні розмітки для різних розмірів –
рішення

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

Задача

Слайд 8

Роздільні здатності

щотижня по одному елементу на формі додають
що два тижні по 2

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

Додамо «романтики»

Слайд 9

Роздільні здатності

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

Висновки

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

Слайд 10

Характеристики екрану

розмір екрану (англ. screen size) – фізичний розмір, діагональ в дюймах
щільність

Характеристики екрану розмір екрану (англ. 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

Слайд 11

Характеристики екрану

низька - ldpi (low) ~120dpi
середня - mdpi (medium) ~160dpi
висока - hdpi (high) ~240dpi
дуже висока

Характеристики екрану низька - ldpi (low) ~120dpi середня - mdpi (medium) ~160dpi
- xhdpi (extra-high) ~320dpi
дуже дуже висока - xxhdpi (extra-extra-high) ~480dpi
дуже дуже дуже висока - xxxhdpi (extra-extra-extra-high) ~640dpi

Типи за щільністю

Скільки фізичних пікселів припадає на один незалежний піксель для високої щільності?

Запитання

Типи за щільністю

px = dp * (dpi / 160)

Слайд 12

Характеристики екрану

Дизайнер спроектував, наприклад у Photoshop, дизайн вашого застосунку. Вам необхідно реалізувати

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

Задача

Слайд 13

Характеристики екрану

1 inch = 72 pt.
1 px = 1 dp при 160

Характеристики екрану 1 inch = 72 pt. 1 px = 1 dp
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

Рішення

Слайд 14

Калькулятор

Демонстрація калькулятора

URL: http://angrytools.com/android/pixelcalc/

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

Слайд 15

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

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

Слайд 16

Основні поняття XML (eXtensible Markup Language - «розширювана мова розмітки».)

Тег - значення

value

value1

value1
value2

value1

Атрибут

Основні поняття XML (eXtensible Markup Language - «розширювана мова розмітки».) Тег -
name='my name'>value
спрощено:

Різниця між XML і HTML
XML не є заміною HTML. Вони призначені для вирішення різних завдань: XML вирішує завдання зберігання і транспортування даних, фокусуючись на тому, що таке ці самі дані, HTML же вирішує завдання відображення даних, фокусуючись на тому, як ці дані виглядають. Таким чином, HTML піклується про відображення інформації, а XML про транспортування інформації.
Теги XML не призначені. Ви повинні самі визначати потрібні теги.

Слайд 17

ViewGroup

ViewGroup - розмітка, яка дозволяє розташувати один або кілька View.

Стандартні типи ViewGroups:
FrameLayout;
LinearLayout;
TableLayout;
RelativeLayout;
GridLayout

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

Слайд 18

Приклади Layout (розмітки)

FrameLayout - розмітка для відображення одного елемента. Дочірні View або

Приклади Layout (розмітки) FrameLayout - розмітка для відображення одного елемента. Дочірні View
ViewGroup в FrameLayout вирівнюються по верхньому лівому кутку. Розмітка може містити кілька елементів, але тоді вони будуть перекривати один одного

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

Слайд 19

Приклади Layout (розмітки)

TableLayout - розмітка для розташування елементів у вигляді таблиці. Ряди

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

RelativeLayout - розмітка для розташування елементів щодо одного з батьків або один одного. Елементи починають розташовуватися в зазначеному порядку, тому необхідно щоб елемент був
описаний до того, як інший
елемент буде на нього посилатися.

Слайд 20

Приклади Layout (розмітки)

ScrollView - є спадкоємцем класу FrameLayout. Відмінністю є те, що

Приклади Layout (розмітки) ScrollView - є спадкоємцем класу FrameLayout. Відмінністю є те,
він дозволяє прокручувати елементи, якщо вони займають більше місця ніж фізичний розмір екрану. У ScrollView також може міститися лише один елемент (View або ViewGroup), найчастіше використовується LinearLayout, в який вкладено декілька елементів. Scrollview підтримує тільки вертикальну прокрутку.

Якщо атрибут layout_weight поставити тільки у одного елемента, то він займе максимум вільного простору. Так на першому скріншоті у трьох кнопок android:layout_width="wrap_content" і не заданий weight. На другому скріншоті у другій кнопки заданий android:layout_weight="1"

Слайд 21

Linear Layout

Призначення

однонапрямне розміщення елементів
напрямок – горизонтально android:orientation=“horizontal"
напрямок – вертикально android:orientation="vertical"

Основні атрибути

layout_width, layout_height
gravity

Linear Layout Призначення однонапрямне розміщення елементів напрямок – горизонтально android:orientation=“horizontal" напрямок –
– розміщення вмісту всередині елемента
layout_gravity – розміщення всередині контейнера

Спеціальний розмір

match_parent – по розміру контейнера
wrap_content – по розміру вмісту

Слайд 22

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

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

Слайд 23

Relative Layout

Призначення

відносне розміщення
складні розміщення

Проблеми

елемент може бути розміщений відносно вже оголошеного

Основні атрибути

top, bottom,

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

Слайд 24

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,

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

Слайд 25

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

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