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

233. Xamarin (3) - Splash

Existen varias formas de crear una pantalla de splash, la que te voy a enseñar es una de las mas sencillas.

Antes que nada debemos agregar a nuestro proyecto una nueva pagina de contenido.

Vamos a crear una imagen, la que usaremos como pantalla de splash, esta imagen la vamos a agregar en el proyecto de Android y en el proyecto de IOS como se muestra a continuación.

Ahora codifiquemos un poco.

En el nuevo formulario vamos a establecer como fondo de pantalla la imagen que estamos usando como splash

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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"
             x:Class="DigitalID.Inicio"
             >
    <ContentPage.Content>
        <StackLayout>
            <Image x:Name="ImagenSplash" Source="d2" Aspect="Fill"  />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

La imagen se debe poner en un control de imagen para evitar que se distorsione.

Y veamos ahora el código en C#

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace DigitalID
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Inicio : ContentPage
    {
        public Inicio()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }
        protected override async void OnAppearing()
        {
            base.OnAppearing();
            await ImagenSplash.ScaleTo(1, 2500);
            await ImagenSplash.ScaleTo(300, 2500, Easing.Linear);
            Application.Current.MainPage = new NavigationPage(new MainPage());
        }
    }
}


Expliquemos un poco que hace el código.

1. Eliminamos el Navigation Bar para que la imagen ocupe toda la pantalla.

        public Inicio()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }

2. Ejecutamos una pequeña animación que también nos da los tiempos de carga de la pantalla y redireccionamos a la pantalla principal.

protected override async void OnAppearing()
        {
            base.OnAppearing();

            await ImagenSplash.ScaleTo(1, 2500);
            await ImagenSplash.ScaleTo(300, 2500, Easing.Linear);
            Application.Current.MainPage = new NavigationPage(new MainPage());
        }

Ahora solo nos falta un punto, hacer que esta sea nuestra primer pantalla en el proyecto, para esto en el archivo app.xaml.cs establecemos la nueva forma de inicio

        public App()
        {
            InitializeComponent();
            //MainPage = new MainPage();
            MainPage = new NavigationPage(new Inicio());
        }


Todo esto es un plan del Alien de Mexico, Felices lineas

232. Xamarin (2) - Button

El principal objetivo de este tutorial, es la creación de la interfaz de usuario, ya que esta es muy importante en las aplicaciones móviles, el usuario se debe enamorar de la aplicación, por esto mismo cuando hablamos de las propiedades de los controles, hablaremos principalmente de aquellas que repercutan directamente en la interfaz de usuario.

Hoy es el turno de otro elemento básico de para la construcción de la interfaz de usuario, el botón (Button)

La forma mas sencilla de ponerlo

<Button></Button>

Agreguemos un texto

<Button Text="Hola"></Button>

Hagamos que el botón tenga bordes redondos

<Button Text="Hola" CornerRadius="20"></Button>

Cambiemos el color del boton

        <Button Text="Hola" CornerRadius="20"
                BackgroundColor="Yellow"></Button>

Cambiemos el color del texto

       <Button Text="Hola" CornerRadius="20"
                BackgroundColor="Yellow"
                TextColor="Red"></Button>

Agreguemos un margen

        <Button Text="Hola" CornerRadius="20"
                BackgroundColor="Yellow"
                TextColor="Red"
                Margin="15"></Button>

        <Button Text="Hola" CornerRadius="20"
                BackgroundColor="Yellow"
                TextColor="Red"
                Margin="15,7,14,22"></Button>

Felices lineas

231. Xamarin (I) - Entry

Hola nuevamente, el mundo móvil es un mundo amplio, si bien 2 ecosistemas dominan el mercado, todo mundo tiene un móvil, el mundo móvil ha traído, el computo a la palma de nuestra mano, además de que la información que necesitamos la tenemos justo en el momento en el que la necesitamos.

El objetivo de esta serie de post, es el poder revisar lo que es la interfaz grafica de Xamarin, para así poder brindar una mejor experiencia hacia el usuario.

Una mejor experiencia hacia el usuario, evita que este se frustre y permanezca en nuestra aplicación.

Entry 

¿Para que nos sirve?

Nos permite capturar una entrada del usuario

Ejemplo

<Entry></Entry>

Si esto lo vemos en el móvil vemos algo así:

Placeholder

Permite poder una etiqueta en gris para indicar que información se va a poner en el celular

ejemplo

<Entry Placeholder="Dato"/>

Es posible cambiar el color con el que esta etiqueta aparece para esto hacemos lo siguiente

<Entry Placeholder="Dato" PlaceholderColor="Red"/>

<Entry Text="Texto inicial"/>

Permite escribir un texto por default

<Entry Text="Texto inicial"  IsReadOnly="true"/>
Solo lectura

Longitud maxima
<Entry Text="Texto inicial" MaxLength="10"/>

<Entry Text="Texto inicial" MaxLength="10" CharacterSpacing="10"/>
Incrementa el espacio

<Entry Text="Texto inicial" MaxLength="10" CharacterSpacing="10" IsPassword="true"/>
Password

También es posible que se abra un tipo de teclado especifico

Chat – para platicas.
Default – teclado por default.
Email – direcciones de correos.
Numeric – numero.
Plain – texto plano.
Telephone – numero telefonico.
Text – texto.
Url – direcciones de internet.

Felices lineas