Recursos en Android 101
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Recursos en Android 101

on

  • 847 views

Learn how to use android resources efficiently on your apps

Learn how to use android resources efficiently on your apps

Statistics

Views

Total Views
847
Views on SlideShare
692
Embed Views
155

Actions

Likes
2
Downloads
16
Comments
1

2 Embeds 155

http://programandoandroid.wikispaces.com 143
https://twitter.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Recursos en Android 101 Presentation Transcript

  • 1. Recursos en Android 101 Fernando F. Gallego @ferdy182
  • 2. Carpetas de recursos● 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) Pro tip ● values-es: Cadenas y valores cuando el locale es “es” Excluye recursos (Español) que empiecen por ● layout-large-land-car-night-finger-v11: Adivínalo! _ TipMás info: http://developer.android. Carpetas sincom/guide/topics/resources/providing-resources.html calificadores se consideran "por defecto"
  • 3. Manejo automático de recursos● 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 Pro tip Accede a los recursos de la plataforma con android.R.anim. fade_in o @android: anim/fade_in
  • 4. Soporte a distintas densidades de pantalla● 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). Tamaños relativos para bitmap drawables por densidad http://developer.android.com/guide/practices/screens_support.html
  • 5. Dando soporte a múltiples tamaños de pantalla● Los calificadores para layouts sirven para ofrecer diferentes layouts para diferentes dispositivos y "evitar" la fragmentación. ● 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. Layouts eficientes● 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
  • 7. Algoritmo de dibujo de Android● onMeasure: Cómo de grande quiere ser cada vista.● onLayout: Dibujado de cada vista.
  • 8. Layouts eficientes (II)● 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/>
  • 9. Layouts eficientes(III)● No definas views que uses raramente ● Usa ViewStub para cargar vistas bajo demanda<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();
  • 10. Layouts eficientes (IV)● Usa el menor número de views posible. Usa compound drawables. <LinearLayout <TextView android:layout_width="wrap_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_gravity="center_horizontal" android:orientation="horizontal" > android:drawableLeft="@drawable/ic_launcher" <ImageView android:gravity="center" android:layout_width="wrap_content" android:text="@string/hello_world" /> 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> Más info: http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/
  • 11. Nine-patch Drawable● 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. ● 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. State List Drawable● 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 Disabled Default Pressed <?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> android:background="@drawable/btn_nav_bg_selector"
  • 13. Shape Drawable● Crea un drawable basado en una forma definida en XML (aún así requiere dotes artísticas!) <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android. Pro tip com/apk/res/android" > Combinar con state list drawable: <gradient <selector> android:angle="270" <item android: android:endColor="#2f6699" state_pressed="true" > android:startColor="#449def" /> <shape> ... <stroke </shape> android:width="1dp" </item> android:color="#2f6699" /> <item> <shape> <corners android:radius="4dp" /> ... </shape> <padding </item> </selector> android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
  • 14. Clip Drawable● Recorta una porción de un drawable● Útil para personalizar barras de progreso<?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. Inset Drawable● 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
  • 16. Otros drawables● 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 Layer List ● drawable.startTransition(500);● Clip drawable ● Recorta una porción de un drawable ● Útil para personalizar barras de progreso● Scale drawable ● Escala un drawable Más info: http://developer.android. com/guide/topics/resources/drawable-resource.html
  • 17. Animaciones <set xmlns:android="http://schemas.android. com/apk/res/android" > <scale android:duration="5000" android:fillAfter="false" android:fromXScale="1.0"● Por interpolación android:fromYScale="1.0" ● (tweening) 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 (II)● Animaciones basadas en frames ● AnimationDrawable<?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. Animaciones (III)● ValueAnimator ● Anima valores con un TypeEvaluator (Int, Float, ARGB, propio) 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 ● Anima propiedades de objetos usando un ValueAnimator ObjectAnimator anim = ObjectAnimator.ofFloat(foo, "alpha", 0f, 1f); anim.setDuration(1000); anim.start(); ● Retrocompatibilidad con la librería NineOldAndroids (http: //nineoldandroids.com/)
  • 20. Estilos y temas● 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
  • 21. Temas● Personaliza un tema predefinido <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>● Aplica temas a actividades concretas o a toda la aplicación ● <activity android:theme="@style/Theme.Junaio"> ● <application android:theme="@style/Theme.Junaio">Pro tipLos temas predefinidos no están bien documentados y pueden ser liosos. No hay consistencia denombresbuttonStylebuttonStyleToggleradioButtonStyle…
  • 22. Soportando distintas versiones de la plataforma● 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"
  • 23. Values● 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>
  • 24. Arrays● Array de enteros o strings ● getIntArray(R.array.someintarray)● Array tipado ● Distintos tipos
  • 25. Gracias ¿Preguntas? Fernando F. Gallego twitter: @ferdy182