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
28
BLE
douglasdrumond
0
23
TensorFlow no Android
douglasdrumond
0
17
Firebase or Realm?
douglasdrumond
0
74
Rio Dev Day – Introdução ao Android
douglasdrumond
0
92
Google I/O
douglasdrumond
0
56
Criando apps com alto nível de qualidade (versão longa)
douglasdrumond
0
36
Criando apps com alto nível de qualidade (versão curta)
douglasdrumond
0
24
Primeiros Passos com Google Fit
douglasdrumond
0
180
Other Decks in Programming
See All in Programming
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
ONE WEDGE_Company_Information
1wedge
0
170
Honoとhtmx
yusukebe
6
1.2k
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.2k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
TCA魔法学入門🪄
dazy
0
280
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
品質が高いコードって何?Rev2.1
ickx
1
490
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.8k
Introduction for Open Source Swift Workshop
giginet
PRO
0
180
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Building an army of robots
kneath
300
41k
Into the Great Unknown - MozCon
thekraken
10
830
A better future with KSS
kneath
230
16k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
RailsConf 2023
tenderlove
0
510
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
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