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

Recursos en Android 101

  • 658 views
Uploaded on

Learn how to use android resources efficiently on your apps

Learn how to use android resources efficiently on your apps

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
658
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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