Верстка интерфейса в Android: основы и полезные советы

24 ноября 2012 г.

Экраны

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%

Сначала был G1

320x480mdpi3.2”

22 октября 2008

Android 1.6 (Donut)

<supports-screens>

xlargeScreens – начиная с Android 2.3

Режим совместимости

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

Плотность

ldpi – Low DPI. Низкая плотность

mdpi – Medium DPI. Средняя плотность

hdpi – High DPI. Высокая плотность

xhdpi – Extra High DPI. Очень высокая плотность(начиная с Android 2.2)

Размер

small – Маленький

normal – Нормальный

large – Большой

xlarge – Очень большой(начиная с Android 2.3)

Как 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

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

Правила, а не позиции

AbsoluteLayout

RelativeLayout

fill_parentwrap_content

layout_weight

Избегать физических точек

sp – для текста

px = dp*(dpi/160)

getResources().getDisplayMetrics().density

px – плохо! dp,sp – хорошо!

dp – для всего остального

Если очень надо

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

Ресурсы по умолчанию

Размер экрана: normal Плотность: mdpi

Наборы ресурсовНазвание Значение Комментарий

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 по умолчанию в телефонах

Наборы ресурсовНазвание Значение Комментарий

Smallest width sw<N>dp

Examples:sw600dpsw720dp

Независимо от ориентации экрана

Available screen width w<N>dp

Examples:w720dpw1024dp

Available screen height h<N>dp

Examples:h720dph1024dp

Наборы ресурсовНазвание Значение Комментарий

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

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

9-patch

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

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

<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>

<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>

<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>

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>

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>

Тестируйте на разных экранах

ADT rev.21

Тестируйте на разных экранах

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

Тестируйте на разных экранах

800x480

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

800x480 640x480

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

800x480 640x480 480x320

Спасибо!bit.ly/devfest

gdg.org.ua

О себе

Алексей Устенко

Программист@ustavdnipro.gdg.org.ua