Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Analizando interfaces de usuario avanzadas con Xamarin.Forms

3,611 views

Published on

Analizando interfaces de usuario avanzadas con Xamarin.Forms

Published in: Software
  • Be the first to comment

  • Be the first to like this

Analizando interfaces de usuario avanzadas con Xamarin.Forms

  1. 1. Analizando interfaces de usuario avanzadas con Xamarin.Forms
  2. 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. 3. ¿Qué vamos a ver? • Pulse Music • My Trip Countdown • Netflix • Walktrough • Movies
  4. 4. Las claves
  5. 5. Xamarin.Forms- Cross Platform UI • Interfaz de usuario nativa compartida • Lógica compartida Shared C# Logic Shared UI Code
  6. 6. $ dotnet new classlib -o My.Class.Library .NET Standard .NET Core .NET Framework Xamarin ~ ~ Especificación HTML Browsers
  7. 7. .NET Standard en contexto .NET Standard
  8. 8. Xamarin.Forms utiliza abstracciones para definir los elementos. Posteriormente se transforma cada abstracción ofreciendo una implementación y mecanismos en cada plataforma. Abstracciones
  9. 9. 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
  10. 10. 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
  11. 11. https://blog.xamarin.com/adaptive-mobile-designs-with-flexlayout/
  12. 12. 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
  13. 13. 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
  14. 14. Xamarin Essentials Un ki de APIs cross platform esencial para apps móviles –Android, iOS o Forms
  15. 15. My Trip Countdown
  16. 16. My Trip Countdown
  17. 17. My Trip Countdown https://github.com/jsuarezruiz/MyTripCountdown
  18. 18. DEMODEMODEMO My Trip Countdown
  19. 19. Pulse Music
  20. 20. Pulse Music https://github.com/jsuarezruiz/PulseMusic
  21. 21. DEMODEMODEMO Pulse Music
  22. 22. Netflix
  23. 23. Netflix https://github.com/jsuarezruiz/xamarin-forms-netflix-sample
  24. 24. DEMODEMODEMO Netflix
  25. 25. Walkthrough
  26. 26. Walkthrough https://github.com/jsuarezruiz/xamarin-forms-walkthrough
  27. 27. DEMODEMODEMO Walkthrough
  28. 28. Movies
  29. 29. Movies https://github.com/jsuarezruiz/xamarin-forms-gtk-movies-sample
  30. 30. https://github.com/xamarin/Xamarin.Forms/wiki/Platform-Support
  31. 31. • Aun queda un volumen de usuarios considerable en Windows 7 o inferior.
  32. 32. https://github.com/xamarin/Xamarin.Forms/wiki/Platform-Support
  33. 33. DEMODEMODEMO Movies
  34. 34. Un vistazo hacia el futuro
  35. 35. - - - - - - - - - - - - - - Project Board
  36. 36. 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">
  37. 37. 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>
  38. 38. 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" />
  39. 39. ContentPage 2 3 4 5 6 7 <StackLayout Spacing="0" CompressedLayout.IsHeadless="true" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <Grid CompressedLayout.IsHeadless="true”> ... </Grid> ... </StackLayout>
  40. 40. Xamarin.Forms Shell
  41. 41. • 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
  42. 42. Preguntas y respuestas. ¿Dudas? &

×