Cross Platform UX mit Xamarin und UWP

Transcript

2. JÖRG NEUMANN THEMEN ▪ Mobility, UX, Machine Learning ▪ UI-Technologien ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: Joerg.Neumann@Acando.de ▪ Twitter: @JoergNeumann ▪ GitHub: https://github.com/JoergNeumann ▪ Blog: www.HeadWriteLine.BlogSpot.com
4. CROSS DEVICE CHALLENGES
5. CocosSharp ▪ 2D Gaming Engine SkiaSharp ▪ 2D-Graphics Rendering Library UrhoSharp ▪ 3D Gaming Engine CROSS-PLATFORM GRAPHICS RENDERING
6. CROSS PLATFORM UX ▪ SKIA Einheitliche 2D-Graphics API über alle Plattformen Open Source-Projekt von Google ▪ Plattform-Support iOS, Android, Mac, UWP, tvOS, Windows ▪ Features GPU Acceleration Basic 2D Graphic Operations Custom Effects & Shaders SVG Loading Image Manipulation ▪ SkiaSharp .NET-Port von Skia Integration in Xamarin.Forms, WPF, … Shapes Bézier Curves Translations & Rotations Text rendering Discrete Path Effects Composed Path Effects Sum Path Effects Shaders
7. Zeichnen mit SkiaSharp Möglichkeiten ▪ Zeichnen von einfachen Formen (Linien, Rechtecken, Ellipsen, ...) ▪ Individuelle Pfade ▪ Transformationen ▪ Farbverläufe, Anti-Aliasing API ▪ Android Graphics API ▪ Pfade orientieren sich am SVG-Modell Limitationen ▪ Keine Animations-API ▪ Keine direkte Interaktions-API protected override void OnPaintSurface( SKPaintSurfaceEventArgs e) { // Initialisierung var surface = e.Surface; var canvas = surface.Canvas; canvas.Clear(SKColors.White); // Transformation canvas.Scale(2); canvas.Translate(20, 20); using (var paint = new SKPaint()) { // Zeichenstil konfigurieren paint.IsAntialias = true; paint.Color = new SKColor(191, 197, 204); paint.Style = SKPaintStyle.Fill; paint.StrokeWidth = 1; // Kreis zeichnen canvas.DrawOval(10,10,10,10, paint); } } Zeichnen mit SkiaSharp
8. Zeichnen mit SkiaSharp Möglichkeiten ▪ Zeichnen von einfachen Formen (Linien, Rechtecken, Ellipsen, ...) ▪ Individuelle Pfade ▪ Transformationen ▪ Farbverläufe, Anti-Aliasing API ▪ Android Graphics API ▪ Pfade orientieren sich am SVG-Modell Limitationen ▪ Keine Animations-API ▪ Keine direkte Interaktions-API using (var paint = new SKPaint()) { // Pfad zeichen using (var path = new SKPath()) { path.MoveTo(50f, 60f); path.LineTo(100f, 60f); path.CubicTo(100f, 60f, 90f, 100f, 50f, 100f); path.Close(); canvas.DrawPath(path, paint); } // Linie zeichen canvas.DrawLine(50, 60, 50, 100, paint); // Rechteck zeichnen canvas.DrawRect(new SKRect(25f, 80f, 35f, 80f), paint); // Text rendern var text = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Purple, TextSize = 20, }; var size = paint.MeasureText("Hallo"); canvas.DrawText("Hallo", (width / 2) - size, 20 + text.TextSize, text); } Pfade und Formen zeichnen
9. DEMO ZEICHNEN MIT SKIA SHARP
10. Technologie Container Hintergrund ▪ Für die unterschiedlichen Technologien (Xamarin.Forms, UWP, WPF, ...) werden spezielle View-Klassen bereitgestellt ▪ Kümmern sich um das Rendern des SkiaSharp-Codes ▪ Behandeln Interaktion mit der Oberfläche (Touch, Mouse, Keyboard, ...) SkiaSharp.Views.Forms. SKCanvasView Xamarin.Forms SkiaSharp.Views.WPF. SKElement WPF SkiaSharp.Views.Mac. SKCanvasView Xamarin.Mac SkiaSharp.Views.iOS. SKCanvasView Xamarin.iOS SkiaSharp.Views.UWP. SKXamlCanvas UWP SkiaSharp.Views.Android. SKCanvasView Xamarin.Android
11. Technologie Container Vorgehen ▪ Entsprechendes NuGet-Packages einbinden ▪ OnPaintSurface() zum Zeichnen überschreiben ▪ OnTouch() für Interaktion überschreiben (Xamarin.Forms) protected override void OnPaintSurface( SKPaintSurfaceEventArgs e) { var surface = e.Surface; var canvas = surface.Canvas; canvas.Clear(SKColors.White); … } Zeichnen protected override void OnTouch( SKTouchEventArgs e) { switch (e.ActionType) { case SKTouchAction.Pressed: … break; case SKTouchAction.Released: … break; } e.Handled = true; this.InvalidateSurface(); } Interaktion
12. CUSTOM CONTROLS Idee ▪ Controls nur einmal entwickeln und auf unterschiedlichen Plattformen / Technologien verwenden ▪ Keine plattformspezifischen Renderer mehr erforderlich!
13. CUSTOM CONTROLS Vorgehen ▪ Control leitet von der View der entsprechenden Technologie ab ▪ Die eigentliche Arbeit findet aber im plattformneutralem Code statt ▪ Interaktion und Animation wird von Plattform-View bereitgestellt MyControl SkiaSharp Control Library MyControl WPF Control Library MyControl XF Control Library MyControl UWP Control Library WPF App Xamarin.Forms App UWP App
14. DEMO CUSTOM CONTROLS MIT SKIA SHARP
15. DEVELOPER CHALLENGES
16. WORKFLOW ▪ Ziel Pixel-genaue Umsetzung des Style-Guide Möglichst große Wiederverwendung ▪ Herausforderungen Unterschiedliche APIs pro Plattform ▪ Tooling Im Vorfeld über Tooling verständigen DEVELOPMENT DESIGN
17. DESIGN TOOLS PaintCode ▪ Design Tool für Mac ▪ Generiert Code aus Designs (iOS, Android, Xamarin, SVG, ...) ▪ Auch als Sketch-Plug-In erhältlich ▪ Kommerzielles Produkt Produktseite
18. DESIGN TOOLS KIMONO DESIGNER ▪ SkiaSharp-basiertes Design Tool für Mac ▪ Generiert SkiaSharp-Code aus Designs ▪ Open Source-Projekt Sourcen auf GitHub / Tutorial
19. NÜTZLICHE LIBRARIES Lottie ▪ Mobile Animations Library ▪ Entwickelt von Airbnb für iOS & Android ▪ JSON-basierte Animationsdateien von Adobe After Effects abspielen ▪ Open Source-Projekt ▪ Freie Lottie-Animationen: www.lottiefiles.com Sourcen auf GitHub / Tutorial
20. MICROSOFT FLUENT DESIGN LANGUAGE
21. THE PLAYGROUND IS EXPANDING 2D 0D (NO SCREEN) 3D (NO SCREEN) SMALL 2D SCREENS LARGE 2D SCREENS L I G H T S O U N D L I G H T S O U ND H A P T I C L I G H T S O U N D G L A N C E A B L E S O U N D H A P T I C V I S U A L ( 0 ’ ) S O U N D H A P T I C V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C V I S U A L ( 0 ’ - 6 ’ ) S O U ND H A P T I C V I S U A L ( 3 ’ - 1 0 ’ ) S O U ND H A P T I C V I S U A L ( 0 ’ - 1 0 ’ ) S O U ND H A P T I C 2 D - 3 D ( 0 ’ - 1 2 ’ ) S O U ND H A P T I C I M M E R S I V E ( 0 ’ - X ’ ) S O U ND H A P T I C INPUTS OUTPUTS V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C
22. Depth Motion Material Scale Light Fluent Design System
23. Light
24. REVEAL DEFINITION ▪ Reveal ist ein Lichteffekt ▪ States: Hoover, Pressed, …
25. REVEAL ANWENDUNG ▪ Ist in vielen Controls bereits enthalten (ListView, GridView, TreeView, NavigationView, CommandBar, ComboBox, …) ▪ Wird über Styles bereitgestellt (ButtonRevealStyle, ToggleButtonRevealStyle, RepeatButtonRevealStyle, …) ▪ Hintergrund des Containers festlegen: <Button Content="OK" Style="{StaticResource ButtonRevealStyle}"/> <Grid Background="{ThemeResource ButtonRevealBackgroundPointerOver}"> … </Grid>
26. DEMO REVEAL
27. Depth
28. PARALLAX DEFINITION ▪ Scroll-Effekt bei dem ein Tiefeneffekt entsteht
29. PARALLAX VERWENDUNG ▪ ParallaxView-Element verwenden <Grid> <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> <!-- Background element --> <Image x:Name="BackgroundImage" Source="Assets/turntable.png" Stretch="UniformToFill"/> </ParallaxView> <!-- Foreground element --> <ListView x:Name="ForegroundElement"> … </ListView> </Grid>
30. DEMO PARALLAX
31. Motion
32. CONNECTED ANIMATIONS DEFINITION ▪ Dienen zur Definition von Übergangseffekten während der Navigation ▪ Sehr gut zur Master-/ Detail-Navigation
33. CONNECTED ANIMATIONS ANWENDUNG ▪ Source und Destination definieren ▪ ConnectedAnimationService-Klasse private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e) { var image = sender as Image; ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("image", image); Frame.Navigate(typeof(DetailsPage)); } Source: protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); var imageAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("image"); if (imageAnimation != null) { imageAnimation.TryStart(DestinationImage); } } Destination:
34. DEMO CONNECTED ANIMATIONS
35. Material
36. ACRYL DEFINITION ▪ Halbtransparentes Material ▪ Erzeugt Tiefe in der Oberfläche ▪ Empfohlen für Navigation, Commands, usw.
37. ACRYL ANWENDUNG ▪ Wird in Form eines Brush bereitgestellt ▪ Brush kann angepasst werden <Grid Background="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}"> … </Grid> <AcrylicBrush x:Key="MyAcrylicBrush„ BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FF7F0000"/>
38. DEMO ACRYL
39. FAZIT ▪ Cross-Plattform UX ist eine Herausforderung ▪ SkiaSharp erleichtert die plattformübergreifende Entwicklung ▪ Ein guter Designer-/ Entwickler-Workflow ist essentiell für den Erfolg ▪ Code-Generatoren können helfen ▪ UWP enthält APIs und Ressourcen für eine gute UX
40. Q & A
41. FLUENT DESIGN SYSTEM – RESSOURCEN ▪ Fluent Design System Home ▪ https://developer.microsoft.com/en-us/windows/apps/design
42. SKIASHARP – TUTORIALS ▪ Cross Platform 2D Drawing with SkiaSharp ▪ https://developer.xamarin.com/guides/cross-platform/drawing/ ▪ An Introduction to SkiaSharp ▪ https://developer.xamarin.com/guides/cross-platform/drawing/introduction/ ▪ Deep Dive into SkiaSharp with Xamarin.Forms ▪ https://blog.xamarin.com/deep-dive-skiasharp-xamarin-forms/ ▪ Using SkiaSharp in Xamarin.Forms ▪ https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/
43. DOCUMENTATION ▪ Samples & Demos ▪ https://developer.xamarin.com/SkiaSharpFormsDemos/ ▪ SkiaSharp API Documentation ▪ https://developer.xamarin.com/api/root/SkiaSharp/ ▪ Google Skia Documentation ▪ https://skia.org/
44. SOURCES AND APIS ▪ SkiaSharp auf GitHub ▪ https://github.com/mono/SkiaSharp ▪ Erweiterungen für SkiaSharp ▪ https://github.com/mono/SkiaSharp.Extended
45. TOOLS ▪ Kimono Designer ▪ https://github.com/xamarin/KimonoDesigner ▪ Paint Code ▪ https://www.paintcodeapp.com/ ▪ PaintCode2Skia - Convert PaintCode Export to SkiaSharp ▪ https://github.com/michaldobrodenka/PaintCode2Skia