Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Layouts Flexíveis no Android
Search
Douglas Kayama
May 11, 2013
Programming
3
640
Layouts Flexíveis no Android
Palestra apresentada no DevCamp 2013 (
www.devcamp.com.br
).
Douglas Kayama
May 11, 2013
Tweet
Share
More Decks by Douglas Kayama
See All by Douglas Kayama
TensorFlow no Android – v2
douglasdrumond
0
33
BLE
douglasdrumond
0
32
TensorFlow no Android
douglasdrumond
0
24
Firebase or Realm?
douglasdrumond
0
80
Rio Dev Day – Introdução ao Android
douglasdrumond
0
99
Google I/O
douglasdrumond
0
62
Criando apps com alto nível de qualidade (versão longa)
douglasdrumond
0
41
Criando apps com alto nível de qualidade (versão curta)
douglasdrumond
0
28
Primeiros Passos com Google Fit
douglasdrumond
0
190
Other Decks in Programming
See All in Programming
ゲームの物理
fadis
3
790
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
580
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
270
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
670
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
230
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.5k
Flutterと Vibe Coding で個人開発!
hyshu
1
230
Infer入門
riru
4
1.1k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
420
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
470
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
940
ワープロって実は計算機で
pepepper
2
1.1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Balancing Empowerment & Direction
lara
1
530
Done Done
chrislema
185
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
4 Signs Your Business is Dying
shpigford
184
22k
Facilitating Awesome Meetings
lara
54
6.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Transcript
eee19.com Layouts flexíveis no Android Douglas Drumond!
[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 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
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çã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 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