Personalizando Xamarin.Forms Picker Items
Esta publicación es parte del Calendario de Adviento Xamarin, una iniciativa liderada por Luis Beltrán. Revisa este enlace para conocer más artículos interesantes sobre Xamarin (y tecnologías afines) publicados por varios miembros de la comunidad.
El control Picker de Xamarin.Forms permite seleccionar un elemento de una lista de registros, los cuales se presentan en modo texto únicamente, de manera que si quisieras mostrar la información con una imagen o en otro formato deberías optar por alguna otra solución (por ejemplo, un ListView/CollectionView que sí admiten este nivel de personalización).
El control Picker exhibe varias propiedades para modificar la apariencia del texto, tales como TextColor, FontAttributes, FontFamily, FontSize que sin embargo solo aplican para el elemento seleccionado.
Por ejemplo, el siguiente código…
… muestra el Picker y la lista de elementos de la siguiente manera:
Es decir, el estilo no aplica a los items del picker… A menos claro, que usemos un Custom Renderer, y eso es justo lo que vamos a hacer en esta publicación.
¡Manos a la obra!
Paso 1. Crea una clase CustomPicker que herede de la clase Picker en el proyecto de código compartido (yo lo he puesto en una carpeta Controls). Observa cómo se exponen dos propiedades (ItemFontFamily e ItemColor) lo que indica que el usuario podrá definir sus valores en la vista más adelante:
Paso 2. En el proyecto de Android, agrega una fuente personalizada en la carpeta Assets, revisa que la acción de compilación esté en AndroidAsset y que la opción Copiar a directorio de salida esté en Copiar siempre. Puedes obtener fuentes desde GoogleFonts o en otros sitios de Internet. En mi caso, voy a utilizar la fuente Pacifico.
Paso 3. En la carpeta layout (dentro de Resources) agrega un Android Layout llamado cell_layout.axml, el cual define la apariencia de cada elemento del Picker. Para este caso, solo utilizaremos un TextView dentro de un LinearLayout (ahí se mostrará alguna propiedad de nuestro modelo, por ejemplo el nombre del monito):
Paso 4. En la misma carpeta agrega otro Android Layout llamado custom_picker_dialog.xml, el cual contiene un TextView y un ListView dentro de un LinearLayout que serán utilizados para implementar la interfaz (y más adelante, la funcionalidad) de un Picker de Xamarin.Forms. Observa el código:
Paso 5. En el proyecto de Android crea una clase llamada CustomPickerAndroid (yo lo he hecho en una carpeta Renderers). Es en esta clase donde se asignan las propiedades del CustomPicker a los elementos de interfaz que acabamos de crear en Android:
- En el método OnElementChanged se obtiene la referencia a la instancia de CustomPicker y se obtienen sus propiedades.
- Cuando se da clic en el control, se carga el ListView (a través de un Adapter y su método GetView) y se configura la apariencia de acuerdo a las propiedades establecidas en OnElementChanged.
El código se muestra a continuación:
Paso 6. Regresa al proyecto de código compartido. En App.xaml vamos a definir recursos para utilizar la fuente personalizada:
Paso 7. Finalmente, modifica la vista MonkeyView para utilizar el CustomPicker y asigna valores a sus propiedades ItemFontFamily e ItemColor:
Paso 8. Compila, ejecuta y verifica la apariencia y funcionamiento de tu nuevo Picker personalizado:
Como puedes ver, ¡ahora tanto el color como la fuente tipográfica de los Picker Items se pueden configurar desde tu app de Xamarin.Forms!
El renderer para iOS (y UWP) lo dejamos para otra ocasión =) (o si me quieres apoyar, hazle un PR al proyecto en GitHub, ¡es open source y lo encuentras disponible aquí!)
Espero que esta publicación te haya sido de utilidad, no olvides compartirla en tus redes sociales, tal vez le sirva a alguien más =)
Recuerda seguir el resto de las interesantes publicaciones del Calendario de Adviento Xamarin. También puedes seguir la conversación en Twitter con el hashtag #AdvientoXamarin y en la Comunidad Xamarin en Español en Facebook.
¡Gracias por la visita y hasta la próxima!
Luis
