Доклад для конференции UAMobile, 24 ноября 2012 года

1. Верстка интерфейса в Android:
основы и полезные советы
24 ноября 2012 г.

2. Экраны
ldpi mdpi hdpi xhdpi
small 1.7% 1.0%
normal 0.4% 11% 50.1% 25.1%
large 0.1% 2.4% 3.6%
xlarge 4.5%
Google, 1 ноября 2012

3. Сначала был G1
320x480
mdpi
3.2”
22 октября 2008

4. Android 1.6 (Donut)

5. <supports-screens>
xlargeScreens – начиная с Android 2.3

6. Режим совместимости
Приложение скомпилировано для Android 1.5

7. Плотность
ldpi – Low DPI. Низкая плотность
mdpi – Medium DPI. Средняя плотность
hdpi – High DPI. Высокая плотность
xhdpi – Extra High DPI. Очень высокая плотность
(начиная с Android 2.2)

8. Размер
small – Маленький
normal – Нормальный
large – Большой
xlarge – Очень большой
(начиная с Android 2.3)

9. Как Android определяет
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

10. Что со всем этим делать?

11. Правила, а не позиции
AbsoluteLayout
RelativeLayout
fill_parent
wrap_content

12. layout_weight

13. Избегать физических точек
px – плохо! dp,sp – хорошо!
sp – для текста
dp – для всего остального
Если очень надо
getResources().getDisplayMetrics().density
px = dp*(dpi/160)

14. Разные ресурсы
для разных устройств

15. Ресурсы по умолчанию
Размер экрана: normal Плотность: mdpi

16. Наборы ресурсов
Название Значение Комментарий
Size small
normal
large
xlarge начиная с Android 2.3
Density ldpi
mdpi
hdpi
xhdpi начиная с Android 2.2
nodpi независимо от плотности
tvdpi начиная с Android 3.2 (213 dpi)
Orientation land по умолчанию в планшетах
port по умолчанию в телефонах

17. Наборы ресурсов
Название Значение Комментарий
Smallest width sw<N>dp Независимо от ориентации
экрана
Examples:
sw600dp
sw720dp
Available screen width w<N>dp
Examples:
w720dp
w1024dp
Available screen height h<N>dp
Examples:
h720dp
h1024dp

18. Наборы ресурсов
Название Значение Комментарий
Smallest width sw<N>dp Независимо от ориентации
экрана
Examples:
sw600dp
sw720dp
Available screen width w<N>dp
Examples:
w720dp
w1024dp
Available screen height h<N>dp
Examples:
h720dp
h1024dp
small, medium, large, xlarge – deprecated in Android 3.2

19. Используйте масштабируемые
изображения
9-patch

20. Изображения,
определенные с помощью XML

21. Вложенность играет роль

22. <include />
titlebar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content"
android:background="@color/titlebar_bg">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
</FrameLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<include layout="@layout/titlebar"/>
...
</LinearLayout>

23. <include />
titlebar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content"
android:background="@color/titlebar_bg">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
</FrameLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<include layout="@layout/titlebar"/>
...
</LinearLayout>

24. <merge />
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/add"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/delete"/>
</merge>

25. Fragment
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content">
<com.example.MyFragment
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<com.example.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</FrameLayout>

26. Custom View
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content">
<com.example.MyFragment
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<com.example.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</FrameLayout>

27. Тестируйте на разных экранах
ADT rev.21

28. Тестируйте на разных экранах
Можно даже запустить эмулятор
установив реальные физические размеры экрана

29. Тестируйте на разных экранах
800x480

30. Тестируйте на разных экранах
$ adb shell am display-size 640x480
800x480 640x480

31. Тестируйте на разных экранах
$ adb shell am display-size 480x320
800x480 640x480 480x320

32. Спасибо!
bit.ly/devfest
gdg.org.ua

33. О себе
Алексей Устенко
Программист
@ustav
dnipro.gdg.org.ua