Верстка для Андроид
DESCRIPTION
Доклад для конференции UAMobile, 24 ноября 2012 годаTRANSCRIPT
![Page 1: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/1.jpg)
Верстка интерфейса в Android: основы и полезные советы
24 ноября 2012 г.
![Page 2: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/2.jpg)
Экраны
Google, 1 ноября 2012
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%
![Page 3: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/3.jpg)
Сначала был G1
320x480mdpi3.2”
22 октября 2008
![Page 4: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/4.jpg)
Android 1.6 (Donut)
![Page 5: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/5.jpg)
<supports-screens>
xlargeScreens – начиная с Android 2.3
![Page 6: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/6.jpg)
Режим совместимости
Приложение скомпилировано для Android 1.5
![Page 7: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/7.jpg)
Плотность
ldpi – Low DPI. Низкая плотность
mdpi – Medium DPI. Средняя плотность
hdpi – High DPI. Высокая плотность
xhdpi – Extra High DPI. Очень высокая плотность(начиная с Android 2.2)
![Page 8: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/8.jpg)
Размер
small – Маленький
normal – Нормальный
large – Большой
xlarge – Очень большой(начиная с Android 2.3)
![Page 9: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/9.jpg)
Как 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
![Page 10: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/10.jpg)
Что со всем этим делать?
![Page 11: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/11.jpg)
Правила, а не позиции
AbsoluteLayout
RelativeLayout
fill_parentwrap_content
![Page 12: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/12.jpg)
layout_weight
![Page 13: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/13.jpg)
Избегать физических точек
sp – для текста
px = dp*(dpi/160)
getResources().getDisplayMetrics().density
px – плохо! dp,sp – хорошо!
dp – для всего остального
Если очень надо
![Page 14: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/14.jpg)
Разные ресурсы для разных устройств
![Page 15: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/15.jpg)
Ресурсы по умолчанию
Размер экрана: normal Плотность: mdpi
![Page 16: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/16.jpg)
Наборы ресурсовНазвание Значение Комментарий
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 по умолчанию в телефонах
![Page 17: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/17.jpg)
Наборы ресурсовНазвание Значение Комментарий
Smallest width sw<N>dp
Examples:sw600dpsw720dp
Независимо от ориентации экрана
Available screen width w<N>dp
Examples:w720dpw1024dp
Available screen height h<N>dp
Examples:h720dph1024dp
![Page 18: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/18.jpg)
Наборы ресурсовНазвание Значение Комментарий
Smallest width sw<N>dp
Examples:sw600dpsw720dp
Независимо от ориентации экрана
Available screen width w<N>dp
Examples:w720dpw1024dp
Available screen height h<N>dp
Examples:h720dph1024dp
small, medium, large, xlarge – deprecated in Android 3.2
![Page 19: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/19.jpg)
Используйте масштабируемые изображения
9-patch
![Page 20: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/20.jpg)
Изображения, определенные с помощью XML
![Page 21: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/21.jpg)
Вложенность играет роль
![Page 22: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/22.jpg)
<include />
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>
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>
![Page 23: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/23.jpg)
<include />
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>
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>
![Page 24: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/24.jpg)
<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>
![Page 25: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/25.jpg)
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>
![Page 26: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/26.jpg)
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>
![Page 27: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/27.jpg)
Тестируйте на разных экранах
ADT rev.21
![Page 28: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/28.jpg)
Тестируйте на разных экранах
Можно даже запустить эмулятор установив реальные физические размеры экрана
![Page 29: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/29.jpg)
Тестируйте на разных экранах
800x480
![Page 30: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/30.jpg)
Тестируйте на разных экранах$ adb shell am display-size 640x480
800x480 640x480
![Page 31: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/31.jpg)
Тестируйте на разных экранах$ adb shell am display-size 480x320
800x480 640x480 480x320
![Page 32: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/32.jpg)
Спасибо!bit.ly/devfest
gdg.org.ua
![Page 33: Верстка для Андроид](https://reader033.vdocuments.site/reader033/viewer/2022052909/5597beb81a28ab9e1b8b4618/html5/thumbnails/33.jpg)
О себе
Алексей Устенко
Программист@ustavdnipro.gdg.org.ua