Añade un panel (StackLayout) con la orientación horizontal, de esa forma los controles que metas dentro de ese stack se mostrarán uno al lado del otro, pon un Switch seguido de un botón con el texto «Un Switch» y después otro Switch y otro botón con el texto «Otro Switch» (o lo que te de la gana pero que no sea demasiado largo). En este caso el texto no pillará todo el ancho y verás que no se ve igual en iOS / iPhone que en Android o UWP/Windows. Si no puedes probarlos en distintos dispositivos emuladores, te pondré la respuesta con algunas capturas de los tres sistemas que utilizo con Xamarin.Forms.
Nota: Probando el ejercicio, compruebo que el poner más espacios al final, no tienen el efecto deseado, así que… si es iOS usa el valor 6,0 para la propiedad Padding.
Otra cosa interesante que puedes hacer (ejercicio 2) es que las etiquetas estén alineadas en el centro vertical, es decir, para que no se vean con el texto tan arriba, sino en el centro de la propia etiqueta.
Estas son las soluciones
Al ejercicio 1 y 2:
<StackLayout Orientation="Horizontal" Padding="4" Spacing="3">
<Label Text="2 Switch con botones: " VerticalOptions="Center"/>
<Switch />
<!-- Los espacios detrás no se respetan... habrá que usar padding -->
<Button Text=" Un Switch "
Padding="{OnPlatform iOS='6,0', Android='6,0', Default=4}"/>
<Switch />
<Button Text=" Otro Switch "
Padding="{OnPlatform iOS='6,0', Android='6,0', Default=4}"/>
</StackLayout>
Nota: El valor ColorAzul2 está definido en App.xaml.
En ej ejercicio 2 lo que debes usar es: VerticalOptions="Center"
Capturas de los ejemplos
Aquí te dejo algunas capturas (me gusta que los posts tengan imágenes 😉 )
Ya sabes, pulsa en la imagen para verla en grande.
Figura 1. Página principal del proyecto en Android.Figura 2. La solución a los ejercicios en Android.Figura 3. Página principal del proyecto en iPhone.Figura 4. Las soluciones en iPhone, pero en modo oscuro no se ve la etiqueta…Figura 5. Solución a los ejercicios en iPhone (usando el tema claro).
Pues eso… te voy a relacionar varios trucos sobre cómo usar el código (y el código de marcado XAML) para dispositivos móviles (Android, iOS y UWP -Windows 10-) usando Xamarin.Forms (Mono mobile) y seguramente servirá para .NET MAUI, la que será el sustituto de Xamarin cuando .NET 6.0 esté en fase release (sobre noviembre de este año 2021).
Nota: El código mostrado a la hora de escribir este post (2 de junio de 2021 a las 11:15) es para Xamarin.Forms y C#. Cuando tenga ejemplos de .NET MAUI lo indicaré si es diferente al de Xamarin.
Saber la plataforma (Android, iOS o UWP) y el tipo de dispositivo (Phone, Tablet, TV, Watch, Desktop)
Algunas veces es conveniente saber si la aplicación está funcionando en un dispositivo Android, iOS o compatible con UWP (Windows 10 escritorio o móvil, Xbox, etc.), tanbién si es un móvil, escritorio, tablet, etc.
La primera (la plataforma) se averigua con Platform y OnPlatform y los valores aceptados son los indicados en la tabla 1 (de la ayuda de Xamarin.Forms) que corresponden al tipo DevicePlatform:
La segunda (el tipo de dispositivo) se averigua con Idiom y OnIdiom y los valores de DeviceIdiom que son los que te muestro en la tabla 2.
Cuando usamos Platform o Idiom lo haremos por código usando la clase DeviceInfo (definida en Xamarin.Essentials). OnPlatform y OnIdiom lo usaremos en el código XAML. Ahora veremos ejemplos de código c# y XAML de estos dos casos.
Por código podemos usar DeviceInfo (habrá que importar el espacio de nombres Xamarin.Essentials) y las estructuras DevicePatform o DeviceIdiom según lo que queramos averiguar.
Nota: En estos ejemplos estoy usando una página sencilla de tipo ContentPage de Xamarin. En la que estarán definidos los controles usados en el código.
Por ejemplo, si queremos saber si el código está ejecutándose en un dispositivo UWP (por ejemplo, en Windows 10) o en Andoid o en iOS podemos hacer lo siguiente comprobando la propiedad Platform del tipo DeviceInfo:
// Saber la plataforma
if (DeviceInfo.Platform == DevicePlatform.UWP)
LabelDevicePlatform.Text = "Estás usando la plataforma UWP";
elseif (DeviceInfo.Platform == DevicePlatform.Android)
LabelDevicePlatform.Text = "Estás usando la plataforma Android";
elseif (DeviceInfo.Platform == DevicePlatform.iOS)
LabelDevicePlatform.Text = "Estás usando la plataforma iOS";
Lo mismo te interesa saber si se está ejecutando en un teléfono móvil una tableta o en el escritorio, para eso usaremos la propiedad Idiom de la clase DeviceInfo:
// Saber el tipo de dispositivo
if (DeviceInfo.Idiom == DeviceIdiom.Desktop)
LabelDeviceIdiom.Text = "Estás usando el escitorio.";
elseif (DeviceInfo.Idiom == DeviceIdiom.Phone)
LabelDeviceIdiom.Text = "Estás usando un teléfono móvil.";
elseif (DeviceInfo.Idiom == DeviceIdiom.Tablet)
LabelDeviceIdiom.Text = "Estás usando una tableta.";
Pero puede ser que lo que queremos es asignar un color según el código esté funcionando en una de las plataformas. En lugar de hacerlo por código, lo podemos hacer definiendo esa característica en el diseñador XAML.
Vamos a verlo aplicando un color al fondo de la etiqueta LabelDevicePlatform definida en el ejemplo.
En ese código XAML hacemos las dos comprobaciones, la plataforma y el dispositivo y según sea aplicaremos un color u otro.
Si quieres hacer solo esa comprobación, por ejemplo para que en dispositivos de Apple (iOS) tengan un color y que en el resto tenga otro, podemos hacerlo de esta forma:
En ese caso usamos el valor (o propiedad) Default que se aplicará a las plataformas (o dispositivos si se usa con OnIdiom) para las que no haya un valor concreto.
Poner varios valores en el código XAML usando OnPlatform, OnIdiom, etc.
Otra de las cosas que me ha pasado mientras estoy con esto de crear aplicaciones para dispositivos móviles y concretamente con el iPhone (iOS), en el que el texto mostrado en uno de los tipos de botones que estoy usando (para simular un Switch) es que el texto se queda pegado a los bordes del botón, mientras que en Android y UWP se quedaba separado.
Para solucionarlo necesitaba hacer dos cosas: 1- La más simple es poder añadir espacios delante y detrás del texto. Esto sería fácil si esa asignación la hago por código (c#), pero yo quería hacerla en el código de diseño (XAML). 2- Cambiar el Padding izquierdo y derecho.
El problema es que para el primer caso, tenía que asignar espacios delante y detrás del texto, pero ni usando el valor 255 (ALT+255) lo conseguí, ya que al ejecutar el código esos espacios se ignoran .
En el segundo caso, es que al asignar valores separados por comas da error, ya que después de cada coma se espera una propiedad.
Por ejemplo, lo del espacio. Fíjate en el siguiente código XAML el valor del texto (propiedad Text) lo asigno usando un valor diferente según la plataforma. Si es iOS uso un espacio delante y detrás de la palabra ATRÁS, en el resto de plataformas (Default) use ese mismo texto pero sin espacios:
Y si ese texto llevase comas, pues… ni se podría poner.
Ese sería el caso para cuando queremos asignar un valor que tenga varios argumentos separados por comas, como es el caso de Padding si no queremos asignar un solo valor para los 4 costados. Ya que solo me interesaba para la parte iaquierda y derecha, que si lo asignase de forma normal sería algo así:
Padding="6,0"
El primer valor se asignará a la izquierda y derecha (Left y Right) y el segundo valor arriba y abajo (Top y Botton). Que queremos asignar 4 valores diferentes, lo haremos así:
Margin="4,5,6,7"
Los valores serían: 4 para la izquierda, 5 para arriba, 6 para la derecha y 7 para abajo.
La solución: Poner el texto entre comillas simples (las dobles no se pueden usar, ni siquiera usando teclas de ESCAPE, algo así: \»).
Por cierto, esa solución también es válida para el código HTML, cuando quieres poner comillas dentro de unas comillas, por ejemplo un valor style en el texto asignado a algo mediante código. Pero esa es otra historia.
Dicho lo dicho, la cosa quedaría de esta forma, si lo que se busca es que el padding izquierdo y derecho sea 6 para la plataforma iOS y 0 para el resto y que el texto incluya comas o espacios delante y/o detrás, si esos espacios están entro otros caracteres no hay que hacer nada especial.
Como ves el valor del Padding para iOS es ‘6,0’ (entre comillas simples). Fíjate también que en ese código (para el valor de la propiedad Text) he usado \’ para indicar que quiero usar una comilla simple, esto solo funcionará si el texto completo está encerrado entre comillas simples.
Aquí tienes unas capturas de UWP: Windows 10 en el equipo local o lo que es lo mismo, usando el escritorio (figura 1), para Android (figura 2) y para iOS en un iPhone 7 Plus (figuras 3 y 4).
Observa los colores de las etiquetas (fondo y texto), así como en la parte de abajo que hay texto entre comillas simples.
Y observa que el padding para el botón ese con el texto tan largo, pues como que no sirve de mucho, ya que el botón pilla todo el ancho de la pantalla, pero sería útil si ese botón se está mostrando en un sitio que no lo expanda.
Añade un panel (StackLayout) con la orientación horizontal, de esa forma los controles que metas dentro de ese stack se mostrarán uno al lado del otro, pon un Switch seguido de un botón con el texto «Un Switch» y después otro Switch y otro botón con el texto «Otro Switch» (o lo que te de la gana pero que no sea demasiado largo). En este caso el texto no pillará todo el ancho y verás que no se ve igual en iOS / iPhone que en Android o UWP/Windows. Si no puedes probarlos en distintos dispositivos emuladores, te pondré la respuesta con algunas capturas de los tres sistemas que utilizo con Xamarin.Forms.
Nota: Probando el ejercicio, compruebo que el poner más espacios al final, no tienen el efecto deseado, así que… si es iOS usa el valor 6,0 para la propiedad Padding.
Otra cosa interesante que puedes hacer (ejercicio 2) es que las etiquetas estén alineadas en el centro vertical, es decir, para que no se vean con el texto tan arriba, sino en el centro de la propia etiqueta.
Pulsa en las imágenes para verlas a tamaño real.
Figura 1. El ejemplo en un Windows 10 (UWP).Figura 2. El ejemplo en un móvil de Android (Pixel 4a).Figura 3. El ejemplo en un móvil iOS (iPhone 7 Plus). Observa que no se ve todo el texto.Figura 4. El ejemplo en un móvil iOS (iPhone 7 Plus).
Si miras las capturas 3 y 4 verás que en la última ya se ve bien el texto, tanto de la etiqueta de arriba como en la que tiene el fondo verde (la que indica que estás usando la plataforma iOS), para solucionar esa error, he vuelto a usar lo comentado en este post.
En el caso de la etiqueta de Xamarin he ajustado el valor de Padding para el iOS que sea más pequeño que para el resto.
Nota importante sobre los valores asignados cuando usamos OnPlatform, OnIdiom, etc. Cuando usamos, por ejemplo, OnPlatform el Intellisense de Visual Studio (en este ejemplo estoy usando Microsoft Visual Studio Community 2019 Version 16.10.0) te muestra los valores de la plataforma (iOS, Android, UWP, Default, etc.), pero no te muestra el intellisense para los valores asignados. Por ejemplo, en el valor de FontSize del código XAML anterior, he usado el valor Micro para iOS y Small para el resto (Default), esos valores hay que ponerlos como se deben poner, me explico: si el valor es Micro con la m mayúscula, debe estar así escrito, si pones micro (con la m en minúscula) te dará error… Esto lo sé porque lo escribí en minúscula y al ejecutar el programa en el iPhone me dijo que nones… 😉
Si al crear un proyecto no te aparecen los emuladores ni dispositivos
Pues eso… he creado un nuevo proyecto para Xamarin.Forms para estos ejemplos y ejercicios y al intentar probarlo en otra plataforma distinta a UWP, vamos al intentar probarlo en Android o iPhone no me salían las opciones de los emuladores o los dispositivos.
¿La solución? Cerrar la solución y volverla a abrir, así de simple.
Solo falta publicar el proyecto en GitHub, pero como lo he usado en la aplicación que tengo para las reservas de MKN (la empresa donde trabajo), tendré que crear un proyecto/solución para poder ponerlo en GitHub y así poder descargarlo, etc. Ya avisaré. Avisado estás de que ya está publicado en GitHub 😉 La solución a los dos ejercicios las pondré en otro post y también estarán en GitHub.
gsNotas.Mobile multiplataforma (versiones 2.1.0.4 y 2.1.0.5)
Nota: Esta es la página para la última versión publicada de gsNotas multiplataforma. Si estás buscando la versión 2.0.0.33 sigue el enlace.
En la última actualización de ayer 26 de mayo de 2021 (la terminé de compilar, etc. ayer día 26 pero hoy 27 de mayo es cuando la hago público y pondré el código fuente de esta última release en GitHub) ha habido unos cambios con respecto a la última versión, entre ellos que está disponible para Windows UWP (Universal Windows Platform) y estará publicada en la Microsoft Store cuando este sitio tenga el certificado de seguridad, que aún no tiene por aquello del cambio de proveedor de hosting y el latazo de los cambios de registro de los dominios, etc.).
El nombre cambia a gsNotas (gsNotas.Mobile) pero que cada plataforma tendrá el suyo propio: gsNotas.Android para Android, gsNotas.UWP para la plataforma universal de Windows y gsNotas.iOS para el iPhone (en teoría para cualquier dispositivo iOS).
La versión para iOS (iPhone) ya he podido hacerla funcionar en el móvil que tengo: iPhone 7 plus. Aún no puedo crear la aplicación para la App Store de Apple porque necesito un Mac con la última versión de Xcode, y el Mac que tengo actualmente a mi disposición (a través de conexión remota), el de mi nuera Olena, no tiene la última versión del Mac OS por tanto no puedo tener el último Xcode. Aunque me ha comentado mi hijo David que está por actualizarlo, aunque esa última versión del MacOS no es de su agrado… se ve que tiene fallos…
La versión para iOS (iPhone, etc.) tendrá que esperar, ya que había problemas entre Microsoft y Apple con el tema de los certificados, etc., y parece ser que ya lo han solucionado, el problema es que para poder crear el paquete de instalación necesito un Mac con la última versión de Xcode y el que tengo disponible es una versión del iOS que no soporta esa última versión de Xcode, así que… a esperar o a ver si un alma caritativa me ofrece un Mac de forma remota con la última versión del iOS.
Novedades en esta versión (2.1.0.4~2.1.0.5)
v2.1.0.5 (27-mayo-2021)
Aparte de poder compilar y probar la versión para iOS en un iPhone 7 Plus, he añadido código para que los Placeholder (el texto mostrado como indicador de qué se espera que escribas) se vean también en modo oscuro (en modo light/claro se veían bien, pero desaparecían en modo dark/oscuro). Y es que yo suelo tener mi móvil (de Android) en modo oscuro, más que nada por el tema del ahorro de batería y normalmente no se veían esos placeholders salvo que cambiara a modo claro (quitando el ahorro extremo de batería).
Novedades cosméticas
La mayoría de estas novedades son más bien cosméticas, es decir, un pequeño lavado de cara, pero no en plan grande, si no, de apoco que dirían mis colegas del otro lado del charco; como por ejemplo, dividir todas las opciones que antes se mostraban en la pantalla de inicio en dos pantallas (ahora pondré las capturas). De esta forma, las más usuales estarán en la primera pantalla y el resto en la otra.
Pero también hay novedades en cuanto a la funcionalidad.
Novedades funcionales
El otro día (ya no recuerdo qué día) me cambié de compañía telefónica en el móvil, tenía Digi Mobil y me cambié a Amena. El cambio fue porque yo vivo en el campo y aquí no hay cobertura telefónica, esto es como un agujero negro para las compañías telefónicas, solo tengo acceso por medio del Wi-Fi, pero no porque una compañía telefónica lo ofrezca, no, para eso también es un agujero negro, es porque un colega tiene un repetidor de señal que trae desde el pueblo (Nerja) hasta aquí los montes (Río de la Miel), y hasta ahora toda la comunicación era por medio de Internet. Pero los de Orange ofrecen un servicio llamado Llamadas por Wi-Fi, y como Orange es caro (para mí) me decidí por Amena que tiene una tarifa aceptable. Retomamos la historia, sin tantas historias: Y en ese transcurso del cambio de compañía, perdí la conexión a Internet mientras estaba en el pueblo, como esta utilidad la suelo usar para tomar notas, quise abrirla para consultar algo, y resulta que me decía que no había conexión a Internet, así que, decidí usar las notas locales, pero… ¡No me las mostraba! ¿Por qué? Porque no había conexión a Internet… ¿¿¿??? Así que… me dije a mí mismo: A ver Guille… si las notas locales están para usarlas cuando no hay conexión y no se pueden usar cuando no tienes conexión… ¿para qué puñetas sirven? Y me respondí: ¡Poh e verdá! (yo es que conmigo mismo hablo así)
Así que… esa es una de las novedades funcionales de la nueva versión: ¡Que se puede trabajar de forma local aunque no estés logueado!
Por tanto, y para que quede evidente, en la pantalla de LOGIN he añadido un botón para conectar de forma local: Acceder sin conexión.
La segunda novedad importante es que las notas permiten más de 2048 caracteres. Por ahora no está accesible a todo el mundo, lo siento, solo para los que hayan hecho donativos de 25€ o más. Pero no te preocupes, las notas se pueden seguir guardando aunque no guarde más de 2048 caracteres. En realidad, la aplicación usa dos tablas de notas: Notas y NotasMax. En la primera (Notas) usa un campo (Texto) de tipo nchar(2048), lo iba a cambiar a nchar(4000) que es el máximo permitido para nchar, pero para ello tenía que eliminar todos los datos que ya había (recrear la tabla) y… pues como que no era plan. Así que, he creado la segunda tabla (NotasMax) en la que el campo Texto es de nvarchar(Max), es decir, con capacidad de 2GB máximo que viene a ser de 1GB de caracteres. He probado el rendimiento tanto en Android como en Windows y va bien.
Como te he dicho antes, esa otra tabla solo está accesible si has donado 25€ o más. Si no es así, no puedes seleccionar cuál de las dos tablas usar y por tanto, usará la tabla normal de 2048 caracteres máximo, que creo que para notas normales es más que suficiente. La tabla que estás usando se muestra en la barra de estatus (abajo). Si usas las notas locales, la capacidad será la que da SQLite, que la verdad no sé cuál es. Sigue este enlace si quieres leer sobre el tema (aunque a mí no me queda claro cuántos caracteres se puede tener en un campo de texto).
Otros de los cambios, que serían más bien estéticos, es el coloreado de los textos y demás. Lo he probado con el tema claro y oscuro de mi móvil Android y va bien. En el emulador siempre van bien los dos tipos de temas, pero cuando la uso desde el móvil «de verdad» no siempre se muestran todos los textos. En Windows también va bien con el tema oscuro, aunque en realidad solo afecta a los campos de edición, el resto se muestra igual con los dos tipos de temas.
Con la versión 2.1.0.5 ya está solucionado lo de los Placeholder en Android (en iOS y UWP no era problema).
Aunque en Android el texto de ayuda en los campos sigue sin mostrarse cuando se usa el tema oscuro, es decir lo que se indica en Placeholder. Algún día espero poder solucionarlo. 🙂
La configuración la guardo ahora en un fichero de texto interno (en Environment.SpecialFolder.LocalApplicationData) ya que al guardarlo como hasta ahora en Application.Current.Properties, no siempre recuperaba esos valores… Lo mismo es por fallo mío, pero… uno de mis dichos es: Si las cosas no siempre funcionan igual, intenta usar lo que siempre debería funcionar. Por tanto, si has estado usando la versión anterior, puede que los valores de la configuración no te los lea cuando abras por primera vez esta nueva versión.
Cosas diferentes en la app de Android de la de UWP
Aunque no son funcionales, hay un par de cambios entre las app de Android y la de Windows (UWP), y es que en la de Windows (en escritorio que es como la utilizo) la flechita de ir atrás es muy pequeña, así que… he añadido botones para ir atrás que en la aplicación de Android (u otra que no sea de UWP) no se muestran. Esos botones solo sirven para ir a la página anterior, por tanto, no son realmente funcionales si no, más bien estéticos.
Respecto a esto, el botón de añadir nueva nota, en Android siempre se mostraba (+Nota), pero en UWP se mostraba el menú ese de tres puntitos a la derecha y quedaba como oculto esa posibilidad de agregar una nueva nota, así que… he optado por poner un botón bien visible para que quede claro si se quiere añadir una nueva nota qué es lo que hay que hacer.
Y creo que esto es todo. Ahora te pondré un par de capturas tanto de la app de Android (en dispositivo real) como de UWP en la versión escritorio.
Descargas de las aplicaciones
Comentarte que a día de hoy 27 de mayo de 2021, la aplicación de UWP en Mocrosoft Store aún no está disponible, ya que me la rechazan porque el acceso a la política de privacidad no se muestra de forma correcta. Y esto es porque al acceder a este blog que aún no tiene el certificado de seguridad para usar HTTPS, pues… eso… dicen que nones. Cuando esté disponbible pondré el enlace a la tienda. Cambié la url de la política de privacidad y la publiqué… o eso pensé, ya que en realidad estaba aún con la advertencia… así que… esta mañana (7 de junio 2021) le di a publicar en la MS Store y ya está disponible.
Como podrás ver en las capturas (figuras 3 y 6) he puesto un botón por si quieres Hacer un donativo con PayPal que te llevará a la misma página que el enlace anterior. Ese donativo figurará como que es para gsNotas y por tanto te servirá para ir acumulando y acceder a las características de los donadores. 😉 Ya sabes que todo esto es gratis y aunque le dedico bastante tiempo no es que quiera cobrar por ese tiempo… pero ya sabes que de algo hay que vivir… pagar la comida, el alquiler de la casa, los impuestos, la conexión a Internet, etc. Así que… si te sientes generoso y quieres (y puedes hacerlo), ahí está el botón de hacer donativos. Imagina que me quieres invitar a un café o a una chela… pues… ¡ya sabes qué hacer! 😉
Capturas
De Android con el Placeholder solucionado en v2.1.0.5. El texto en gris: Escribe aquí tu comentario antes no se veía cuando estaba seleccionado el terma oscuro. Que aunque en la captura no lo parezca, está usando el tema oscuro.
Figura 9. En Android (tema oscuro aunque no lo parezca) ya se ve el texto de los Placeholders.
De iPhone (iOS)
Figura 8. Captura de la pantalla de inicio en un iPhone 7 Plus.
De Windows (UWP) Escritorio
Figura 1. La página de inicio en Windows (UWP Desktop).Figura 2. La página de acceso (Login) en Windows UWP.Figura 3. Las opciones de configuración en UWP. Puedes ver el botón Volver que no está en Android.
De Android (dispositivo Pixel 4a)
Figura 4. La página de inicio en dispositivo Android (Pixel 4a).Figura 5. La página de Otras opcione en dispositivo Android (Pixel 4a).Figura 6. La página de configuración en dispositivo Android (Pixel 4a).Figura 7. La página de acceso (Login) en dispositivo Android (Pixel 4a).
