Recursos Android Eficientes 101

Aprende a usar los recursos de android de la forma correcta en tus aplicaciones. Nivel principiante

Transcript

1. Recursos en Android 101 Fernando F. Gallego @ferdy182
2. • 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 tip Excluye recursos que empiecen por _ Tip Carpetas sin calificadores se consideran "por defecto"
3. • 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 tip Accede a los recursos de la plataforma con android.R.anim. fade_in o @android: anim/fade_in
4. • 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
5. • 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)
6. • 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
7. • onMeasure: Cómo de grande quiere ser cada vista. • onLayout: Dibujado de cada vista. Algoritmo de dibujo de Android
8. • 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)
9. • 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); // or View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();
10. • 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/
11. • 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
12. • 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 Pressed Default android:background="@drawable/btn_nav_bg_selector"
13. • 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 tip Combinar con state list drawable: <selector> <item android: state_pressed="true" > <shape> ... </shape> </item> <item> <shape> ... </shape> </item> </selector>
14. • 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
15. • 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
16. • 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
17. • 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>
18. • 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>
19. • 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();
20. • 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
21. • 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 tip Los temas predefinidos no están bien documentados y pueden ser liosos. No hay consistencia de nombres buttonStyle buttonStyleToggle radioButtonStyle …
22. • 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.xml android:theme="@android:style/AppTheme" Soportando distintas versiones de la plataforma
23. • 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
24. • Array de enteros o strings • getIntArray(R.array.someintarray) • Array tipado • Distintos tipos Arrays
25. ¿Preguntas? Gracias Fernando F. Gallego twitter: @ferdy182