Aplicaciones bonitas con Xamarin Forms | Pt. 1

Aplicaciones bonitas con Xamarin Forms

Hace algunos días un developer me escribió y me contaba que Xamarin forms era asombroso que para el las aplicaciones era algo feas en cuanto a la UI, yo le respondí y le dije que si se puede solo que se necesita un poquito más de esfuerzo. Pues en la play store o en cualquiera de las tiendas se engancha mucho mas rápido al futuro usuario de nuestra app si tiene una interfaz atractiva y amigable.

Que necesito para comenzar ?

1) Visual Studio 2015 Community (gratis  o una version superior ) o Visual Studio for MAC.

Vamos a hablar de interfaces bonitas

 

XFParallax by DevsDNA

Super pero que es XFParallax by DevsDNA, pues XFParallax by DevsDNA busca implementar el muy popular efecto efecto Parallax muy famoso en la plataforma ios.

Pero Yhorby que te digo que quiero hacer apps bonitas en Xamarin Forms, calma colega que se puede implementar en Xamarin forms.

Como lo hago?

Pues puedes encontrar un proyecto de ejemplo en su repositorio de Github aquí. 

Con esta librería podemos crear el efecto parallax en las tres plataformas : Android, iOS and Windows – con  Xamarin Forms

Pasamos a explicar como funciona la librería.

1. Primero debemos crear  el codigo responsable para crear  la vista efecto parallax . Creamos un nuevo “ContentView” llamado “ParallaxView”:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DevsDNA.XFParallax.ParallaxView">
  <ContentView.Content>
    <Grid>
      <ContentView x:Name="Header" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"/>
      <ScrollView x:Name="ParentScroll" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ContentView x:Name="Body"/>
      </ScrollView>
    </Grid>
  </ContentView.Content>
</ContentView>

2. EL Code behind para “ParallaxView.xaml.cs” deberia lucir como este :

namespace DevsDNA.XFParallax
{
    using Xamarin.Forms;
 
    public partial class ParallaxView : ContentView
    {
        private double lastScroll = 0;
 
        public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(nameof(HeaderContent), typeof(ContentView), typeof(ParallaxView), coerceValue: HeaderContentCoerceValue);
        public static readonly BindableProperty HeaderScrollSpeedProperty = BindableProperty.Create(nameof(HeaderScrollSpeed), typeof(int), typeof(ParallaxView), 2);
        public static readonly BindableProperty BodyContentProperty = BindableProperty.Create(nameof(BodyContent), typeof(ContentView), typeof(ParallaxView), coerceValue: BodyContentCoerceValue);
        public static readonly BindableProperty BodyMarginProperty = BindableProperty.Create(nameof(BodyMargin), typeof(Thickness), typeof(ParallaxView), new Thickness(0), coerceValue: BodyMarginCoerceValue);
 
        public ParallaxView()
        {
            InitializeComponent();
            ParentScroll.Scrolled += ParentScroll_Scrolled;
        }
 
        public ContentView HeaderContent
        {
            get { return (ContentView)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
 
        public int HeaderScrollSpeed
        {
            get { return (int)GetValue(HeaderScrollSpeedProperty); }
            set { SetValue(HeaderScrollSpeedProperty, value); }
        }
 
        public ContentView BodyContent
        {
            get { return (ContentView)GetValue(BodyContentProperty); }
            set { SetValue(BodyContentProperty, value); }
        }
 
        public Thickness BodyMargin
        {
            get { return (Thickness)GetValue(BodyMarginProperty); }
            set { SetValue(BodyMarginProperty, value); }
        }
        /// 
        <summary>
        /// Important to call this method from Page OnDissapearing to remove event handlers and avoid memory leaks.
        /// </summary>
 
        public void DestroyParallaxView()
        {
            ParentScroll.Scrolled -= ParentScroll_Scrolled;
        }
 
        private static object HeaderContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Header.Content = (ContentView)value;
            }
            return value;
        }
 
        private static object BodyContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Body.Content = (ContentView)value;
 
                if (instance.BodyMargin != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private static object BodyMarginCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is Thickness)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                if (instance.Body != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private void ParentScroll_Scrolled(object sender, ScrolledEventArgs e)
        {
            if (lastScroll == 0)
                lastScroll = e.ScrollY;
            else
            {
                CalculateHeaderTranslation(e);
            }
        }
 
        private void CalculateHeaderTranslation(ScrolledEventArgs e)
        {
            double translation = 0;
 
            if (lastScroll < e.ScrollY) { translation = 0 - ((e.ScrollY / HeaderScrollSpeed)); if (translation > 0)
                    translation = 0;
            }
            else
            {
                translation = 0 + ((e.ScrollY / HeaderScrollSpeed));
                if (translation > 0)
                    translation = 0;
            }
            Header.TranslateTo(Header.TranslationX, translation);
            lastScroll = e.ScrollY;
        }
    }
}

3. Ahora podemos usar Parallax en una de nuestras  Content Pages, como se muestra a  continuación:

<?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:local="clr-namespace:DevsDNA.XFParallax.Sample" xmlns:parallax="clr-namespace:DevsDNA.XFParallax;assembly=DevsDNA.XFParallax" x:Class="DevsDNA.XFParallax.Sample.MainPage">
 
  <parallax:ParallaxView x:Name="MainParallax" BodyMargin="0,180,0,0" HeaderScrollSpeed="4">
    <parallax:ParallaxView.HeaderContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue">
        <Image Source="https://www.windowscentral.com/sites/wpcentral.com/files/styles/large/public/field/image/2016/02/microsoft-xamirin.jpg?itok=M_JRL3qE" Aspect="AspectFill" VerticalOptions="Start"/>
      </ContentView>
    </parallax:ParallaxView.HeaderContent> 
    <parallax:ParallaxView.BodyContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="500">
        <ContentView.Margin>
          <!-- need to add specific margin to Windows to show header.-->
          <OnPlatform x:TypeArguments="Thickness" WinPhone="0,180,0,0"/>
        </ContentView.Margin>
        <Grid BackgroundColor="White">
                    <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                </Grid.RowDefinitions>
                     
                <Image HorizontalOptions="Center" VerticalOptions="Start" Margin="0,-50,0,0" HeightRequest="100" WidthRequest="100" Grid.Row="0" Source="http://students.stmaryschs.org.uk/Y9_Scratch_To_VB/images/VS_Logo.png" Aspect="AspectFit"/>
                <Label Text="Xamarin Parallax Effect!" Grid.Row="1" HorizontalOptions="Center"/>
                     
        </Grid>
      </ContentView>
    </parallax:ParallaxView.BodyContent>
  </parallax:ParallaxView>
 
</ContentPage>

4. Ahora en el  code behind invocamos “DestroyParallaxView” en el método llamado  MainParallax en el metodo “OnDisappearing” :

public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
      }
 
      protected override void OnDisappearing()
      {
          base.OnDisappearing();
          // To avoid memory leak:
          MainParallax.DestroyParallaxView();
      }
  }

Y así es como tenemos el hermoso efecto Parrallax en nuestra aplicacion Xamarin Forms.

Quieres verlo funcionando ?

Ejecuta tu codigo y dejame saber que tal !!

Cualquier duda o comentario puedes escribirme o dejar un comentario en la entrada !

Comments

Dejar una contestacion

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *