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

4,635 views
4,381 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
4,635
On SlideShare
0
From Embeds
0
Number of Embeds
239
Actions
Shares
0
Downloads
39
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

×