Cross Platform Image Resources Management in Xamarin Forms
â˘Als PPTX, PDF herunterladenâ˘
0 gefällt mirâ˘2,505 views
This is the presentation of the tech talk I gave at Singapore Mobile Dot Net Developers meetup (http://www.meetup.com/SingaporeMobileDev/) Here I talk about the Image resources management strategies Xamarin recommends by default in our mobile app projects. But they are far from practicality when it comes to Cross Platform development in Xamarin while discussing about their disadvantages. Then I talk about the Forms9Patch Library which solves most of the problems addressed above. Furthermore I explain about its features, properties and under the hood functionality. And finally demo about its implementation in Xamarin Forms projects. Checkout the video recording here: https://www.youtube.com/watch?v=HNJnFqs3OIk
![Cross Platform Image
Resources Management
in
Xamarin.Forms
- Udara Alwis -
CODENAME: [ĂøĹfuzĂŤĂ SøurcĂŤĂødĂŤ]](https://image.slidesharecdn.com/crossplatformimageresourcesmanagement-161209150423/85/Cross-Platform-Image-Resources-Management-in-Xamarin-Forms-1-320.jpg?cb=1481296523)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Cross Platform Image Resources Management in Xamarin Forms
- 1. Cross Platform Image Resources Management in Xamarin.Forms - 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, Adventures, Running, Skateboarding, Cycling and Socializing ⢠Occasional YouTube-er! linkedin.com/in/UdaraAlwis
- 3. Yay! Xamarin Forms! ⢠Truly Cross platform ⢠Native Performance ⢠Native Looks and Feel ⢠Share almost up to 100% of codebase
- 4. Take a moment⌠Resources? ⢠Resources in Mobile App Development ⢠For Decorating/Enhancing/Improving a Mobile App ⢠Specially Image Resources ⢠IT IS CRUICIAL! ⢠Specially Cross Platform Mobile Development! ⢠How about Xamarin Forms?
- 5. Xamarin Forms? Image Resources? ⢠Two ways, 1. Local Images 2. Embedded Images (Resources)
- 6. 1. Xamarin Forms Local Images ⢠Image Files to be added to each application project ⢠Reference from Xamarin.Forms shared code level ⢠Same File Name for every platform ⢠Fully Native features. But Properties Should be configured locally (Build Actions, Sub-Directories, Resolution Support, etcâŚ) ⢠Valid File naming for each platform
- 7. 2. Xamarin Forms Embedded Images ⢠Image File are Embedded in the PCL Assembly as Resources ⢠Build Action: EmbeddedResource ⢠Centralized⌠⢠No control over Screen Resolution / Device Type ⢠Handle everything through code
- 8. Blah blah⌠in reality, it sucks! ⢠Duplicate Effort? Or Triplicate? ⢠Hard to make changes, update and monitor ⢠Resources, only going to increase.. Imagine 50? 100? ⢠Naming conventions? ⢠Manual Management of everything ⢠Multi-Resolution / Multi-Device Support, NIGHTMARE! ⢠As Embedded Images? Give me a break! Lol
- 9. So what is the Solution? ⢠Think about it⌠⢠We need a solution that, ⢠lets you store your images in one place (ex: PCL Project level) ⢠provides multi-screen resolution/ device type support ⢠And doesnât suck! ⢠Our Struggle? Yes it is real!
- 10. Behold, Forms9Patch Library â Simplify image management and text formatting in your PCL Xamarin.Forms mobile appsâŚâ ⢠Provides Centralized Image Resources management ⢠With complete multi-resolution/Device support ⢠Exclusively for Xamarin.Forms ⢠For iOS and Android. But unfortunately not yet for Windows Phone
- 11. Forms9Patch Library⌠⢠Manage all your Image Resources right from your PCL project ⢠Generate and configure your Image Resources once. ⢠Finds the best fit image among the provided images based on Screen Resolution/ Device type
- 12. Xamarin Forms Image Mechanics? ⢠Xamarin.Forms.ImageSource Instance ⢠Instance that loads (from File or Web) and holds the Image Source object in memory ⢠Xamarin.Forms.Image Control/View ⢠UI Control or the View that displays and populates the ImageSource on to the User Interface
- 13. Likewise Forms9Patch? ⢠Forms9Patch.ImageSource instance - Extends Xamarin.Forms.ImageSource ⢠Forms9Patch.Image Control/View - Extends Xamarin.Forms.Image ⢠Interchangeable in-between
- 14. Forms9Patch.ImageSource instance - Automatically loads the best fit image among the provided images (EmbeddedResource) based on screen-resolution/device - No need of explicit image extension - Forms9Patch.ImageSource.FromMultiResource() static method - Supports same file formats as Xamarin.Forms.ImageSource
- 15. Forms9Patch.Image Control/View - Scalable image view - Ability to Tile an image within its parent
- 16. Stretch-ability of an Image ⢠Native development situation? ⢠iOS's provides resizableImageWithCapInsets ⢠make an UIImage a scalable image ⢠CapInset argument is used to specify the regions (distance inset from the edges) which will not scale
- 17. Stretch-ability of an Image ⢠Android provides NinePatchDrawable to allow apps to ⢠display Nine-patch images as scalable drawing elements. ⢠used to mark the regions that are allowed scale
- 18. Stretch-ability of an Image ⢠Both are great! ⢠Android Nine-patch image format allows for un-scalable regions to be anywhere in the image (not just at the edges). ⢠Scaled regions are marked within the image file ⢠So scaling can be customized to each file ⢠iOS resizableImageWithCapInsets define the scaling regions at runtime - which provides some flexibility and convenience.
- 19. Stretch-ability of an Image in Forms9Patch ⢠Seeing the advantages to both approaches, ⢠Forms9Patch.Image allows for both. ⢠If NinePatch image is provided -> Use the Android approach ⢠If CapInsets property is provided -> Use the iOS approach ⢠Duh! You canât use both! ⢠CapInsets will override NinePath image regions
- 20. Stretch-ability of an Image in Forms9Patch ⢠Yes thanks to Forms9Patch now you could ⢠Use Androidâs Nine-Patch image stretch-ability in iOS ⢠And iOSâs resizableImageWithCapInsets in Android ⢠With Nine-Patch image or CapInsets property
- 21. NinePatch Image vs CapInsets in Forms9Patch
- 22. Forms9Patch Naming Convention Schema ⢠Unique naming convention ⢠Identification of multi-device / multi-resolution image files ⢠Similar to iOS approach has ~3x better performance ⢠project_assembly_name.image_path.base_image_name [resolution_modifier][device_modifier].filename_extension
- 23. Forms9Patch Naming Convention Schema
- 24. Demoâ Letâs try it out
- 25. Forms9Patch Extra Goodies⌠⢠Forms9Patch.Label - Custom Fonts - HTML Formatted Text ⢠ImageButton - State Support, Gestures ⢠Forms9Patch Layouts - AbsoluteLayout, Frame, Grid, RelativeLayout and StackLayout ⢠EtcâŚ. So much more⌠⢠More about Forms9Patch : http://forms9patch.com/
- 26. Conclusion ⢠Image Resource Management in Cross Platform Mobile Development is crucial ⢠Xamarin Forms default Image Management is not sufficient enough ⢠Forms9Patch Library provides Provides Centralized Image Resources management ⢠With complete multi-resolution/Device support
- 27. Thank You! For Weekly Xamarin Articles check out my blog, https://theconfuzedsourcecode.wordpress.com -Udara Alwis CODENAME: [ĂøĹfuzĂŤĂ SøurcĂŤĂødĂŤ]
Hinweis der Redaktion
- Hey guys! How are you today? Come on cheer up! Itâs the end of the day! Lol Before I begin, quick raise of hands, whoâs done any Xamarin Forms development Native Mobile Dev? Android iOS Windows Phone? Perfect! I think we are in perfect grounds to proceed with my presentation
- My name is Udara Alwis. Iâm a Xamarin Developer here in Singapore, and guilty as charged Iâm a crazy Xamarin enthusiast. Iâve got some mad love for Mobile Development and Mobile User Experience Engineering Of course Iâm a Microsoft fan boy. There goes by saying Iâm still 24 years old. When Iâm not coding, I go on adventures, running, cycling, skateboarding.. All that fun stuff!
- So yay! Xamarin Forms.. The true cross platform approach of Xamarin Letâs you development mobile apps using dot net, with fully native performance and look and feel. And it allows you to share upto almost 100% of codebase across three platforms. Xamarin Forms is awesome!
- Now letâs take a moment, and talk about Resources in Mobile Application Development. We usually use Resources for decorating, enhancing and improving the User Experience in our Mobile Apps. Specifically Image Resources plays a huge role in it. So managing Image Resources in our mobile app development is very crucial, and itâs even more crucial when it comes to Cross Platform Mobile Development. Because you need to be aware⌠Now how about beloved Xamarin Forms?
- Basically Xamarin Forms provides two approaches To Manage our Image Resources First approach, is by having our Images as Local Images in the Native Project level. Secondly, having our Images as Embedded Resources in the PCL project level. Alright letâs get into details of themâŚ
- Now the first approach, allows us to have our images in the Native Project level in all three platforms as you can see in the picture And we could reference those Images in the Share Code level. But we need to have the same file name for each platform. True, this approach provides you with fully native properties and behaviors for our Images And we need to configure those Image Resources manually for each platform. Such as⌠Also it is cruicial whenever you name the Image, to make sure that naming convention supports all three platforms, because as we knowâŚ
- Now speaking of the second approach, Xamarin Forms lets us add our Image Files as Embedded Resources in the PCL project This approach provides more of a centralized resource management But still the biggest bummer is that, it doesnât give any control over Screen Resolution and Device Type handling If you want to do that, you have to handle every single detail in the code level itself, which is a very complex.
- Two Components for dealing with Images
- Now letâs take a moment and talk about Stretch-Ability of an image. This is about how our images are resized during the runtime with in the parent view or on the device screen based on the screen resolution or the type of device This is a very important aspect in Image Resources handling, because we need to make sure These images are stretched accordingly at runtime without disrupting the User Experience of the app. How this is handled in native development? iOS? iOS provides resizableImageWIthCapInsets functionality which allows us to stretch the UIImage control The CapInsets property that we are using here allows us to define the regions of the image which we do not want to stretch and allows the rest of the image to be stretched through out the Parentâs bounds. If you are not familiar take a look at the image at the bottom where we define the top,let,right,bottom inset regions which shouldnât get stretched but the rest of the image getâs stretched.
- Now how about Android, it provides us the NinePatchImage Drawables approach Where it allows us to mark the specific regions that we want the image to be stretched using the nine patch image tool that comes with Android sdk tools. So at the runtime only those regions will get stretched in parent view. If you are not familiar with Android development, you can take a look at the image, how we have marked the regions that we need to scale during runtime
- Now both these native approaches are great, although they are totally different. Android provides us the Nine Patch image format allowing us to define the regions of the image that we want to scale. Which could be anywhere on the image. So hence we are marking these stretchable regions in the image file, we could customize it for each file based on resolution or the device type that we support with our resources Which is very flexible and powerful given the vast sea of device types we have out there for Android On iOS resizableImageWithCapInsets defines the regions that we do not want to scale during runtime, which also gives somewhat flexibility. But in this case we donât have much to worry because Apple device have pretty much pre-defined screen sizes and device types. So both these aspects have their own advantages considering their native environments
- Ok so Forms9Patch allows us to manage our Image Resources in PCL project and brings a lot more great features. But how are we to address those Image Resources and reference them in our code. Forms9Patch introduces a unique naming convention for the image resources, by allowing them to identify themselves for the support of multi-resolution and device type support which is much similar to iOS resource naming convention hence it has better performance than Android naming convention.