Si vienes usando Visual Studio probablemente sepas acerca de la posibilidad de extensibilidad. Crear extensiones para cubrir o mejorar cierta funcionalidad (plantilla de proyectos, nueva herramienta, etc.). ¿Sabías que es también posible en Visual Studio para macOS?.
En esta sesión, conoceremos como extender Visual Studio para macOS; como depurar una extensión así como ver todos los puntos principales de extensión todo a base de ejemplos.
El lugar
El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:
E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula por confirmar Av. Reina Mercedes s/n Sevilla Se 41012
La fecha
Será el próximo Jueves, 11 de Abril de 19:00h a 20:00h (GMT+1).
¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.
Lottiees una librería de animaciones creada por Airbnb para iOS y Android que se encarga de tomar animaciones de After Effect exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma.
Las animaciones pueden ser extremadamente complejas pero al final, trabajamos con archivos de imagen y JSONs lo que se traduce en un requisito pequeño en tamaño otorgando unas posibilidades altas. Las animaciones se pueden reproducir, pausar, detener, jugar con la velocidad o cambiar la escala.
Lottie Player
Usar animaciones de Lottie y acabar lanzando la App en depuración o usando herramientas externas para ver el resultado no es lo idóneo, ¿verdad?. Lottie Playeres un addin para Visual Studio para macOS que permite previsualizar (e interactuar) con la animación directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Lottie Player»:
Y pulsamos Install…
¿Qué aporta?
Podremos hacer clic derecho sobre un archivo de animación Lottie (recuerda, formato Json) y acceder a una nueva opción, Preview In Lottie Player…
Seleccionando la opción, previsualizaremos la animación en bucle además de:
Poder pausar y reanudar la animación en cualquier momento.
Si pausamos la animación, podremos movernos hacia cualquier frame de la animación.
Veamos el addin en funcionamiento:
Lo próximo
La versión actual aporta la funcionalidad básica pero hay una gran cantidad de opciones posibles para futuras versiones:
Controlar la velocidad de la animación.
Controlar si se reproduce o no en bucle.
Poder cambiar el fondo de la animación.
Etc.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
A la hora de trabajar con un proyecto en Git, Visual Studio para macOS cuenta con soporte integrado. Sin embargo, recientemente probé git-history. Sin duda, una forma intuitiva y muy interesante para ver le historial de cambios en un archivo. Así que, ¿por qué no tenerlo integrado en Visual Studio para macOS?.
Git History
Git History llega como addin para Visual Studio para macOS como una forma alternativa sencilla y rápida de ver el historial de cambios de un fichero.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Git History».
Y pulsamos Install…
¿Qué aporta?
Haciendo clic derecho sobre cualquier archivo de un proyecto que use Git tendremos una nueva opción:
Lo que nos abrirá una nueva vista con el historial del archivo:
Veamos como usar el addin directamente:
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
Tarde o temprano, el terminal acaba siendo un gran aliado. Hacer push en git, acceder a un archivo, ejecutar un script, etc. Las posibilidades son muy variadas.
Open Terminal
Open Terminales un addin para Visual Studio para macOS que permite abrir el terminal directamente desde el IDE de forma rápida y sencilla.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Open Terminal»:
Y pulsamos Install…
¿Qué aporta?
Poder abrir el terminal desde el IDE directamente. Podemos hacer clic derecho sobre cualquier proyecto o carpeta para abrir el terminal estando ya en dicha carpeta:
De modo que, tendremos el terminal abierto con la carpeta seleccionada prepara directamente para ejecutar comandos!.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
Según evoluciona de Xamarin.Forms, llegan más y más opciones que simplifican la creación de diferentes elementos de la interfaz de usuario.
En el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.
NOTA:La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc.
En este artículo, vamos a tomar como referencia un diseño de Dribbble (por Anton Aheichanka), que intentaremos replicar con Xamarin.Formspaso a paso.
My Tasks
Vamos a intentar replicar la UI del diseño paso a paso en Xamarin.Forms.
Los retos del ejemplo
Vamos a comenzar haciendo un análisis de la interfaz de usuario desglosando los elementos que la componen:
Cabecera: La cabecera cuenta con información del perfil de usuario. La imagen del perfil es circular algo que es sencillo de conseguir de diversas formas (FFImageLoadingcon transformaciones, ImageCirclePlugino incluso con SkiaSharp). La otra característica destacada de la cabecera es la imagen de fondo ya que tiene un corte horizontal sencillo pero que hace destacar aun más la cabecera. Entre las opciones que tenemos, una de las más sencillas es utilizar SkiaSharp.
El listado: El listado cuenta con una cabecera sencilla pero elegante, fácil de conseguir con la propiedad Header del ListView; elementos que se pueden conseguir definiendo una celda personalizada. En la celda, en caso de reuniones se muestran los participantes. Ahora gracias a BindableLayout es algo sencillo.
El menu de filtro: La característica principal de la vista. Una de mis APIs favoritas en Xamarin.Forms es la de animaciones. Sencilla pero ofrece una libertas muy alta. En este caso, podemos replicarlo usando una ContentView con imágenes en el interior y el efecto de apertura y cierre del menu lo conseguimos a base de animaciones (de escala, opacidad, etc.).
Imagen con corte horizontal
¿Cómo conseguimos la imagen con corte horizontal?
SkiaSharpsuele ser una opción ideal para opciones de dibujado. En este caso, nos vendría genial directamente dibujar la imagen pero recortando una pequeña parte (triangulo) de la parte inferior. SkiaSharp permite cargar imágenes además de tener una enorme variedad de posibilidades al tratar la misma. aplicar diferentes transformaciones, efectos, etc. Podemos hacer un recorte con trazado (un path) de una imagen.
Tras añadir los paquetes de SkiaSharp.Views.Formsa la solución, creamos un nuevo control que herede de SKCanvasView.
Comenzamos definiendo el trazado que usaremos para recortar la imagen:
SKPath Path = SKPath.ParseSvgPathData("m 0 0 l 400 0 l 0 300 l -400 -50");
Usamos el método ClipPathpara hacer el recorte:
canvas.ClipPath(Path);
Para dibujar la imagen usamos SKBitmap que pintaremos con el método DrawBitmap:
canvas.DrawBitmap(_bitmap, info.Rect);
Sencillo, ¿verdad?
Listado
Llegamos al listado. No tiene nada especialmente complejo, pero vamos a ir desglosando cada bloque. Comenzamos por la cabecera. Nos apoyamos en la propiedad Header del ListView para definir la misma:
En la definición de cada elemento del listado tenemos una peculiaridad. En caso de reunión, mostramos las personas que asisten. Para ello, hacemos uso de BindableLayoutintroducido en Xamarin.Forms 3.5:
Vamos a crear un ContentViewque contendrá primero la imagen del menu cerrado. Por otro lado, la imagen para cerrar el menu y el fondo expandido además de claro, una imagen por cada elemento del menu.
Haremos uso de GestureRecognizerspara capturar las pulsaciones en el menu o cada elemento del menú. Al pulsar haremos dos acciones.
Por un lado, lanzaremos un comando definido en el control:
public static readonly BindableProperty SelectedCommandProperty =
BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(FilterMenu), null);
public ICommand SelectedCommand
{
get { return (ICommand)GetValue(SelectedCommandProperty); }
set { SetValue(SelectedCommandProperty, value); }
}
Y por otro lado, haremos uso de animaciones!. Veamos por ejemplo, que hacemos para abrir el menu:
Ocultamos con una rotación el botón (imagen) para abrir el menu. a continuación mostramos el botón de cerrar y escalamos (importante!) el area del menu. Por último, cambiamos la opacidad de cada elemento del menu.
Sencillo, pero realmente espectacular y efectivo.
Esta idea de menu esta basada en un gran ejemplo de Alan Beechque Ricardo Vasquezha elaborado más para tener un control.
El resultado conseguido:
Puedes encontrar el ejemplo en GitHub:
Hasta aquí el desglose del ejemplo. Lo terminamos sin Custom Renderers o efectos, haciendo uso de Xamarin.Forms y sus APIs para tareas complejas como el menú de filtro o el listado y apoyándonos en SkiaSharp para algunas tareas.
Cualquier duda o comentario es bienvenido en los comentarios!
Desde CartujaDotNet, grupo de usuarios .NET de Sevilla ySVQXDG, grupo de desarrolladores Xamarin de Sevilla,vamos a realizar una quedada informal (la primera del año!) para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, se analizarán las próximas charlas ya planteadas y los eventos confirmados entre otros temas de interés. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.
No hace falta confirmar asistencia, y por supuesto será gratuito.
A la hora de aprender un lenguaje o framework es ideal contar con una buena documentación, pero, contar con ejemplos complementarios es aún mejor si cabe. Poder ver el código, modificarlo y probar los resultados. Gran parte de la documentación Xamarin cuenta con ejemplos oficiales asociados disponibles en GitHub. ¿Y si pudiésemos acceder a los ejemplos de forma aún más sencilla?.
Samples Importer
Llega Samples Importer, un nuevo addin para Visual Studio para macOS, que permite acceder a ejemplos oficiales de:
Xamarin.Android
Xamarin.iOS
Xamarin.Forms
Xamarin.Mac
Pudiendo ver la información básica de cada ejemplo (título, descripción, plataformas, tags, etc.), filtrar y directamente descargar además de abrir el ejemplo directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por “Samples Importer”:
Y pulsamos Install…
Tras instalar, lo primero que debemos hacer es configurar el addin. Samples Importer obtiene toda la información de cada ejemplo (así como el código del mismo) desde GitHub con el firme objetivo de ofrecer siempre el ejemplo actualizado a la última. Para ello, es necesario añadir un Personal Access Token en la configuración de Visual Studio:
NOTA: Los ejemplos se descargarán automáticamente a una ruta temporal. Sin embargo, es posible elegir una ruta específica en la configuración del addin.
¿Qué aporta?
Desde el menu Tools tenemos acceso a una nueva opción Samples Importer. Tenemos acceso a un nuevo dialogo donde podemos acceder a los ejemplos oficiales de Xamarin (Android, iOS, Xamarin.Forms, macOS). Acceder a un ejemplo, para ver el código y probar es tan sencillo como seleccionar y pulsar el botón Continue:
Tras pulsar el botón, se descargará el ejemplo seleccionado a la carpeta establecida en la configuración del addin (se utiliza una carpeta temporal en caso de no establecer ninguna carpeta específica).
A continuación, una serie de capturas del addin con diferentes ejemplos:
Lo próximo
Para la próxima versión del addin se incluirán las siguientes mejoras:
En la actual versión se buscan ejemplos directamente de las carpetas de repositorios oficiales de ejemplos Xamarin. Sin embargo, la búsqueda se realiza en las carpetas de primer nivel. Existen carpetas con subcarpetas con más ejemplos. Se añadirá una búsqueda en profundidad.
Cache. Se incluirá una cache de ejemplos de modo que si, no hay cambios en el repositorio, se utilizará la cache y se evitará la carga haciendo peticiones a GitHub.
Se añadirá una opción para cargar ejemplos de la comunidad.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
En Xamarin.Forms tenemos un tipo especial de View llamada Layout. Un Layout es un contenedor para otros elementos permitiendo ayudar a posicionar y gestionar el tamaño de los elementos que contiene. En Xamarin.Forms contamos con una gran variedad de Layouts:
Los más utilizados son el StackLayout y el Grid, y suele ser habitual hacer una composición de varios así como utilizarlos para crear controles, etc. Por ejemplo, en ocasiones se utiliza la combinación de ScrollView y StackLayout junto con ContentViews para crear un pequeño listado de elementos horizontal.
Bindable Layout
Con la llegada de Xamarin.Forms 3.5 pre2 nos llega Bindable Layout. En toda clase derivada de Layout<T>, contamos ahora con las siguientes propiedades:
ItemsSource: De tipo IEnumerable, soporta el enlace de una colección de datos.
ItemTemplate: De tipo DataTemplate, permitirá definir la apariencia visual de cada elemento.
ItemTemplateSelector: De tipo ItemTemplateSelector, permite poder elegir entre diferentes templates para cada elemento en base a ciertas condiciones.
Las propiedades resultan familiares conociendo otros controles en Xamarin.Forms como el ListView.
¿Recuerdas el ejemplo que hemos mencionado de listado horizontal?. Utilizando Bindable Layout todo se simplifica.
Uso básico
De la interfaz que estamos replicando, el caso más sencillo es el listado de amigos.
Utilizamos un estilo para habilitar el Wrapping, etc. A continuación, vamos a hacer uso de Bindable Layout para evitar definir N imágenes dentro del Layout.
Al contar con la necesidad de tener imágenes de diferente tamaño en la galería, vamos a utilizar la propiedad ItemTemplateSelector para utilizar diferentes plantillas:
A la hora de trabajar con nuestros proyectos, contamos con imágenes. A veces serán recursos para la gestión del icono de la aplicación, otras serán recursos a utilizar en la aplicación. En cualquier caso, necesitamos gestionar una serie de acciones:
Cuidar el tamaño de las imágenes. Tener un set de imágenes optimizadas es fundamental para garantizar el correcto funcionamiento de la aplicación cuidando el consumo de memoria.
Generar la misma imagen en diferentes tamaños. Redimensionar una imagen o crear diferentes imágenes con diferentes tamaños para crear el icono de una aplicación móvil.
Ver listado de imágenes usadas (y cuales no), copiar y mover imágenes entre proyectos, etc.
Asset Studio
Asset Studio llega como un addin para Visual Studio para macOS para ofrecer diferentes opciones relacionadas con el tratamiento y gestión de imágenes.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Asset Studio»:
Y pulsamos Install…
¿Qué aporta?
Actualmente, esta primera versión del addin se centra en optimizar las imágenes. Podemos seleccionar una imagen específica, y al hacer clic derecho tendremos la opción
Tras pulsar la opción, aparecerá un dialogo donde veremos la información básica de la imagen (previsualización, tamaño, peso y nombre) y podremos optimizarla.
Si hacemos clic derecho sobre una carpeta en lugar de una imagen, se buscarán todas las imágenes que contiene la carpeta (y sus subcarpetas).
Veremos un listado con todas las imágenes con su información básica (nombre y tamaño):
Veámoslo en funcionamiento:
Para optimizar las imágenes se utiliza la API de TinyPNG que requiere un API Key para funcionar. Para añadir el API Key se debe acceder a las preferencias de Visual Studio, opción Other > Asset Studio:
NOTA: Desde las opción de configuración del addin se encontrará un enlace para crear un API Key.
Lo próximo
Para las próximas versiones, se incluirá un gestor de imágenes junto con una opción para generar los iconos necesarios para Android e iOS en diferentes tamaños partiendo desde una imagen.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
En ocasiones, necesitamos borrar las carpetas de salida (bin y obj) y puede llegar a ser un proceso tedioso y manual sobretodo en caso de contar con muchos proyectos en la solución.
Sweeper
Sweeper llega en forma de addin para Visual Studio para macOS para facilitar el borrado de carpetas bin y obj además de otras carpetas importantes.
¿Cómo instalar?
Accedemos al menu principal de Visual Studio y seleccionamos Extensions…
Buscamos por «Sweeper»:
Pulsamos Install…
¿Qué aporta?
Con una solución abierta, podemos hacer clic derecho sobre la solución o un proyecto específico y veremos:
El addin incluye dos opciones extras:
Clean /bin and /obj Directories: Limpia las carpetas bin y obj. Al seleccionar una solución limpiará los directorios de salida de cada proyecto.
Clean /packages Directory: Limpia la carpeta de paquetes NuGet.
NOTA: Al recompilar la solución se volverán a descargar los paquetes NuGet.
Lo próximo
Para próximas versiones hay ya planeadas nuevas opciones como:
Comprimir un proyecto.
limpiar y comprimir un proyecto.
Comprimir la salida de un proyecto.
¿Qué te parece el addin?, ¿qué te gustaría añadir?. Recuerda, cualquier comentario es bienvenido en la entrada!.