Your SlideShare is downloading. ×
0
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
[DevCamp] Layouts Flexíveis no Android – 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[DevCamp] Layouts Flexíveis no Android – 2013

350

Published on

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

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
350
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Layouts flexíveis no Android Douglas Drumond! drumond.douglas@gmail.com eee19.com
  • 2. Eldorado
  • 3. eee19.com
  • 4. http://commons.wikimedia.org/wiki/File:20060513_toolbox.jpg eee19.com
  • 5. http://commons.wikimedia.org/wiki/File:Xubu_-_He_Xijing_01.jpg Layouts flexíveis… eee19.com
  • 6. http://commons.wikimedia.org/wiki/File:Master_Tai_Chi.JPG …em qualquer hw eee19.com
  • 7. Diversos aparelhos http://commons.wikimedia.org/wiki/File:Motorola_Backflip_open.jpg eee19.com
  • 8. http://www.flickr.com/photos/samsungtomorrow/8469895522/in/photostream/ eee19.com
  • 9. http://www.flickr.com/photos/samsungtomorrow/8201896844/ eee19.com
  • 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. Relatividade http://www.flickr.com/photos/thomasthomas/504369245/ eee19.com
  • 12. Nada é absoluto • • Tudo é relativo! Proporção eee19.com
  • 13. dp px = dp × (dpi ÷ 160) eee19.com
  • 14. vs http://developer.android.com/guide/practices/screens_support.html eee19.com
  • 15. Como fazer? • • • <supports-screens>! res/layout-*! res/drawable-* eee19.com
  • 16. Densidade http://developer.android.com/guide/practices/screens_support.html eee19.com
  • 17. Qualificadores • • • • Tamanho! Densidade! Orientação! Proporção (aspect ratio) eee19.com
  • 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. Exemplos • • • res/layout/main_activity.xml! res/layout-sw600dp/main_activity.xml! res/layout-sw720dp/main_activity.xml eee19.com
  • 20. Fragments http://developer.android.com/guide/components/fragments.html eee19.com
  • 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. 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. Fragments if#(findViewById(R.id.main)#!=#null)#{# # # # # # # }#else#if#(findViewById(R.id.list)#!=#null)#{
 } eee19.com
  • 24. Estudo de caso www.monkeywriteapp.com @chiuki eee19.com
  • 25. Tela do Hanzi eee19.com
  • 26. Divisão proporcional eee19.com
  • 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. layout_weight <View android:layout_width="0dp" android:layout_weight="1" <View android:layout_width="0dp" android:layout_weight="2" eee19.com
  • 29. Tela do Hanzi eee19.com
  • 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. Background <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/box" /> eee19.com
  • 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. Altura remanescente <LinearLayout
 ...
 <TextView android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> eee19.com
  • 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. eee19.com
  • 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. E a altura? ideogramas chineses são quadrados eee19.com
  • 38. Custom view • onMeasure() eee19.com
  • 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. eee19.com
  • 41. 7” (Kindle Fire) eee19.com
  • 42. 10” eee19.com
  • 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. res/values/dimens.xml <resources> <dimen name="workbook_spacing">13dp</dimen> <dimen name="workbook_column_width">120dp</dimen> <resources> eee19.com
  • 45. 10” eee19.com
  • 46. 7” eee19.com
  • 47. Telefones? • • Tela pequena! Retrato vs paisagem eee19.com
  • 48. Layout paisagem eee19.com
  • 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. Sem sensor de orientação <!-- AndroidManifest.xml --> <activity android:name=".CharacterActivity" android:screenOrientation="nosensor" /> eee19.com
  • 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. Guia • http://developer.android.com/guide/ practices/screens_support.html eee19.com
  • 53. Obrigado • • • Twitter/ADN @douglasdrumond! eee19.com! gplus.to/douglasdrumond www.monkeywriteapp.com @chiuki eee19.com

×