Soumettre la recherche
Mettre en ligne
[DevCamp] Layouts Flexíveis no Android – 2013
•
1 j'aime
•
762 vues
Douglas Drumond
Suivre
Palestra sobre layouts flexíveis no Android ministrada no DevCamp 2013
Lire moins
Lire la suite
Technologie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 53
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
New commission structure for Flipkart Market Place
New commission structure for Flipkart Market Place
SellOnFlipkart
[MO901] Android 下忍 – 2011
[MO901] Android 下忍 – 2011
Douglas Drumond
Jenis kegiatan kpm
Jenis kegiatan kpm
07091977
[FLISOL] Embelezando o Android – 2013
[FLISOL] Embelezando o Android – 2013
Douglas Drumond
2013 11 25 ip telefoni presentartion 97 2003
2013 11 25 ip telefoni presentartion 97 2003
Lars Mangs
[Unicamp Fórum Permanente] Android Faixa Branca – 2011
[Unicamp Fórum Permanente] Android Faixa Branca – 2011
Douglas Drumond
Chapter 6 นวัต
Chapter 6 นวัต
O-mu Aomaam
[Unicamp] curso vim – 2010
[Unicamp] curso vim – 2010
Douglas Drumond
Recommandé
New commission structure for Flipkart Market Place
New commission structure for Flipkart Market Place
SellOnFlipkart
[MO901] Android 下忍 – 2011
[MO901] Android 下忍 – 2011
Douglas Drumond
Jenis kegiatan kpm
Jenis kegiatan kpm
07091977
[FLISOL] Embelezando o Android – 2013
[FLISOL] Embelezando o Android – 2013
Douglas Drumond
2013 11 25 ip telefoni presentartion 97 2003
2013 11 25 ip telefoni presentartion 97 2003
Lars Mangs
[Unicamp Fórum Permanente] Android Faixa Branca – 2011
[Unicamp Fórum Permanente] Android Faixa Branca – 2011
Douglas Drumond
Chapter 6 นวัต
Chapter 6 นวัต
O-mu Aomaam
[Unicamp] curso vim – 2010
[Unicamp] curso vim – 2010
Douglas Drumond
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
yiibu
Affinity Talk2008 Bestpractice
Affinity Talk2008 Bestpractice
martinip
Ubuntu Under Android
Ubuntu Under Android
Paolo Sammicheli
Play withmultimedia mac
Play withmultimedia mac
Maso Lin
Mozilla & Mobile
Mozilla & Mobile
dynamis
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
Pek Pongpaet
Picking Realistic Secrets In motorola
Picking Realistic Secrets In motorola
formolinekaufen02
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Jason Grigsby
Proposta de trabalho Multimédia 02
Proposta de trabalho Multimédia 02
Leonardo Pereira
Android and android phones
Android and android phones
Lloyd Diatre
James Forshaw, elevator action
James Forshaw, elevator action
PacSecJP
The Immobile Web
The Immobile Web
Jason Grigsby
Android Wear – IO Extended
Android Wear – IO Extended
Douglas Drumond
Android wear (coding)
Android wear (coding)
Douglas Drumond
[MobCamp 2014] Android Wear and Google Glass
[MobCamp 2014] Android Wear and Google Glass
Douglas Drumond
[DevCamp 2014] Melhorando a Usabilidade com Animações
[DevCamp 2014] Melhorando a Usabilidade com Animações
Douglas Drumond
[DevCamp 2014] Melhorando a usabilidade com animações
[DevCamp 2014] Melhorando a usabilidade com animações
Douglas Drumond
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
Douglas Drumond
[Faat] android faixa branca – 2012
[Faat] android faixa branca – 2012
Douglas Drumond
[Android devcamp] Android Bootcamp – 2012
[Android devcamp] Android Bootcamp – 2012
Douglas Drumond
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Contenu connexe
Similaire à [DevCamp] Layouts Flexíveis no Android – 2013
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
yiibu
Affinity Talk2008 Bestpractice
Affinity Talk2008 Bestpractice
martinip
Ubuntu Under Android
Ubuntu Under Android
Paolo Sammicheli
Play withmultimedia mac
Play withmultimedia mac
Maso Lin
Mozilla & Mobile
Mozilla & Mobile
dynamis
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
Pek Pongpaet
Picking Realistic Secrets In motorola
Picking Realistic Secrets In motorola
formolinekaufen02
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Jason Grigsby
Proposta de trabalho Multimédia 02
Proposta de trabalho Multimédia 02
Leonardo Pereira
Android and android phones
Android and android phones
Lloyd Diatre
James Forshaw, elevator action
James Forshaw, elevator action
PacSecJP
The Immobile Web
The Immobile Web
Jason Grigsby
Similaire à [DevCamp] Layouts Flexíveis no Android – 2013
(12)
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
Affinity Talk2008 Bestpractice
Affinity Talk2008 Bestpractice
Ubuntu Under Android
Ubuntu Under Android
Play withmultimedia mac
Play withmultimedia mac
Mozilla & Mobile
Mozilla & Mobile
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
Picking Realistic Secrets In motorola
Picking Realistic Secrets In motorola
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
Proposta de trabalho Multimédia 02
Proposta de trabalho Multimédia 02
Android and android phones
Android and android phones
James Forshaw, elevator action
James Forshaw, elevator action
The Immobile Web
The Immobile Web
Plus de Douglas Drumond
Android Wear – IO Extended
Android Wear – IO Extended
Douglas Drumond
Android wear (coding)
Android wear (coding)
Douglas Drumond
[MobCamp 2014] Android Wear and Google Glass
[MobCamp 2014] Android Wear and Google Glass
Douglas Drumond
[DevCamp 2014] Melhorando a Usabilidade com Animações
[DevCamp 2014] Melhorando a Usabilidade com Animações
Douglas Drumond
[DevCamp 2014] Melhorando a usabilidade com animações
[DevCamp 2014] Melhorando a usabilidade com animações
Douglas Drumond
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
Douglas Drumond
[Faat] android faixa branca – 2012
[Faat] android faixa branca – 2012
Douglas Drumond
[Android devcamp] Android Bootcamp – 2012
[Android devcamp] Android Bootcamp – 2012
Douglas Drumond
Plus de Douglas Drumond
(8)
Android Wear – IO Extended
Android Wear – IO Extended
Android wear (coding)
Android wear (coding)
[MobCamp 2014] Android Wear and Google Glass
[MobCamp 2014] Android Wear and Google Glass
[DevCamp 2014] Melhorando a Usabilidade com Animações
[DevCamp 2014] Melhorando a Usabilidade com Animações
[DevCamp 2014] Melhorando a usabilidade com animações
[DevCamp 2014] Melhorando a usabilidade com animações
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
[FLISOL] Android Faixa Branca (Iniciando no Android) – 2013
[Faat] android faixa branca – 2012
[Faat] android faixa branca – 2012
[Android devcamp] Android Bootcamp – 2012
[Android devcamp] Android Bootcamp – 2012
Dernier
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Precisely
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
mohitsingh558521
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Dernier
(20)
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
How to write a Business Continuity Plan
How to write a Business Continuity Plan
[DevCamp] Layouts Flexíveis no Android – 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
Télécharger maintenant