Net latino
- 1. Mejorando nuestras habilidades de UI en Xamarin Forms
- 2. Leomaris Reyes Leomaris Reyes ● Ingeniera de software ● Microsoft MVP ● Platzi Master Coach ● Creadora y escritora del blog de Xamarin AskXammy.com ● CEO & Founder de Stemelle. ● Xamarin Certified Mobile Developer
- 3. Algunos mitos del diseño en Xamarin Forms ❌ Xamarin es solo para prototipos ❌ Sino tenemos presupuesto para comprar controles de terceros no podemos hacer un UIs bonitos. ❌ No podemos hacer diseños agradables con Xamarin Forms.
- 4. Buen uso de layouts: Utiliza solo los layouts necesarios1. <StackLayout> <Button BackgroundColor="DarkOrange" /> </StackLayout> <StackLayout> <Button BackgroundColor="DarkOrange" /> </StackLayout> <StackLayout> <Button BackgroundColor="DarkOrange" /> </StackLayout> Escenario 😐 Escenario 😍 <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto”/> <RowDefinition Height="Auto”/> <RowDefinition Height="Auto”/> </Grid.RowDefinitions> <Button Grid.Row="0" BackgroundColor="DarkOrange"/> <Button Grid.Row="1" BackgroundColor="DarkOrange"/> <Button Grid.Row="2" BackgroundColor="DarkOrange"/> </Grid> 1 2 3 1
- 5. Nuevos Grid 😍 Grid tradicional Nueva estructura del Grid 😍 <Grid RowDefinitions=”Auto,Auto,Auto” ColumnDefinitions=”*,*”> <Button Grid.Row="0" Grid.Column="0" BackgroundColor="DarkOrange"/> <Button Grid.Row="1" Grid.Column="1" BackgroundColor="DarkOrange"/> <Button Grid.Row="2" Grid.Column="0" BackgroundColor="DarkOrange"/> </Grid> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto”/> <RowDefinition Height="Auto”/> <RowDefinition Height="Auto”/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*”/> <ColumnDefinition Width="*”/> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" BackgroundColor="DarkOrange"/> <Button Grid.Row="1" Grid.Column="1" BackgroundColor="DarkOrange"/> <Button Grid.Row="2" Grid.Column="0" BackgroundColor="DarkOrange"/> </Grid>
- 6. Distancia entre un elemento y sus elementos adyacentes, se utiliza para controlar la posición de del elemento y la de de sus vecinos. ______________________________ <Button BackgroundColor="DarkOrange" Margin="0,80,0,0" /> Margin ✔ Padding ✔ Distancia entre un elemento y sus elementos secundarios, se usa para separar el espacio entre el y su propio contenido. ________________________________________________ <Button BackgroundColor="DarkOrange" Padding="0,80,0,0" /> Margin vs Padding: No los confundas please! 😔2.
- 7. Sin el uso de estilo tendremos que repetir las mismas propiedades de cada elemento tantas veces lo declaremos.. ____________________________________________ <Button Text ="Click aquí" BackgroundColor ="DarkOrange" Padding = "0,80,0,0" TextColor ="White" FontAttributes ="Bold" /> Sin estilos Usando estilo Implementando estilos solo tenemos que agregar las propiedades una vez y dicho estilo podrá ser llamado desde los elementos que necesitemos!. _____________________________________________ <Button Text="Click aquí" Style="{StaticResource MainButtons}" /> _____________________________________________ <Style x:Key="MainButtons" TargetType="Button"> <Setter Property="BackgroundColor" Value="DarkOrange"/> <Setter Property="Padding" Value="0,80,0,0"/> <Setter Property="TextColor” Value="White" /> <Setter Property="FontAttributes" Value="Bold" /> </Style> Utiliza estilos: Al utilizarlos tu código se mantiene más limpio y organizado! 3.
- 8. <StackLayout> <Button BackgroundColor="#FF8008" /> <Button BackgroundColor="#FF8008" /> <Button BackgroundColor="FF8008" /> </StackLayout> Colores directos Colores agregados en el Application.Resource Crea tu paleta de colores en el Application.Resource: Así mantienes los colores de tu App centralizados!4. <StackLayout> <Button BackgroundColor="{StaticResource HeaderColor}" /> <Button BackgroundColor="{StaticResource HeaderColor}" /> <Button BackgroundColor="{StaticResource HeaderColor}" /> </StackLayout> _____________________________________________ Application.Resource: <Color x:Key="HeaderColor">#FF8008</Color>
- 9. Es de mucha ayuda poder replicar aplicaciones, ya que gracias a ellas vamos desarrollando y reforzando habilidades de reproducción de UI, tanto en el análisis de los componentes a utilizar como en el XAML. ______________________________________________________________________________________ __ Buscar aplicaciones que puedas replicar!5.
- 10. Antes de empezar, dividir en bloques nuestro diseño nos puede ayudar a tener una idea más precisa de los puntos que tendremos que realizar el XAML así como también el orden de prioridad que tendremos al desarrollarlos pudiéndose ahorrar tiempo a la hora de escribir código. ________________________________________________________________________ Analiza el diseño y divide en bloques para que tengas claro el flujo a desarrollar en XAML6.
- 11. Prueba tus interfaces en diferentes dispositivos, plataformas y orientaciones7.
- 12. Colores directos Como buscar la imagen correcta en Android Agrega las imágenes en sus dimensiones correctas8.
- 13. Sin ScrollView Con ScrollView ✔ No todos los dispositivos tienen la misma dimensión, utiliza ScrollView, así el usuario no se queda con un diseño a medias.9. ❌ Pantalla 1 Pantalla 2 Con el ScrollView se visualizan:
- 14. Design time data para datos de pruebas: Así puedes mostrar data de prueba sin que tu data real se vea afectada y por tanto también tu tiempo de desarrollo. 10.
- 15. <StackLayout Orientation="Horizontal"> <Label Text="Bienvenid@s" FontSize="30" TextColor="Fuchsia" /> <Label Text="Welcome" FontSize="28" TextColor="Blue" /> <Label Text="Bienvenue" FontSize="20" /> </StackLayout> Sin FormattedText Con FormattedText <Label> <Label.FormattedText> <FormattedString> <Span Text="Bienvenid@s" FontSize=30" ForegroundColor="Fuchsia" /> <Span Text="Welcome" FontSize="28" ForegroundColor="Blue" /> <Span Text="Bienvenue" FontSize="20" /> </FormattedString> </Label.FormattedText> </Label> Utiliza FormattedText11.
- 16. <StackLayout Padding="0,0,20,0"> <ImageButton Source="{Binding Picture}" HorizontalOptions="Start" WidthRequest="40" HeightRequest="40""/> <Button Text="{Binding Quantity}" TextColor="#4D4B4B" CornerRadius="10" /> </StackLayout> Sin BindableLayout Con BindableLayout <StackLayout Orientation="Horizontal" BindableLayout.ItemsSource="{Binding fruitBar}"> <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout Padding="0,0,20,0"> <ImageButton Source="{Binding Picture}" HorizontalOptions="Start" WidthRequest="40" HeightRequest="40""/> <Button Text="{Binding Quantity}" TextColor="#4D4B4B" CornerRadius="10" /> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> Utiliza BindableLayout12. El deberás repetir el StackLayout tantas veces necesites 1 2 3 n No necesitas repetirlo!
- 17. xmlns:ios="clr-namespace:Xamarin.Forms. PlatformConfiguration.iOSSpecific;assembly= Xamarin.Forms.Core" ios:Page.UseSafeArea="true" Ajustando nuestro TitleBar en IOS13. Utilizando el área segura
- 18. <Label Text= "<Hello people!!!>" /> Agregando texto con caracteres especiales14. 🔹 < – Menor que – < 🔹 > – Mayor que – > 🔹 & – Ampersand – & 🔹 “ – Comillas – " 🔹 ‘ – Apóstrofe – '
- 19. <Button WidthRequest ="80" HeightRequest ="80" CornerRadius ="40" VerticalOptions ="Center" HorizontalOptions ="Center" BackgroundColor ="#F77DF9"/> Puedes crear botones circulares!15.
- 20. Mejor manejo de imágenes con FFImageLoading16. ✔ Mejor manejo de la memoria ✔ Efectos especiales extras con Xamarin.FFImageLoading.Transformation
- 21. 📌 Más flexibilidad en tus diseños haciéndolos horizontales y verticales. 📌 Mejor manejo de performance Utiliza CollectionView para tus listas17.
- 22. Uso de Triggers para cambios Visuales18. Triggers de propiedad Triggers de data Triggers de evento
- 24. Mantén siempre informado al usuario20. Diseño de Dribble (Barek Berendt ) Diseño de Dribble (Hega Putra)
- 25. Échale un vistazo a PancakeView y al Canal de Kim Phillpotts
- 26. Recomendaciones