Analizando interfaces de usuario avanzadas con Xamarin.Forms

1. Analizando interfaces de usuario avanzadas con
Xamarin.Forms

2. Visual Studio Technologies MVP
Xamarin MVP
Software Developer at Plain Concepts
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz

3. ¿Qué vamos a ver?
• Pulse Music
• My Trip Countdown
• Netflix
• Walktrough
• Movies

4. Las claves

5. Xamarin.Forms- Cross Platform UI
• Interfaz de usuario nativa
compartida
• Lógica compartida
Shared C# Logic
Shared UI Code

6. $ dotnet new classlib -o My.Class.Library
.NET Standard
.NET Core
.NET Framework
Xamarin
~
~
Especificación HTML
Browsers

7. .NET Standard en contexto
.NET Standard

9. Xamarin.Forms utiliza
abstracciones para definir los
elementos. Posteriormente se
transforma cada abstracción
ofreciendo una implementación y
mecanismos en cada plataforma.
Abstracciones

10. Si no nos gusta como se renderiza un control en una plataforma,
podemos cambiarlo
Element describe la apariencia
del control
Button
Text
TextColor
…
Renderer crea una visualización
específica para cada plataforma
ButtonRenderer
ButtonRenderer
ButtonRenderer
UIButton
Button
Button
MyButtonRenderer
UIImage
Custom Renderers

11. Siempre tendremos DOS PARTES: El Elemento y el Renderer
Element describe la apariencia
del control
Button
Text
TextColor
…
Renderer crea una visualización
específica para cada plataforma
ButtonRenderer
ButtonRenderer
ButtonRenderer
Button
Button
MyButtonRenderer UIImage
Custom Renderers

12. https://blog.xamarin.com/adaptive-mobile-designs-with-flexlayout/

14. Xamarin.Forms
Shared C# Logic
Windows C#Android C#iOS C#
Características de Xamarin.Forms
• XAML Compilation
• Bindings
• MessagingCenter
• DependencyService
• Crear
• UIViewController
• Activity
• Fragment
• FrameworkElement

17. Xamarin.Essentials
aka.ms/xamarinessentials
Linterna
Geolocalización
Preferencias
Info del dispositivo
Display Info
Secure Settings
Acelerómetro
Batería
Clipboard
Compass
Conectividad
Data Transfer
Email
File SystemGeocoding
Giroscopio
Magnetómetro
Teléfono
Bloqueo pantalla
Sms
Text to Speech
Vibración

18. Xamarin Essentials
Un ki de APIs cross platform esencial para apps móviles –Android, iOS o Forms

19. My Trip Countdown

20. My Trip Countdown

21. My Trip Countdown
https://github.com/jsuarezruiz/MyTripCountdown

22. DEMODEMODEMO
My Trip Countdown

23. Pulse Music

24. Pulse Music
https://github.com/jsuarezruiz/PulseMusic

25. DEMODEMODEMO
Pulse Music

26. Netflix

27. Netflix
https://github.com/jsuarezruiz/xamarin-forms-netflix-sample

28. DEMODEMODEMO
Netflix

29. Walkthrough

30. Walkthrough
https://github.com/jsuarezruiz/xamarin-forms-walkthrough

31. DEMODEMODEMO
Walkthrough

32. Movies

33. Movies
https://github.com/jsuarezruiz/xamarin-forms-gtk-movies-sample

36. https://github.com/xamarin/Xamarin.Forms/wiki/Platform-Support

37. • Aun queda un
volumen de
usuarios
considerable en
Windows 7 o
inferior.

39. https://github.com/xamarin/Xamarin.Forms/wiki/Platform-Support

40. DEMODEMODEMO
Movies

41. Un vistazo hacia el
futuro

42. -
-
-
-
-
-
-
-
-
-
-
-
-
-
Project Board

43. 1
2
3
4
5
6
7
8
9
<TabbedPage …
BarBackgroundColor="#F1F1F1"
xmlns:android="clr-
namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly
=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.BarItemColor="#666666"
android:TabbedPage.BarSelectedItemColor="Black">

44. Bindable Span
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Welcome " />
<Span Text="{Binding YourName}" FontAttributes="Bold"/>
<Span Text=" to the Xamarin.Forms 3.1.0 playground!" />
</FormattedString>
</Label.FormattedText>
</Label>

45. https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/data-binding/compiled-bindings/
[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
Namespace MyApp { ….
<ListView x:Name="colorListView"
Grid.Row="0"
ItemsSource="{x:Static local:NamedColor.All}"
RowHeight="40">
<ListView.ItemTemplate>
<DataTemplate x:DataType="{x:Type local:NamedColor}"
<ViewCell>
<StackLayout Orientation="Horizontal">
<BoxView Color="{Binding Color}"
HeightRequest="32"
WidthRequest="32"
VerticalOptions="Center" />

46. ContentPage 2
3
4
5
6
7
<StackLayout
Spacing="0"
CompressedLayout.IsHeadless="true"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid
CompressedLayout.IsHeadless="true”>
...
</Grid>
...
</StackLayout>

52. Xamarin.Forms Shell

53. • Rendimiento!
• Mismo diseño para iOS y
Android via MaterialShell
• Flyout y Tabbed navigation
• Navegación por URL, deep
linking
• Gestión de navegación atrás
• Búsqueda
• Snackbar
• Bottom Sheet
• Floating Action Button
• Left Bar Button
• Screen segues
• Transiciones de páginas
• Se añade a todo lo que ya
existe en Xamarin.Forms

54. Preguntas y respuestas.
¿Dudas?
&