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

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