Верстка интерфейса в Android:  основы и полезные советы24 ноября 2012 г.
Экраны         ldpi    mdpi       hdpi    xhdpismall    1.7%               1.0%normal 0.4%      11%        50.1%   25.1%la...
Сначала был G1      320x480       mdpi       3.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 – Ext...
Размерsmall – Маленькийnormal – Нормальныйlarge – Большойxlarge – Очень большой(начиная с Android 2.3)
Как Android определяетxlarge screens are at least 960dp x 720dplarge screens are at least 640dp x 480dpnormal screens are ...
Что со всем этим делать?
Правила, а не позиции   AbsoluteLayout   RelativeLayout   fill_parent   wrap_content
layout_weight
Избегать физических точек      px – плохо! dp,sp – хорошо!      sp – для текста      dp – для всего остального          Ес...
Разные ресурсыдля разных устройств
Ресурсы по умолчаниюРазмер экрана: normal   Плотность: mdpi
Наборы ресурсовНазвание         Значение   КомментарийSize             small                 normal                 large ...
Наборы ресурсовНазвание                  Значение    КомментарийSmallest width            sw<N>dp     Независимо от ориент...
Наборы ресурсовНазвание                  Значение    КомментарийSmallest width            sw<N>dp     Независимо от ориент...
Используйте масштабируемые        изображения         9-patch
Изображения,определенные с помощью XML
Вложенность играет роль
<include />titlebar.xml<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width=”ma...
<include />titlebar.xml<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width=”ma...
<merge /><merge xmlns:android="http://schemas.android.com/apk/res/android">    <Button        android:layout_width="fill_p...
Fragment<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width=”match_parent”    ...
Custom View<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width=”match_parent” ...
Тестируйте на разных экранах           ADT rev.21
Тестируйте на разных экранах         Можно даже запустить эмулятор         установив реальные физические размеры экрана
Тестируйте на разных экранах 800x480
Тестируйте на разных экранах$ adb shell am display-size 640x480  800x480                 640x480
Тестируйте на разных экранах$ adb shell am display-size 480x320  800x480                 640x480     480x320
Спасибо!bit.ly/devfestgdg.org.ua
О себеАлексей УстенкоПрограммист@ustavdnipro.gdg.org.ua
Upcoming SlideShare
Loading in …5
×

Верстка для Андроид

5,425 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,425
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Верстка для Андроид

  1. 1. Верстка интерфейса в Android: основы и полезные советы24 ноября 2012 г.
  2. 2. Экраны ldpi mdpi hdpi xhdpismall 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. 3. Сначала был G1 320x480 mdpi 3.2” 22 октября 2008
  4. 4. Android 1.6 (Donut)
  5. 5. <supports-screens>xlargeScreens – начиная с Android 2.3
  6. 6. Режим совместимости Приложение скомпилировано для Android 1.5
  7. 7. Плотностьldpi – Low DPI. Низкая плотностьmdpi – Medium DPI. Средняя плотностьhdpi – High DPI. Высокая плотностьxhdpi – Extra High DPI. Очень высокая плотность(начиная с Android 2.2)
  8. 8. Размерsmall – Маленькийnormal – Нормальныйlarge – Большойxlarge – Очень большой(начиная с Android 2.3)
  9. 9. Как Android определяетxlarge screens are at least 960dp x 720dplarge screens are at least 640dp x 480dpnormal screens are at least 470dp x 320dpsmall screens are at least 426dp x 320dp
  10. 10. Что со всем этим делать?
  11. 11. Правила, а не позиции AbsoluteLayout RelativeLayout fill_parent wrap_content
  12. 12. layout_weight
  13. 13. Избегать физических точек px – плохо! dp,sp – хорошо! sp – для текста dp – для всего остального Если очень надоgetResources().getDisplayMetrics().density px = dp*(dpi/160)
  14. 14. Разные ресурсыдля разных устройств
  15. 15. Ресурсы по умолчаниюРазмер экрана: normal Плотность: mdpi
  16. 16. Наборы ресурсовНазвание Значение КомментарийSize small normal large xlarge начиная с Android 2.3Density ldpi mdpi hdpi xhdpi начиная с Android 2.2 nodpi независимо от плотности tvdpi начиная с Android 3.2 (213 dpi)Orientation land по умолчанию в планшетах port по умолчанию в телефонах
  17. 17. Наборы ресурсовНазвание Значение КомментарийSmallest width sw<N>dp Независимо от ориентации экрана Examples: sw600dp sw720dpAvailable screen width w<N>dp Examples: w720dp w1024dpAvailable screen height h<N>dp Examples: h720dp h1024dp
  18. 18. Наборы ресурсовНазвание Значение КомментарийSmallest width sw<N>dp Независимо от ориентации экрана Examples: sw600dp sw720dpAvailable screen width w<N>dp Examples: w720dp w1024dpAvailable screen height h<N>dp Examples: h720dp h1024dpsmall, medium, large, xlarge – deprecated in Android 3.2
  19. 19. Используйте масштабируемые изображения 9-patch
  20. 20. Изображения,определенные с помощью XML
  21. 21. Вложенность играет роль
  22. 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. 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. 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. 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. 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. 27. Тестируйте на разных экранах ADT rev.21
  28. 28. Тестируйте на разных экранах Можно даже запустить эмулятор установив реальные физические размеры экрана
  29. 29. Тестируйте на разных экранах 800x480
  30. 30. Тестируйте на разных экранах$ adb shell am display-size 640x480 800x480 640x480
  31. 31. Тестируйте на разных экранах$ adb shell am display-size 480x320 800x480 640x480 480x320
  32. 32. Спасибо!bit.ly/devfestgdg.org.ua
  33. 33. О себеАлексей УстенкоПрограммист@ustavdnipro.gdg.org.ua

×