240 - Xamarin (8) - Escribir QR

Continuemos con Xamarin, como comente el objetivo de esta serie de post es trabajar en la interfaz de usuario, para generar una mejor experiencia.

Hoy vamos a revisar como generar un QR en nuestro celular, esto es muy útil sobre todo en nuestro dias por que la cantidad de aplicaciones que generan un QR se ha incrementado día a día.

Bueno pues ¿Que debemos hacer?

1. Agreguemos las referencias

2. Inicialicemos la dll en cada uno de los dispositivos.
2.1 Para el caso de android en el archivo MainActivity.cs debemos agregar lo siguiente:

Vamos a agregar en OnCreate la linea que se encuentra resaltada

ZXing.Net.Mobile.Forms.Android.Platform.Init();

2.2 Para el caso de IOS, en el archivo AppDelegate.cs

Agregaremos en FinishedLaunching la siguiente linea

ZXing.Net.Mobile.Forms.IOs.Platform.Init();

3. Agreguemos un nombre a nuestro stacklayout para poder agregar un nuevo control desde código

 <StackLayout x:Name="stacalta" HorizontalOptions="Center" VerticalOptions="Center">

        </StackLayout>

4. Ahora si a generar nuestro QR

            ZXingBarcodeImageView barcode = new ZXingBarcodeImageView

            {

                HorizontalOptions = LayoutOptions.FillAndExpand,

                VerticalOptions = LayoutOptions.FillAndExpand,

                BarcodeFormat = ZXing.BarcodeFormat.QR_CODE,

                BarcodeValue = "hola",

        };

            barcode.BarcodeOptions.Width = 700;

            barcode.BarcodeOptions.Height = 700;

            barcode.BarcodeOptions.Margin = 10;

            stacalta.Children.Add(barcode);

¿Y que hace este código?

 ZXingBarcodeImageView barcode = new ZXingBarcodeImageView

            {

                HorizontalOptions = LayoutOptions.FillAndExpand,

                VerticalOptions = LayoutOptions.FillAndExpand,

                BarcodeFormat = ZXing.BarcodeFormat.QR_CODE,

                BarcodeValue = "hola",

        };

            barcode.BarcodeOptions.Width = 700;

            barcode.BarcodeOptions.Height = 700;

            barcode.BarcodeOptions.Margin = 10;

Establece las características que tendrá el control que estamos generando.

La propiedad que dice cual es el valor a generar es BarcodeValue.

por ultimo agregamos el control a nuestra interfaz.

stacalta.Children.Add(barcode);

Felices lineas

239 - Xamarin (7) - Switch

Uno de los controles de mas uso en una aplicación móvil es el swich, este control nos permite hacer una selección entre un conjunto de opciones, su forma mas sencilla de invocación es:

Esto nos genera algo como esto

Sin embargo esto muchas veces no nos sirve, ya que nos falta el texto que nos indique el objetivo de este control.

Esto lo haremos con el siguiente código:

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>

                        <Label Text="Nombre Completo"
                                   FontSize="18"
                               Grid.Row="0" Grid.Column="0"
                                   TextColor="White"/>
                        <Switch Grid.Row="0" Grid.Column="1"
                                VerticalOptions="Center"
                                OnColor="LightBlue"
                                ThumbColor="LightGray" />
                    </Grid> 

Al ver esto en el emulador

Con esto podemos empezar a dar formato al control.

Felices líneas

238 - Xamarin (6) - Los iconos no se muestran en Android tabBar

El problema es el siguiente al momento de ejecutar la aplicación en el emulador y con el tabBar en la parte inferior, los iconos no se muestran.

Pero al verlos desde la pantalla de diseño de visual studio estos si se ven.

¿A que se debe esto?

Android esta presentando problemas al momento de cambiar el tamaño del icono al correcto, existen 2 formas de solucionarlo, una es crear un custom render, no lo recomiendo ya que al cambiar la versión del SDK este método puede ocasionar problemas.

El segundo es emplear iconos de tamaño estándar.

Empleen un icono de 512 x 512 y con eso problema resuelto.

Otra cosa, la imagen que empleen debe tener color transparente y ser formato PNG, de lo contrario no se visualizara

Al ejecutarlo

Felices lineas