Extendiendo controles usando Gesture Recognizers (parte 2) – Agregando una opción de mostrar contraseña

Screen Shot 2019-02-23 at 1.24.38 PM
Share on facebook
Share on twitter
Share on linkedin

En la entrada anterior vimos el TapGestureRecognizer y vimos algunas ideas de lo que podríamos hacer con él. También hicimos un ejemplo creando un botón de imagen. Hoy vamos a implementar un caso práctico y lo haremos de dos maneras ligeramente diferentes. Una utilizando un comando como respuesta y la otra con un controlador de eventos. Las imágenes fuero tomadas desde aquí.

Es posible que hayas visto aplicaciones que te dan la opción de mostrar los caracteres escritos en el campo de contraseña. Esta es una funcionalidad muy útil para evitar al usuario la molestia de volver a escribirla solo por algún error tipográfico. En este post aprenderás a hacer esta funcionalidad.

El resultado final será algo como lo siguiente

Vamos a comenzar

  • Usando una imagen como elemento visual y respondiendo con un evento

El código

El XAML

 <Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="50" />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Entry Grid.Row="0" Grid.Column="0" IsPassword="true" x:Name="tbxPasswordEntry" Placeholder="Type your password" />
     <Image Source="view" Grid.Row="0" Grid.Column="1" x:Name="btnShowPassword">
         <Image.GestureRecognizers>
             <TapGestureRecognizer 
                         Tapped="ShowPassword"
                         NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>  
    </Image>    
</Grid> 

El evento en el Page

public void ShowPassword(object sender, EventArgs args)
{
    if (tbxPasswordEntry.IsPassword)
    {
        tbxPasswordEntry.IsPassword = false;
        btnShowPassword.Source = "hide";
    }
    else
    {
        tbxPasswordEntry.IsPassword = true;
        btnShowPassword.Source = "view";
    }
}

Explicando el código

En primer lugar, estamos utilizando un diseño de cuadrícula (Grid Layout) para garantizar que los elementos estén alineados horizontalmente. Hemos nombrado el campo de entrada (Entry) como tbxPasswordEntry y la imagen (Image) como btnShowPassword para que podamos hacer referencia a ellos desde el código del evento. La entrada tiene la propiedad IsPassword establecida como true, esto convierte la entrada en un cuadro de contraseña. Agregamos un TapGestureRecognizer a la imagen configurado para lanzar el evento ShowPassword después de que la imagen sea tocada una vez.

En el código del evento se pregunta si tbxPasswordEntry está configurado como campo de contraseña y en consecuencia se modifica y se actualiza la imagen. Al final conseguimos lo siguiente:

  • Usando una etiqueta(Label) como elemento visual y utilizando un comando en respuesta

El XAML

<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Entry Grid.Row="1" Grid.Column="0" IsPassword="{Binding IsPasswordHidden}" Placeholder="Binded field" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding LabelText}" FontAttributes="Bold" TextDecorations="Underline">
        <Image.GestureRecognizers>
            <TapGestureRecognizer 
                Command="{Binding TogglePasswordShowCommand}"
                NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>  
    </Label>
</Grid>

El ViewModel

[AddINotifyPropertyChangedInterface]
public class MainPageViewModel 
{
    public string LabelText { get; set; }
    public bool IsPasswordHidden { get; set; }
    public ICommand TogglePasswordShowCommand { get; set; }

    public MainPageViewModel()
    {
        TogglePasswordShowCommand = new Command(TogglePasswordShowCommandExecute);
        IsPasswordHidden = true;
        LabelText = "show";
    }

    public void TogglePasswordShowCommandExecute() 
    {
        if (IsPasswordHidden)
        {
            IsPasswordHidden = false;
            LabelText = "hide";
        }
        else
        {
            IsPasswordHidden = true;
            LabelText = "show";
        }
    }
}

Explicando el código

Aquí estamos utilizando un enfoque MVVM, donde cada página tiene un ViewModel asignado donde se ejecuta la lógica de negocio.

La interfaz de usuario es más o menos la misma, excepto que no estamos nombrando los controles y estamos usando una etiqueta (Label) en lugar de una imagen como control para lanzar el cambio. Algunas propiedades de los controles están vinculadas (Binded) a campos específicos del ViewModel.

La etiqueta AddINotifyPropertyChangedInterface proviene del paquete de nuget Fody.PropertyChanged. Pon atención al método TogglePasswordShowCommandExecute y nota las similitudes con el método ShowPassword del caso anterior. En resumen, cuando presionamos la etiqueta se llama al método TogglePasswordShowCommandExecute. Esto se obtiene vinculando la propiedad Command del TapGestureRecognizer al campo TogglePasswordShowCommand del ViewModel.

Ten en cuenta que estos son solo ejemplos y probablemente hay más y mejores implementaciones posibles para lograr estos resultados. ¿Te gustaron estos ejemplos? ¿Se te ocurren otras ideas de implementaciones? Mándame un tweet y comencemos una conversación.

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »
Xamarin

Agregando autenticación con huellas digitales en Xamarin Forms

Agregar una autenticación de huella digital para proyectos multiplataforma nunca ha sido tan fácil como con el paquete de NuGet Plugin.Fingerprint. Pero primero… Algunas cosas para aclarar acerca de la autenticación biométrica o por huella digital. Estas son limitaciones de implementación por la tecnología en sí y no están introducidas

Leer más »