[DevCamp] Layouts Flexíveis no Android – 2013

662 views

Published on

Palestra sobre layouts flexíveis no Android ministrada no DevCamp 2013

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

  • Be the first to like this

No Downloads
Views
Total views
662
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[DevCamp] Layouts Flexíveis no Android – 2013

  1. 1. Layouts flexíveis no Android Douglas Drumond! drumond.douglas@gmail.com eee19.com
  2. 2. Eldorado
  3. 3. eee19.com
  4. 4. http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg eee19.com
  5. 5. http://commons.wikimedia.org/wiki/File:Xubu_-_He_Xijing_01.jpg Layouts flexíveis… eee19.com
  6. 6. http://commons.wikimedia.org/wiki/File:Master_Tai_Chi.JPG …em qualquer hw eee19.com
  7. 7. Diversos aparelhos http://commons.wikimedia.org/wiki/File:Motorola_Backflip_open.jpg eee19.com
  8. 8. http://www.flickr.com/photos/samsungtomorrow/8469895522/in/photostream/ eee19.com
  9. 9. http://www.flickr.com/photos/samsungtomorrow/8201896844/ eee19.com
  10. 10. Resoluções e densidades variadas Nome Diagonal Resolução PPI Proporção HTC Magic 3.2” 320x480 181 2:3 Nexus One 3.7” 480x800 252 3:5 Motorola RAZR 4.3” 960x540 256 16:9 Galaxy Note 5.3” 800x1280 285 16:10 Kindle Fire 7” 1024x600 169 16:9 Nexus 7 7” 1280x800 216 16:10 10.1” 1280x800 149 16:10 Galaxy Note 10.1 eee19.com
  11. 11. Relatividade http://www.flickr.com/photos/thomasthomas/504369245/ eee19.com
  12. 12. Nada é absoluto • • Tudo é relativo! Proporção eee19.com
  13. 13. dp px = dp × (dpi ÷ 160) eee19.com
  14. 14. vs http://developer.android.com/guide/practices/screens_support.html eee19.com
  15. 15. Como fazer? • • • <supports-screens>! res/layout-*! res/drawable-* eee19.com
  16. 16. Densidade http://developer.android.com/guide/practices/screens_support.html eee19.com
  17. 17. Qualificadores • • • • Tamanho! Densidade! Orientação! Proporção (aspect ratio) eee19.com
  18. 18. Qualificadores • • smallestWidth: sw<N>dp (ex: sw600dp)! • Available screen height: h<N>dp (ex: h720dp) Available screen width: w<N>dp (ex: w1024dp)! eee19.com
  19. 19. Exemplos • • • res/layout/main_activity.xml! res/layout-sw600dp/main_activity.xml! res/layout-sw720dp/main_activity.xml eee19.com
  20. 20. Fragments http://developer.android.com/guide/components/fragments.html eee19.com
  21. 21. Fragments <?xml version="1.0" encoding="utf-8"?>! <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"!     android:orientation="horizontal"!     android:layout_width="match_parent"!     android:layout_height="match_parent">!     <fragment android:name="com.example.news.ArticleListFragment"!                             android:id="@+id/list"!         android:layout_weight="1"!         android:layout_width="0dp"!         android:layout_height="match_parent" />! <fragment android:name="com.example.news.ArticleReaderFragment"!             android:id="@+id/viewer"!             android:layout_weight="2"!             android:layout_width="0dp"!             android:layout_height="match_parent" />! </LinearLayout> eee19.com
  22. 22. Fragments <?xml version="1.0" encoding="utf-8"?>! <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"!     android:orientation="horizontal"!     android:layout_width="match_parent"!     android:layout_height="match_parent">!     <fragment android:name="com.example.news.ArticleListFragment"!             android:id="@+id/main"!             android:layout_weight="1"!             android:layout_width="0dp"!             android:layout_height="match_parent" />! </LinearLayout> eee19.com
  23. 23. Fragments if#(findViewById(R.id.main)#!=#null)#{# # # # # # # }#else#if#(findViewById(R.id.list)#!=#null)#{
 } eee19.com
  24. 24. Estudo de caso www.monkeywriteapp.com @chiuki eee19.com
  25. 25. Tela do Hanzi eee19.com
  26. 26. Divisão proporcional eee19.com
  27. 27. layout_weight <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="horizontal" > <View android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:background="#c90" /> <View android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="2" android:background="#630" /> </LinearLayout> eee19.com
  28. 28. layout_weight <View android:layout_width="0dp" android:layout_weight="1" <View android:layout_width="0dp" android:layout_weight="2" eee19.com
  29. 29. Tela do Hanzi eee19.com
  30. 30. drawable/box.xml <shape xmlns:android="http://schemas.android.com/apk/res/ android"> <corners android:radius="15dp" /> <gradient android:startColor="#7000" android:centerColor="#3000" android:endColor="#7000" android:angle="270" /> </shape> eee19.com
  31. 31. Background <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/box" /> eee19.com
  32. 32. Altura remanescente <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> eee19.com
  33. 33. Altura remanescente <LinearLayout
 ...
 <TextView android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> eee19.com
  34. 34. Rolagem <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </ScrollView> eee19.com
  35. 35. eee19.com
  36. 36. Weight sum <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:weightSum="9"> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="5" android:layout_gravity="center" /> </LinearLayout> eee19.com
  37. 37. E a altura? ideogramas chineses são quadrados eee19.com
  38. 38. Custom view • onMeasure() eee19.com
  39. 39. SquareView public class SquareView extends View { // Constructors omitted ! public void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int size = Math.min(getMeasuredWidth(), getMeasuredHeight()); setMeasuredDimension(size, size); } } eee19.com
  40. 40. eee19.com
  41. 41. 7” (Kindle Fire) eee19.com
  42. 42. 10” eee19.com
  43. 43. Auto-fit columns <GridView android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="auto_fit" android:padding="@dimen/workbook_padding" android:horizontalSpacing="@dimen/workbook_spacing" android:verticalSpacing="@dimen/workbook_spacing" android:columnWidth="@dimen/workbook_column_width" android:scrollbarStyle="outsideOverlay" /> eee19.com
  44. 44. res/values/dimens.xml <resources> <dimen name="workbook_spacing">13dp</dimen> <dimen name="workbook_column_width">120dp</dimen> <resources> eee19.com
  45. 45. 10” eee19.com
  46. 46. 7” eee19.com
  47. 47. Telefones? • • Tela pequena! Retrato vs paisagem eee19.com
  48. 48. Layout paisagem eee19.com
  49. 49. Uma orientação public static boolean isLargeScreen(Activity activity) { DisplayMetrics metrics = activity.getResources().getDisplayMetrics(); int longSize = Math.max(metrics.widthPixels, metrics.heightPixels); return (longSize / metrics.density > 960); } public static int getPreferredScreenOrientation(Activity activity) { return isLargeScreen(activity) ? ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE : ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; }
 // In activity public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setRequestedOrientation(Util.getPreferredScreenOrientation(this)); } eee19.com
  50. 50. Sem sensor de orientação <!-- AndroidManifest.xml --> <activity android:name=".CharacterActivity" android:screenOrientation="nosensor" /> eee19.com
  51. 51. Caixa de ferramentas para layouts flexíveis • • RelativeLayout! Proportional width and height! • • Allow scrolling! • • • • • 9-patch! Background tiles! DisplayMetrics! Shape xml! Resource folders (orientation, size, density)! Custom view eee19.com
  52. 52. Guia • http://developer.android.com/guide/ practices/screens_support.html eee19.com
  53. 53. Obrigado • • • Twitter/ADN @douglasdrumond! eee19.com! gplus.to/douglasdrumond www.monkeywriteapp.com @chiuki eee19.com

×