Date post: | 23-Jan-2018 |
Category: |
Software |
Upload: | udara-alwis |
View: | 938 times |
Download: | 1 times |
Cross Platform Image
Resources Management in
Xamarin.Forms
- Udara Alwis -CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]
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
Yay! Xamarin Forms!
• Truly Cross platform
• Native Performance
• Native Looks and Feel
• Share almost up to 100% of codebase
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?
Xamarin Forms? Image Resources?
• Two ways,
1. Local Images
2. Embedded Images (Resources)
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
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
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
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!
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
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
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
Likewise Forms9Patch?
• Forms9Patch.ImageSource instance
- Extends Xamarin.Forms.ImageSource
• Forms9Patch.Image Control/View
- Extends Xamarin.Forms.Image
• Interchangeable in-between
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
Forms9Patch.Image Control/View
- Scalable image view
- Ability to Tile an image within its parent
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
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
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.
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
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
NinePatch Image vs CapInsets in Forms9Patch
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
Forms9Patch Naming Convention Schema
Demo – Let’s try it out
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/
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
Thank You!
For Weekly Xamarin Articles check out my blog, https://theconfuzedsourcecode.wordpress.com
- Udara Alwis
CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]