Xamarin Forms Custom Renderers for Complex UI
•Als PPTX, PDF herunterladen•
1 gefällt mir•4,460 views
This document discusses Xamarin Forms custom renderers. It begins with an introduction to the speaker and overview of topics to be covered, including Xamarin Forms, the UI rendering process, and what custom renderers are. It then walks through an example of creating a custom renderer, highlighting important considerations like exporting the renderer and overriding the OnElementChanged method. The document emphasizes that custom renderers allow overriding the default rendering process but should only be used when necessary, as they add complexity. It concludes by thanking the audience.
![Xamarin Forms
Custom Renderers for
the Rescue…
- Udara Alwis -
CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]](https://image.slidesharecdn.com/xamarinformscustomrenderersfortherescue-160427173158/85/xamarin-forms-custom-renderers-for-the-rescue-1-320.jpg)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (10)
Ähnlich wie Xamarin Forms Custom Renderers for Complex UI
Ähnlich wie Xamarin Forms Custom Renderers for Complex UI (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Xamarin Forms Custom Renderers for Complex UI
- 1. Xamarin Forms Custom Renderers for the Rescue… - Udara Alwis - CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]
- 2. I am Udara Alwis • Xamarin Developer / Enthusiast • Mad Love for Mobile Development / UX • Microsoft Dot Net FTW! • 23 Years of Awesomess… • Nature Walks, Adventures, Running, Cycling and Socializing • Occasional YouTube-er and Vine-er! linkedin.com/in/UdaraAlwis
- 3. The Journey I'm going to take you through... • Xamarin is Great! • Xamarin Forms is… • A story of a Xamarin Forms developer… • Xamarin Forms UI Rendering process • What is a Custom Renderer? • Let’s create a Custom Renderer… • Important facts when Implementing Custom Renderers… • Important facts before Implementing Custom Renderers…
- 4. Xamarin is… • Is Great! • Build Mobile apps from dot net • Native performance • Cross Platform
- 5. Xamarin Forms is… • Is Awesome! • Concept : Write once, Run everywhere, and not suck! • Shared Common UI Layer • No longer separate UI implementation
- 6. Xamarin and Xamarin Forms ?
- 7. Confused ? Here’s more…
- 8. Story Time… • So He starts off developing… • Manages to implement the basic UI Design… • Slowly gets into the Complex UI implementation… • Detail Properties of Xamarin Forms Controls ??? • Ops! He’s in trouble… Story of a real life Xamarin Forms Developer!
- 9. Any solutions ? • Back to Native implementation ? • Oh boy! NOPE! • So what now ?
- 10. This is where…. Xamarin Forms Custom Renderers comes for rescue…
- 11. Xamarin Forms UI Rendering process • How? Each Xamarin Forms Control has it’s own Native Renderer • Renders / Maps Xamarin Forms Controls into Native Controls • Accordingly to the Native Platform • This is why, • Native look and feel • Performance • Behold the Magic!
- 12. Overriding this Rendering process ? • Good guy Xamarin… • Allowing developers to access • Override the default process • Customize Properties • Customize Behaviors • For each platform up on our choice…
- 13. Xamarin Forms Custom Renderers • What is a Custom Renderer ? • Access Rendering process / Sub-classing base Renderers • Why do we need them?
- 14. Steps for creating a Custom Renderers ? 1. Create the Custom control by Sub-classing the Xamarin.Forms Control. 2. Consume (implement) the Custom control in Xamarin.Forms. 3. Create the Custom Renderer for the Custom control on each platform.
- 15. Demo– Let’s create a Custom Renderer
- 16. Important facts when Implementing Custom Renderers… Important facts to consider when implementing custom renderers
- 17. 1. Always Export your Renderer • Registering the Custom Renderer with Xamarin Forms • Once Registered, it will be available throughout the entire assembly • ExportRenderer attribute
- 18. 2. Overriding OnElementChanged • Called when the Xamarin.Forms control is created in order to render the corresponding native control • Parameter – ElementChangedEventArgs, contains two important properties • e.NewElement • e.OldElement • Xamarin.Forms element that the renderer was attached to, is attached to • Subscribe and Unsubscribe from events, to avoid memory leaks
- 19. 3. Control vs Element Properties • Custom Renderer is a Middle Guy! • Element • Reference to the Xamarin.Forms control • Control • Reference to the rendering native control • Straight away access to the Native Properties
- 20. 4. You can override the whole Native Control • What if You want to get rid of the rendering Native Control? • Create your own Native Control and use it ? • SetNativeControl() method • Override the current rendering Native Control and Set your own Native Control • Even merge multiple native views together and create single control • Keep in Mind : Handle all the events / behaviors manually!
- 21. 4. You can create your own Base Renderer • Every Xamarin Forms Control -> Base Renderer. • We have been using built-in Base Renderers (ButtonRenderer, EntryRenderer, LabelRenderer, etc…) • Create your own Base Renderer? Yes you can. • Use the default ViewRenderer to create your own renderer • ViewRenderer<TCustomControl, TNativeControl> • Not much recommended though, but well….
- 22. For Xamarin Development you don’t need any in depth knowledge in Mobile Development… but it’s very useful to have some….
- 23. Important facts before Implementing Custom Renderers… Important facts to consider before implementing custom renderers
- 24. 1. Think twice… • Explore options from Xamarin Forms default Properties • An untold Truth : Xamarin Forms Custom Renderers are heavy stuff • It’s tempting but… • Do not Over-use Custom Renderers! • Try Alternatives : • Xamarin Forms default Controls Sub-classing • Xamarin Forms Effects aren’t so bad
- 25. 2. Re-usability • Make it reusable, as much as possible • Don't only focus on current situation, look ahead • Implement it all in one go • Curved cornered Image renderer and Ellipse Image renderer ? • None! UNIFY!
- 26. 3. Mapping of Xamarin Forms Control • Default Xamarin Forms UI Control (ex: Button) Xamarin Renderer • Corresponding Renderer for the XF Control (ex: ButtonRenderer) Xamarin Native Control • Platform specific native UI Control (ex: iOS UIButton / Android Button)
- 27. • Look out for the available details of… • Properties and Behaviors • Do they fit your Requirements ?
- 28. Conclusion • Xamarin Forms Custom Renderers extremely important • the Magic behind the Xamarin Forms Awesomeness • Nothing to be scared, Renderers are there to rescue you • Make sure to keep in mind the important facts before and during Custom Renderer Implementation
- 29. Thank You! For Weekly Xamarin Articles check out my blog, https://theconfuzedsourcecode.wordpress.com -Udara Alwis CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]
Hinweis der Redaktion
- My name is Udara Alwis, fun fact singaporeans find it very hard to pronounce my name, so if you happens to be one of them, I'm all cool with it. I'm a xamarin developer here in Singapore. Must admit I'm a crazy enthusiast in Xamarin, having mad love for mobile development. Not a mature adult, just a 23 year old kid causing trouble here and there. I've got other hobbies such as.... Well that's about me!
- So we are gonna go on a little journey today, here's the journey I'm going to take you through...
- Xamarin is Great... It let's you create mobile applications using dot net. Having full native performance and looks and feels of each native platform. As you can see in the diagram, thanks to xamarin now we can maintain the same code base across all three platforms, having the individual native UI implementation, which allows us to maintain up to about 70% percent shared codebase. So yeah its all great.
- Xamarin forms is awesome! its more like the cross platform extension of Xamarin this is the component that brings to life of the concept, Write once, Run Everywhere, and not Suck allowing us to share the UI code layer among three platforms. So you no longer need to implement the UI separately for each platform.
- Xamarin and Xamarin Forms ? Some people are confused about these differentiation between these two, let me put it this way... Xamarin Forms is more like the true cross platform extension of Xamarin. Where as Xamarin Forms provides us a unified UI Layer which has all the common UI controls of all three mobile platforms.
- Still Confuzed ? Let me explain... I'm not very sure why I put two diagrams, but however, in my left hand side you can see the Native Xamarin architecture where you share the back-end code base, but you have to implement the UI separately for each platoform, allowing us to share upto 70-80% of code base. Where as in Xamarin Forms you can share almost upto 100% of the code base across all three platforms with the Shared UI Layer.
- Story time... There's this developer who started developing an application with Xamarin forms, where he's given all the UI sketches and so on. So he start off with nice and simple controls in Xamarin Forms and manages to implement the basic UI design of the app. And then he slowly gets into complex UI designs implementations... So he starts going through all the available properties in these Xamarin Forms Controls, and starts wonder where are all the properties he needs to customize the app accordingly to the complex design. So he looks up and down, here and there, wondering where did all the properties go? Oh boy, he's in trouble isn't he... He realizes Xamarin Forms UI controls has limited set of properties for customization, and its very hard to do complex customizations in these controls.
- Any solutions ? Well he could always go back to native development, but its late for it now, and it'll put him through a lot of trouble for sure, having to implement in three platforms.
- Now that's where Xamarin Forms Custom Renderers comes in for the rescue, let me explain.
- First of all let me explain how the Xamarin Forms UI rendering process works. Each and every UI Control in Xamarin Forms has it's own Native Renderer which renders and maps its Properties and Behaviours to the Native Control level. This happens accordingly to the Native Platforms. This is why we get the Native look and feel and performance with Xamarin Forms. So yeah behold the Magic of Xamarin Forms. Now if you take a look at the Diagram here it shows how the default texbox UI Control of Xamarin Forms, which is called Entry control gets renderered down to the Native level through the Renderers. Now if you take a look at the iOS rendering, you can see the Entry control gets rendered down to the native UITextField control. And on Android and Windows Phone, EditText and UserControl respectively.
- Now Xamarin being a Good guy, they have allowed us to access this Rendering process, which allows us to Override this default process and use it for our own requirements. So by accessing this process we can customize all kinds of properties and behaviours of the Xamarin Forms controls, in each platform according to our needs.
- So in order to access this rendering process we need to create Custom Renderers of our own by sub classing the base Renderers Xamarin provides. Thereby it allows us to access and modify the native level properties and behaviors of the Xamarin Forms Controls. So why do we need them? Well you already have the answer... Now if you take a look at the Diagram, you can see how our Custom Renderers gets involved in the Rendering process. Where as this Entry control goes through our Custom Renderer and down to the base renderer, where we control and modify it in our Custom Renderer as we need. So there you have it, Custom Renderers and How they work...
- Next let's see how to create a Custom Renderer... Just 3 simple steps. First you subclass the default Xamarin Forms Control that you need to create a Custom Renderer for. Second you consume that sub-classed custom control in your Xamarin Forms application. Thirdly and finally, you implement the Custom Renderer in the Native level project. Yeah how hard could it be, just three simple steps!
- Demo of creating a sample Custom Renderer Now before I get to the actual implementation of our Custom Renderers, I'm going to take you guys through some important facts you need to keep in mind when implementing custom renderers. So while going through those facts we'll be getting back to the code step by step.... So that you get a good understanding about how to implement a custom renderer and what to keep in mind...
- Whenever you create a custom renderer you need to Export it and register it, otherwise Xamarin would not recognize your Custom Renderer and it will go ahead with the default base class Renderer for your Custom Control. Let me refresh your memory in our Demo.
- Whenever a Custom Renderer is being executed, the first method it fires is the OnElementChanged() method. This method gets called when the Rendering process starts for the custom control, which allows us the opportunity to tap into the native properties and behaviours and modify them as we wish by overriding this method. Also something to keep in mind this method consumes an important parameter, ElementChangedEventArgs which contains two important Properties. The OldElement property represents the Xamarin Forms level Control this renderer was attached to (previously attached to) and the NewElement property represents the Xamarin Forms level Control this renderer is currently attached to, its more of a reference. So if you are using any event handlers in your Custom Renderer, you have to keep an eye out for these two properties in order to Subscribe and Unsubscribe accordingly in order to prevent memory leaks. So let's have a look at it in our Demo, shall we?
- A Custom Renderer is more like a middle guy, in between Xamarin Forms level Control and the Native level Control, where as he's got hooks for both sides. So those hooks are represented by these two important properties, Control and Element. Now if you take a look at Element property, it holds a reference to the Xamarin.Forms control that's being rendered, so you could use this property to access anything on the Xamarin Forms level control. Where as the Control property holds a reference to the native control being used for the Custom Control. So using this property you can straight away add your customizations and behaviors to the Rendering Control. So let's see how it's done.
- What if you want to get rid of the current rendering Native Control ? And create your own Native control and use it for your Custom Control ? As an example You need to have a TextBox with an underneath shadow, in iOS you can't do this with the default native UITextView, so one way to do it is by adding another UIView along with the UITextView, where as you merge two native views together to form one View. So for instances like that, you could use the SetNativeControl() method, and pass in your custom native view, which will get rid of the default native view and override it with your custom native view. But you have to keep in mind something very important, hence you are flushing the default native control, you have to handle all the Behaviours manually by yourself. So let's try that in our demo, shall we?
- Now I hope you remember I told you for every Xamarin Forms control, there is a base renderer, and we have been using those base renderers this whole time. Now what if you wanted to create your own BaseRenderer ? Let's say you are creating a total complex Custom Control by yourself, and you need to have your own Renderer for it? And yes it is possible, you just have to derive your base renderer from the generic ViewRenderer. Well actually Xamarin doesn't really recommend this, but it is possible if you ever needed to.
- Here's something interesting I really want mention you all, Xamarin doesn't really require in depth Mobile Development knowledge but it is very beneficial to have some, specially in scenarios like these custom renderer implementation. The more you are aware of the Native development, the more advantages for you. So if you are planning to move towards Xamarin mobile development, I would suggest you take a little look at native development as well. So there goes a little sharing of Wisdom.
- You need to think twice before you move on towards Custom Renderer implementation for your UI, Once you get familiar with Custom Renderer implementation, you get very tempted to go for custom renderers all the time. I understand that, I experience that all the time.. why I say this is because, and untold truth about Custom Renderers is that, they are a little process intensive. Therefore it's wise to first of all explore all the possibilities from Xamarin Forms level to solve your requirement. So do not over-use custom renderers just because of the ease of development. You could try out other alternatives such as Xamarin Forms Controls sub-classing. And Xamarin Forms Effects (which is almost like Custom Renderers but simplified).
- Whenever you decide to implement a Custom Renderer You need to pay attention to the reusability of it. Make sure to implement it in a way its reusable as much as possible. Don't only focus on the current implementation, look ahead and , implement all the possible needs in one go, without implementing custom renderers for every single need of one type of control. Hence Custom renderers are process intensive. As an example let's say you have two Custom Renderers, called Curved Cornered Image Renderer and Circle Image Renderer, what I would tell you is that get rid of both of them and merge them into one, thereby you save resources and processing power.
- Last but not least before you implement your Custom Renderer always make sure to take a look down through your Rendering hierarchy,
- look at the available properties and behaviours down to the Native control and see whether if it fulfills your requirements, in all three platforms. That way you will have a better idea on how to implement the Custom renderer more efficiently.
- So as in conclusion of our Journey... Custom Renderers plays an extremely important role in Xamarin Forms development. In my opinion it's more like the Magic behind the whole Xamarin Forms Awesomeness. Don't be scared of Custom Renderer's because they are here for your rescue. Also finally make sure to keep in mind all the important tid bits I discussed today, so it will help you implement custom renderers more efficiently and effectively.