Post on 18-Nov-2014
description
Recursos en Android 101
Fernando F. Gallego
@ferdy182
● Se encuentran en la carpeta /res● Se usan para almacenar imágenes, layouts, valores,
internacionalización, animaciones, menús, etc.● Provee diferentes versiones de los recursos según unos
calificadores● Nombrar las carpetas de la siguiente forma:
● <nombre_carpeta>-<calificador>● Puedes añadir más de uno pero respetando un orden.
Ejemplos● drawable-hdpi: versión de alta densidad (~240dpi)● drawable-land-xhdpi: versión de extra alta densidad para el
modo apaisado. (~320dpi)● values-es: Cadenas y valores cuando el locale es “es”
(Español)● layout-large-land-car-night-finger-v11: Adivínalo!
Más info: http://developer.android.com/guide/topics/resources/providing-resources.html
Carpetas de recursos
Pro tipExcluye recursos que empiecen por _
TipCarpetas sin calificadores se consideran "por defecto"
● La carpeta de recursos correcta se selecciona automáticamente.● Salvo que lo evites
● Las diferentes versiones del mismo recurso deben tener el mismo nombre de archivo.
● La misma view en distintas versiones del layout debe tener el mismo id.
● Si el recurso no encaja con ningún calificador, Android busca el que mejor encaje.
● Los recursos se acceden de dos formas:● En código: R.string.app_name● En XML: @string/app_name
Manejo automático de recursos
Pro tipAccede a los recursos de la plataforma con android.R.anim.fade_in o @android:anim/fade_in
● Píxeles independientes de la densidad (dp)● El píxel independiente de la densidad es equivalente a un
píxel físico en una pantalla de 160 dpi.● px = dp * (dpi / 160). Por ejemplo, en una pantall de 240 dpi, 1 dp
equivalen a 1.5 píxeles físicos● Nunca NUNCA uses píxeles, usa dp en su lugar(o sp para
tamaños de fuente).
Soporte a distintas densidades de pantalla
Tamaños relativos para bitmap drawables por densidad
http://developer.android.com/guide/practices/screens_support.html
● Los calificadores para layouts sirven para ofrecer diferentes layouts para diferentes dispositivos y "evitar" la fragmentación.
Dando soporte a múltiples tamaños de pantalla
● Screen madness:● Usa smallestWidth: sw<N>dp (sw480dp, sw600dp)● Calificadores de Android 3.2 para diferentes layouts
● 320dp: típica pantalla de teléfono (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).● 480dp: Tablet tipo Dell Streak (480x800 mdpi).● 600dp: tablet de 7” (600x1024 mdpi).● 720dp: tablet de 10”(720x1280 mdpi, 800x1280 mdpi, etc)
res/layout/main_activity.xml # Para móviles (smaller than 600dp available width) res/layout-sw600dp/main_activity.xml # Para tablets de 7” (desde 600dp de ancho y más grandes) res/layout-sw720dp/main_activity.xml # Para tablets de 10” (desde 720dp de ancho y más grandes)
● Los layouts se definen en archivos XML● Bajo: /res/layout
● Tipos de contenedores:● LinearLayout: El más fácil de aprender. Muestra todas las vistas en
horizontal o en vertical.● RelativeLayout: Posiciona las vistas relativas a otras vistas. Bueno
para crear layouts que se solapan con transparencias.● FrameLayout: Layout básico. Apila las vistas una encima de otra. No
muy útil.● También TableLayout y GridLayout
Layouts eficientes
● onMeasure: Cómo de grande quiere ser cada vista.● onLayout: Dibujado de cada vista.
Algoritmo de dibujo de Android
● Mantener la jerarquía de vistas plana acelera el dibujado de la interfaz
● (aka usa RelativeLayout)
● Reusa layouts● Puedes usar <include/> para
añadir otro layout
<include android:id="@+id/cell1" layout="@layout/workspace_screen" />
● Evita anidar contenedores del mismo tipo
● Usa <merge/>● "Engancha" sus descendientes
a su ancestro● Buen combo con <include/>
Layouts eficientes (II)
● No definas views que uses raramente
● Usa ViewStub para cargar vistas bajo demanda
Layouts eficientes(III)
<ViewStub android:id="@+id/stub_import" android:layout="@layout/progress_overlay" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" />
((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);// orView importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();
● Usa el menor número de views posible. Usa compound drawables.
Layouts eficientes (IV)
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/hello_world"/></LinearLayout>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:drawableLeft="@drawable/ic_launcher" android:gravity="center" android:text="@string/hello_world" />
Más info:http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/
● Archivos de imagen que se estiran selectivamente.● Define áreas para estirar y áreas donde irá el
contenido.● La imagen se expande para albergar el contenido
manteniendo formas complejas de la imagen como son esquinas o adornos.
Nine-patch Drawable
● Arriba e izquierda● Define las áreas que se estiran (pero no se
encogen!)
● Abajo y derecha● Zona para el contenido, el resto es padding
● Se usan para ofrecer distintos drawables o colores según los diferentes estados de la vista.
● El orden es importante. El primero que encaje.● Independientes de la densidad. Almacenar en
/res/drawable/btn_nav_bg_selector.xml
State List Drawable
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"
android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"
android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"
android:state_window_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_enabled="true"
android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default"/></selector>
Disabled PressedDefault
android:background="@drawable/btn_nav_bg_selector"
● Crea un drawable basado en una forma definida en XML (aún así requiere dotes artísticas!)
Shape Drawable
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:angle="270" android:endColor="#2f6699" android:startColor="#449def" />
<stroke android:width="1dp" android:color="#2f6699" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /></shape>
Pro tipCombinar con state list drawable:
<selector> <item android:state_pressed="true" > <shape> ... </shape> </item> <item> <shape> ... </shape> </item></selector>
● Recorta una porción de un drawable● Útil para personalizar barras de progreso
Clip Drawable
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="20dip"/> <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF" android:centerY="0.75" android:endColor="#ffffff" android:angle="90"/> <stroke android:width="1dp" android:color="#00aa00"/> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="20dip"/> <gradient android:startColor="#CaCaC0" android:centerColor="#2828FF" android:centerY="0.75" android:endColor="#325423" android:angle="270"/> </shape> </clip> </item> </layer-list>
Más info:http://vnamashko.blogspot.de/2012/05/customize-your-progress-bar.html
● Estira un drawable en las direcciones indicadas
● Útil para efectos biselados o pestañas tipo Holo
<?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetBottom="0dp" android:insetLeft="-5dp" android:insetRight="-5dp" android:insetTop="-5dp" > <shape> <solid android:color="@color/stacked_green" /> <stroke android:width="3dp" android:color="@color/accent_green" /> </shape></inset>
Más info:http://blog.stylingandroid.com/archives/1329
Inset Drawable
● Layer List● Pinta diferentes drawables uno encima de otro en un solo drawable.● Útil para componer.
● Level List● Similar al anterior pero solo muestra uno a la vez● Útil para estados no estándar (ej. un semáforo)
● Transition drawable● Hace una transición con fundido entre dos drawables● drawable.startTransition(500);
● Clip drawable● Recorta una porción de un drawable● Útil para personalizar barras de progreso
● Scale drawable● Escala un drawable
Otros drawables
Más info:http://developer.android.com/guide/topics/resources/drawable-resource.html
Layer List
● Por interpolación● (tweening)
Animaciones
<set xmlns:android="http://schemas.android.com/apk/res/android" > <scale android:duration="5000" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="3.0" android:toYScale="3.0" /> <set>
<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fromAlpha="0.2" android:toAlpha="1.0" /> <rotate android:duration="4000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:toDegrees="-360" android:toYScale="0.0" /> <translate android:duration="3000" android:fromXDelta="100%" android:fromYDelta="60%" android:toXDelta="-20%" android:toYDelta="-30%" android:zAdjustment="bottom" /> </set></set>
● Animaciones basadas en frames● AnimationDrawable
Animaciones (II)
<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"> <item android:drawable="@drawable/android_1“ android:duration="100"/> <item android:drawable="@drawable/android_2“ android:duration="100"/> <item android:drawable="@drawable/android_3“ android:duration="100"/> <item android:drawable="@drawable/android_4“ android:duration="100"/> <item android:drawable="@drawable/android_5“ android:duration="100"/> <item android:drawable="@drawable/android_6“ android:duration="100"/> <item android:drawable="@drawable/android_7“ android:duration="100"/></animation-list>
● ValueAnimator● Anima valores con un TypeEvaluator (Int, Float, ARGB, propio)
● ObjectAnimator● Anima propiedades de objetos usando un ValueAnimator
● Retrocompatibilidad con la librería NineOldAndroids (http://nineoldandroids.com/)
Animaciones (III)
ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);animation.setDuration(1000);animation.start();
ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);animation.setDuration(1000);animation.start();
ObjectAnimator anim = ObjectAnimator.ofFloat(foo, "alpha", 0f, 1f);anim.setDuration(1000);anim.start();
● Estilos● Similar a CSS● Herencia con parent=“…”● Usar el atributo style en XML: style="@style/CodeFont"
● Hereda tus propios styles con .
● Guardar en /res/values/styles.xml
Estilos y temas
● Personaliza un tema predefinido
● Aplica temas a actividades concretas o a toda la aplicación● <activity android:theme="@style/Theme.Junaio">● <application android:theme="@style/Theme.Junaio">
Temas
<style name="Theme.Junaio" parent="android:Theme"> <item name="android:windowBackground">@null</item> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">false</item> <item name="android:buttonStyleToggle">@style/Topbar.Button</item> </style>
Pro tipLos temas predefinidos no están bien documentados y pueden ser liosos. No hay consistencia de nombresbuttonStylebuttonStyleToggleradioButtonStyle
…
● Hasta Android 11:● Theme.Black● Theme.Light
● De Android 11 al 13:● Theme.Holo● Theme.Holo.Light
● Desde Android 14:● Theme.Holo● Theme.Holo.Light.DarkActionBar
● Crea 3 carpetas para estilos:/res/values/styles.xml
<style name="AppTheme" parent="android:Theme.Light" />/res/values-v11/styles.xml
<style name="AppTheme" parent="android:Theme.Holo.Light" />/res/values-v14/styles.xml
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />
● AndroidManifest.xmlandroid:theme="@android:style/AppTheme"
Soportando distintas versiones de la plataforma
● Valores que puedes definir en carpetas de recursos:● Booleanos (true | false)<boolean name=“someboolean”>true</boolean>getResources().getBoolean(R.bool.someboolean) / @bool/someboolean
● Color (#RGB | #RRGGBB | #ARGB | #AARRGGBB)<color name=“somecolor”>#FF898989</color>getResources().getColor(R.color.somecolor) / @color/somecolor
● Dimensión (dp | sp | pt | px | mm | in)<dimen name=“somedimension”>15dp</dimen>getResources().getDimension(R.dimen.somesimension) / @dimen/somedimension
● ID<item type=“id” name=“someid” />findViewById(R.id.someid) / @id/someid
● Enteros<integer name=“someint”>42</integer>
Values
● Array de enteros o strings● getIntArray(R.array.someintarray)
● Array tipado● Distintos tipos
Arrays
¿Preguntas?
Gracias
Fernando F. Gallego
twitter: @ferdy182