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

235. Xamarin (5) - Dos controles en la misma linea

Seguimos creando interfaces con Xamarin, algo que es muy necesario en muchas ocasiones es el poner varios controles en la misma línea.

¿Cómo hacemos esto?

La forma mas fácil es ver un ejemplo

 <StackLayout Orientation="Horizontal" >
                            <CheckBox x:Name="checkBox" />
                            <Label
                            Margin="0,10,0,0"
                            Text="Acepto los "
                            HorizontalTextAlignment="Center"/>
                            <Label
                            Margin="0,10,0,0"
                            Text=" terminos y condiciones "
                            TextColor="blue"
                            HorizontalTextAlignment="Center"/>
                           
                        </StackLayout>

¿Qué hace este código?

<StackLayout Orientation="Horizontal" >

Indica que vamos a colocar todos los controles en forma horizontal

                            <CheckBox x:Name="checkBox" />
                            <Label
                            Margin="0,10,0,0"
                            Text="Acepto los "
                            HorizontalTextAlignment="Center"/>
                            <Label
                            Margin="0,10,0,0"
                            Text=" terminos y condiciones "
                            TextColor="blue"
                            HorizontalTextAlignment="Center"/>

Son todos los controles uno tras otro, tal y como si estuviéramos trabajando en forma vertical

Veamos el ejemplo al ejecutar el código

El Alíen de Mexico controla el mundo

234. Xamarin (4) - TabBar

Una herramienta muy útil para navegar en nuestra aplicación es por medio de una TabbedPage, esta nos permite tener un solo control, que administre a donde va a ir nuestra aplicación.

Ahora bien por default el tabPage, en IOS lo coloca en la parte inferior, pero en Android en la parte superior, lo cual no es deseable, ya que por lo regular este tipo de controles siempre están en la parte inferior, por lo que el objetivo de este post será crear el tabbedPage y colocarlo en la parte inferior de la aplicación para ambos sistemas operativos moviles.

¿Cómo se hace esto?

Primero creamos un contentPage (XAML), en la que el contenedor será un TabbedPage

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:local="clr-namespace:AudioLetras"
             x:Class="AudioLetras.MenuPrincipal">
    <local:Hogar IconImageSource="home"></local:Hogar>
    <local:Buscar IconImageSource="search"></local:Buscar>
    <local:Audio IconImageSource="play"></local:Audio>
</TabbedPage>

En este código vamos a destacar varias partes.

1. Es necesario crear un espacio de nombres que haga referencia al proyecto sobre el que estamos trabajando.

xmlns:local="clr-namespace:AudioLetras"

2. Cada una de las pestañas del tabbedPage las vamos a agregar de esta forma

    <local:Hogar IconImageSource="home"></local:Hogar>
    <local:Buscar IconImageSource="search"></local:Buscar>
    <local:Audio IconImageSource="play"></local:Audio>

Ahora vamos a escribir el código del backend

    public partial class MenuPrincipal : Xamarin.Forms.TabbedPage
    {
        public MenuPrincipal()
        {
            InitializeComponent();
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        }
    }

¿Que vemos aquí?

1. Tenemos que cambiar la forma de la cual estamos heredando las características para el trabajo en la misma

public partial class MenuPrincipal : Xamarin.Forms.TabbedPage

2. Vamos a colocar en Android explícitamente la barra en la parte inferior

On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

y la ultima fase, vamos a crear formularios por cada pagina que vamos a tener en este tabbedPage

Al ejecutar nuestro código

Felices Lineas

225. Xamarin Toolbar (II)

Continuemos con la construcción de nuestra barra de acciones, esta vez es momento de agregar botones (para eso queremos el menu) y acciones a estos.

El proceso es realmente sencillo:

1. Agreguemos un nuevo recurso, de tipo xml en la carpeta llamada menu

2. Ahora establezcamos que es lo que contendrá el menu, en mi caso yo coloque lo siguiente:


<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/Informacion"
android:icon="@drawable/ic_launcher"
app:showAsAction="ifRoom"
android:title="Info"/>

<item
android:id="@+id/menuof1"
app:showAsAction="never"
android:title="Menu 1"/>

<item
android:id="@+id/menuof2"
app:showAsAction="never"
android:title="Menu 2"/>

    <item
android:id="@+id/menuof3"
app:showAsAction="never"
android:title="Menu 3"/>

</menu>

¿Que hace?

<item
android:id="@+id/Informacion"
android:icon="@drawable/ic_launcher"
app:showAsAction="ifRoom"
android:title="Info"/>

Establece un icono, de acceso a una acción, aquí es muy importante el indicar la propiedad que se encuentra en negrita, eso nos permite que siempre se muestre en la barra.

<item
android:id="@+id/menuof1"
app:showAsAction="never"
android:title="Menu 1"/>

<item
android:id="@+id/menuof2"
app:showAsAction="never"
android:title="Menu 2"/>

    <item
android:id="@+id/menuof3"
app:showAsAction="never"
android:title="Menu 3"/>

Crea un conjunto de menus, dentro del menu con los tres puntos.

3. Ahora es necesario que este menu se muestre dentro del layout, para ello vamos a agregar a nuestro activity el siguiente código:

        public override bool OnCreateOptionsMenu(IMenu menu)
        {
            MenuInflater.Inflate(Resource.Menu.menutool, menu);
            return base.OnCreateOptionsMenu(menu);
        }

4. Por ultimo tenemos que asignar una acción a cada uno de los botones

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            string textToShow;

            if(item.ItemId == Resource.Id.Informacion)
            {
                textToShow = "Informacion";
            }
            else
            {
                textToShow = "Menu XX";
            }

            Android.Widget.Toast.MakeText(this, item.TitleFormatted + ":" + textToShow,
                Android.Widget.ToastLength.Long).Show();

            return base.OnOptionsItemSelected(item);
        }
   
Al probar en el emulador

Felices lineas

El Alien de México

224. Xamarin ToolBar (I)

Haremos un breve tutorial de Xamarin para Android, la mision poner una barra de actividades en la parte superior, otra en la parte inferior, y que estas puedan activar el menu.

Para hacer eso, debemos hacer lo siguiente:

Primero vamos a sustituir la barra de actividades, por una que tenga mucho mayor funcionalidad para esto es necesario que instalemos el siguiente paquete de nuget.

Vamos a agregar un nuevo estilo

Abrimos el archivo, y agregamos lo siguiente:

    <style name="AppBarra" parent="Theme.AppCompat">

        <item name="windowNoTitle">true</item>

        <item name="windowActionBar">false</item>

        <item name="colorPrimary">#F6F6AA</item>

    </style>

Con esto vamos a quitar el Action Bar predeterminado, y podremos colocar el nuestro,

Ahora vamos a crear nuestro layout

Y agregaremos lo siguiente

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</LinearLayout>

Con esto estamos agregando el nuevo toolbar

Ahora creemos el Activity que le dará vida a nuestro toolbar

Agregemos el siguiente código:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;

namespace MenuTool
{
    [Activity(Label = "Menuly", MainLauncher = true, Theme = "@style/AppBarra")]
    public class Menuly : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Menuly);

            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);
            SupportActionBar.Title = "Titulo!!!";

            // Create your application here
        }
    }
}

El código, aplica un tema, y busca la nueva toolbar, para poder comenzar a manipularla, si ejecutamos nuestro código tendremos lo siguiente:

El Alien de México

214. Xamarin Error 'Resource.Id' does not contain a definition for 'id'

Este error es muy común que ocurra al estar trabajando con Xamarin en Visual Studio, tanto en su versión de MAC como en su versión de PC, este error se puede dar por 2 causas:

1. El archivo Resource.designer.cs no se esta regenerando correctamente, en este caso el proceso de solución es:

Respaldamos el archivo.
Borramos su contenido

2. En caso de que el problema continúe, y el control que estamos buscando si aparezca en el archivo, el problema es que no se esta actualizando dicho archivo en la carpeta obj para ello la solución es:

Respaldamos las carpetas bin y obj
Borramos ambas carpetas


En muchas ocasiones limpiar la solución basta, pero en algunos casos visual studio no borra todos los archivos de bin y obj al limpiar la solución, es por esto por lo que los errores continúan.


Felices lineas

65. Microsoft adquiere Xamarin

El ecosistema móvil de Microsoft Windows Phone, es muy estable sobre todo para la instalación de múltiples aplicaciones sin que se requiera un incremento de hardware, y en estos años que tiene ha demostrado que terminales de las primeras generaciones, sin embargo las pocas aplicaciones con las que cuenta el sistema, así como la poca publicidad por parte de los operadores, ha hecho que día a día, la cuota del mercado baje.

En lo personal me parece un muy buen sistema operativo, rápido, eficiente, y con grandes posibilidades, ademas de que teóricamente cuenta con todos aquellos que desarrollamos .net para poder desarrollar aplicaciones en el.

Una base muy grande de desarrolladores, sin embargo no todos desarrollamos para el.

Xamarin es un proyecto muy ambicioso, basado en una premisa, desarrollar una vez y distribuirlo a los 3 sistemas operativos móviles principales, una gran ventaja para todos los que somos desarrolladores de .net, por que ahora no necesitamos aprender un nuevo lenguaje para desarrollar aplicaciones para móviles.

La relación entre Xamarin y Microsoft siempre ha sido cercana, prueba de ello es que Xamarin ya se encuentra integrado a Visual Studio 2015, bueno se ha dado un paso mas a esta relación, Microsoft ha anunciado oficialmente la adquisición de Xamarin.

https://blog.xamarin.com/a-xamarin-microsoft-future/

¿Que representa esto para nosotros los desarrolladores? que una herramienta muy importante para el desarrollo movil, sera administrada directamente por los creadores de .net, permitiéndonos crear aplicaciones multiplataforma cada vez mas complejas eliminando la curva de aprendizaje para los desarrolladores de .net, vuelve mas atractiva la oferta del desarrollo de Windows Phone, ya que al final es el lenguaje nativo, que nos servirá para crear aplicaciones en las 3 plataformas, algo como lo que ocurre con UNITY y loa juegos.

Debemos estar pendientes de Build 2016 ya que ahi tendremos mas anuncios, y de la evolución anunciada por Xamarin en abril de este año.



No existen códigos absolutos, todos son mejorables.
Carlos