Diferencia entre revisiones de «PDM Fab»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con «=Introdución= * Máis información en: :* https://developer.android.com/guide/topics/ui/floating-action-button :* https://developer.android.com/reference/android/support/…»)
 
 
(No se muestran 8 ediciones intermedias de otro usuario)
Línea 10: Línea 10:
  
  
* Este tipo de botón foi engadido a partires da versión 22 de Android e graficamente ten un aspecto redondo cunha icona no centro.
+
* Este tipo de botón foi engadido a partires da versión 22 de Android (Android 5) e graficamente ten un aspecto redondo cunha icona no centro.
: Segundo a guía de Material Design ten que ter unha elevación de 6dp´s e un tamaño de 56dp´s na súa versión por defecto podendo ter un tamaño de 40x40dp´s cando o ancho da pantalla sexa inferior a 460dp´s.
+
: Este e outros compoñentes se atopan na librería '''Android Design Support Library''', coma por exemplo [https://material.io/components/snackbars/ SnackBar].
 +
: Fixarse como ao empregar dito compoñente debemos ter no '''build.gradle (a nivel de módulo)''' dita librería:
 +
[[Imagen:PDM_Fab_4.jpg|450px|center]]
 +
 
 +
 
 +
 
 +
 
 +
 
 +
: Segundo a guía de Material Design ten que ter unha elevación de 6dp´s e un tamaño de 56dp´s na súa versión por defecto podendo ter un tamaño de 40x40dp´s cando o ancho da pantalla sexa inferior a 460dp´s. Existen outras series de especificación sobre o tamaño da icona,...que podedes consultar [https://material.io/components/buttons-floating-action-button/#anatomy neste enlace].
  
  
Línea 26: Línea 34:
  
 
<br />
 
<br />
 +
 
=Funcionamento e atributos básicos=
 
=Funcionamento e atributos básicos=
[[Imagen:PDM_Fab_1.jpg|500px|center]]
+
[[Imagen:PDM_Fab_1.jpg|600px|center]]
  
  
 
:* Tamaño do Fab: : Propiedade '''app:fabsize''' a cal acepta os valores 'normal','mini' e 'auto' ou ben por programación chamando ao método [https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton.html#setSize(int) setSize()].
 
:* Tamaño do Fab: : Propiedade '''app:fabsize''' a cal acepta os valores 'normal','mini' e 'auto' ou ben por programación chamando ao método [https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton.html#setSize(int) setSize()].
 
:* RippleColor: Efecto de cambio de cor do Fab ao premer nel. Un exemplo [https://i.stack.imgur.com/Z0kSG.gif neste enlace]. Propiedade '''app:rippleColor''' o por programación [https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton.html#setRippleColor(int) setRippleColor()].
 
:* RippleColor: Efecto de cambio de cor do Fab ao premer nel. Un exemplo [https://i.stack.imgur.com/Z0kSG.gif neste enlace]. Propiedade '''app:rippleColor''' o por programación [https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton.html#setRippleColor(int) setRippleColor()].
:* Icona do Fab: Cambiando a propiedade '''android:src''' o por programación chamando ao método [https://developer.android.com/reference/android/widget/ImageView.html#setImageDrawable(android.graphics.drawable.Drawable) setImageDrawable()].
+
:* Icona do Fab: Cambiando a propiedade '''app:srcCompat''' o por programación chamando ao método [https://developer.android.com/reference/android/widget/ImageView.html#setImageDrawable(android.graphics.drawable.Drawable) setImageDrawable()].
 +
:* Cor de fondo: app:backgroundTint e o seu método setBackgroundTintList(ColorStateList.valueOf(Color.XXXXX))
 +
:* Tamaño da icona: app:maxImageSize  (non se debería cambiar para cumprir os criterios de Material Design)
 +
:* Tamaño do fab: app:fabCustomSize (non se debería cambiar para cumprir os criterios de Material Design) e o seu método setCustomSize()
 +
:* Tamaño do borde do fab: app:borderWidth
 +
:* Elevación: app:elevation e o seu método setElevation(). Indicar que se temos un minSDK inferior a 21 non poderemos empregar este método e teremos que facer uso da clase ViewCompat da forma: ViewCompat.setElevation(View v, int elevation)
 +
 
 +
 
 +
 
 +
 
 +
 
 +
* A xestión do evento Click sobre o botón faise igual que noa caso dos Buttons como [https://wiki.cifprodolfoucha.es/index.php?title=Button._ToggleButton._Control_de_eventos_II xa vimos anteriormente nesta wiki].
 +
 
 +
 
 +
<br />
 +
==Métodos mínimos a coñecer no manexo do FloatActionButton==
 +
 
 +
* O FAB non deixa de ser un tipo de botón. O que nos interesa xestionar é o seu click, que xa está [https://wiki.cifprodolfoucha.es/index.php?title=Button._ToggleButton._Control_de_eventos_II#M.C3.A9todos_m.C3.ADnimos_a_co.C3.B1ecer_no_manexo_dos_Button.C2.B4s_e_variantes comentado no punto dos Button].
  
  
 +
 +
 +
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
 +
<br />
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
 +
<br />
  
  

Revisión actual del 12:55 21 nov 2020

Introdución

  • Máis información en:
PDM Fab 3.jpg
Imaxe obtida deste enlace


  • Este tipo de botón foi engadido a partires da versión 22 de Android (Android 5) e graficamente ten un aspecto redondo cunha icona no centro.
Este e outros compoñentes se atopan na librería Android Design Support Library, coma por exemplo SnackBar.
Fixarse como ao empregar dito compoñente debemos ter no build.gradle (a nivel de módulo) dita librería:
PDM Fab 4.jpg



Segundo a guía de Material Design ten que ter unha elevación de 6dp´s e un tamaño de 56dp´s na súa versión por defecto podendo ter un tamaño de 40x40dp´s cando o ancho da pantalla sexa inferior a 460dp´s. Existen outras series de especificación sobre o tamaño da icona,...que podedes consultar neste enlace.


  • Normalmente non se debe empregar máis de un Fab en cada activity xa que dito Fab vai representar unha acción principal ou unha acción habitual da activity.
Podemos ver nesta imaxe exemplo de uso correctos e incorrectos do FAB, obtidas deste enlace:
PDM Fab 2.jpg
  • Existen dous tipos de Fabs: standard e extended.
Podedes consultar as características de cada un deles no enlace anterior.
No caso do Standard, non se debe empregar texto dentro do Fab e se ten que empregar unha icona que sexa representativa da acción que se vai facer.



Funcionamento e atributos básicos

PDM Fab 1.jpg


  • Tamaño do Fab: : Propiedade app:fabsize a cal acepta os valores 'normal','mini' e 'auto' ou ben por programación chamando ao método setSize().
  • RippleColor: Efecto de cambio de cor do Fab ao premer nel. Un exemplo neste enlace. Propiedade app:rippleColor o por programación setRippleColor().
  • Icona do Fab: Cambiando a propiedade app:srcCompat o por programación chamando ao método setImageDrawable().
  • Cor de fondo: app:backgroundTint e o seu método setBackgroundTintList(ColorStateList.valueOf(Color.XXXXX))
  • Tamaño da icona: app:maxImageSize (non se debería cambiar para cumprir os criterios de Material Design)
  • Tamaño do fab: app:fabCustomSize (non se debería cambiar para cumprir os criterios de Material Design) e o seu método setCustomSize()
  • Tamaño do borde do fab: app:borderWidth
  • Elevación: app:elevation e o seu método setElevation(). Indicar que se temos un minSDK inferior a 21 non poderemos empregar este método e teremos que facer uso da clase ViewCompat da forma: ViewCompat.setElevation(View v, int elevation)





Métodos mínimos a coñecer no manexo do FloatActionButton




Enlace a la página principal de la UD2

Enlace a la página principal del curso




-- Ángel D. Fernández González - (2019)