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