[DevCamp] Layouts Flexíveis no Android – 2013

eee19.com

Layouts flexíveis no Android

Douglas [email protected]

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