Layouts Flexíveis no Android

Palestra apresentada no DevCamp 2013 (www.devcamp.com.br).

Transcript

1. eee19.com Layouts flexíveis no Android Douglas Drumond! drumond.douglas@gmail.com
2. Eldorado
3. eee19.com
4. eee19.com http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg
5. eee19.com Layouts flexíveis… http://commons.wikimedia.org/wiki/File:Xubu_-_He_Xijing_01.jpg
6. eee19.com …em qualquer hw http://commons.wikimedia.org/wiki/File:Master_Tai_Chi.JPG
7. eee19.com Diversos aparelhos http://commons.wikimedia.org/wiki/File:Motorola_Backflip_open.jpg
8. eee19.com http://www.flickr.com/photos/samsungtomorrow/8469895522/in/photostream/
9. eee19.com http://www.flickr.com/photos/samsungtomorrow/8201896844/
10. eee19.com 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 Galaxy Note 10.1 10.1” 1280x800 149 16:10
11. eee19.com Relatividade http://www.flickr.com/photos/thomasthomas/504369245/
12. eee19.com Nada é absoluto • Tudo é relativo! • Proporção
13. eee19.com dp px = dp × (dpi ÷ 160)
14. eee19.com vs http://developer.android.com/guide/practices/screens_support.html
15. eee19.com Como fazer? • <supports-screens>! • res/layout-*! • res/drawable-*
16. eee19.com Densidade http://developer.android.com/guide/practices/screens_support.html
17. eee19.com Qualificadores • Tamanho! • Densidade! • Orientação! • Proporção (aspect ratio)
18. eee19.com Qualificadores • smallestWidth: sw<N>dp (ex: sw600dp)! • Available screen width: w<N>dp (ex: w1024dp)! • Available screen height: h<N>dp (ex: h720dp)
19. eee19.com Exemplos • res/layout/main_activity.xml! • res/layout-sw600dp/main_activity.xml! • res/layout-sw720dp/main_activity.xml
20. eee19.com Fragments http://developer.android.com/guide/components/fragments.html
21. eee19.com 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>
22. eee19.com 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>
23. eee19.com Fragments if#(findViewById(R.id.main)#!=#null)#{# # # # # # # }#else#if#(findViewById(R.id.list)#!=#null)#{
 }
24. eee19.com Estudo de caso www.monkeywriteapp.com @chiuki
25. eee19.com Tela do Hanzi
26. eee19.com Divisão proporcional
27. eee19.com 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>
28. eee19.com layout_weight <View android:layout_width="0dp" android:layout_weight="1" <View android:layout_width="0dp" android:layout_weight="2"
29. eee19.com Tela do Hanzi
30. eee19.com 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>
31. eee19.com Background <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/box" />
32. eee19.com 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>
33. eee19.com Altura remanescente <LinearLayout
 ...
 <TextView android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
34. eee19.com 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>
35. eee19.com
36. eee19.com 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>
37. eee19.com E a altura? ideogramas chineses são quadrados
38. eee19.com Custom view • onMeasure()
39. eee19.com 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); } }
40. eee19.com
41. eee19.com 7” (Kindle Fire)
42. eee19.com 10”
43. eee19.com 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" />
44. eee19.com res/values/dimens.xml <resources> <dimen name="workbook_spacing">13dp</dimen> <dimen name="workbook_column_width">120dp</dimen> <resources>
45. eee19.com 10”
46. eee19.com 7”
47. eee19.com Telefones? • Tela pequena! • Retrato vs paisagem
48. eee19.com Layout paisagem
49. eee19.com 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)); }
50. eee19.com Sem sensor de orientação <!-- AndroidManifest.xml --> <activity android:name=".CharacterActivity" android:screenOrientation="nosensor" />
51. eee19.com Caixa de ferramentas para layouts flexíveis • RelativeLayout! • Proportional width and height! • Allow scrolling! • Resource folders (orientation, size, density)! • Shape xml! • 9-patch! • Background tiles! • DisplayMetrics! • Custom view
52. eee19.com Guia • http://developer.android.com/guide/ practices/screens_support.html
53. eee19.com Obrigado • Twitter/ADN @douglasdrumond! • eee19.com! • gplus.to/douglasdrumond www.monkeywriteapp.com @chiuki