Hello friends, here is a quick post under my series of Xamarin Forms tips where I share with you tips and tricks which make you a better Xamarin Forms developer. Today we are going to look at how to leverage iOS’ safe area to our advantage. In addition to what Xamarin Forms offers by default to manage safe areas, we will explore a more flexible approach to manipulate iOS safe area insets with Xamarin Forms.
This post is part of a series of posts I’ll make on building this pretty chat app UI with Xamarin Forms. The source code can be found here on Github. This app is built using Reactiveui here is a great getting started guide to understand how awesome the reactiveui MVVM framework is.
The problem
On iOS certain areas on the screen are to be avoided when building your app’s UI. These are safe areas. But in some cases, instead of avoiding these safe areas, you might need to make your UI overlap those portions of the screen while respecting the margin between these areas and your layout. The later is what we want to accomplish.
If you like this post, don’t hesitate to follow me on Twitter or Github and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.
The solution
You might already know that by default Xamarin forms offer’s platform specifics API to avoid these safe areas. You can read more about this here. But that is not what we want.
We want to know the number of pixels separating our UI from the safe areas and leverage this to make our UI prettier. Here for example, we have a custom tab which we want to place at the bottom of our page, below the bottom safe area on iOS.
Getting the number of pixels which separates the bottom of our layout with the safe inset is easy on iOS. But we want to apply it to out layout on Xamarin Forms. Here are two solutions which you have.
Platform Specifics Code Behind with C#
As mentioned earlier, Xamarin Forms provides a way of adjusting your layout to iOS’s safe area by default. Here is how we use it to our advantage here.
1 2 | var safeInsets = On<iOS>().SafeAreaInsets(); TabView.Margin = new Thickness(0, 0, 0, -safeInsets.Bottom); |
Effects and XAML
You can use an effect and apply these separations on the control in the iOS project. Effets area a great way of modifying your application’s
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | [assembly: ExportEffect(typeof(FreeChat.iOS.Effects.iOSSafeAreaInsetEffect), nameof(FreeChat.iOS.Effects.iOSSafeAreaInsetEffect))] namespace FreeChat.iOS.Effects { public class iOSSafeAreaInsetEffect : PlatformEffect { protected override void OnAttached() { if (Element is Layout element) { //returns the appropriate safe area taking into consideration iOS versions. var safeArea = UIApplication.SharedApplication.KeyWindow.SafeAreaInsets; element.Margin = new Thickness(0, 0, 0, - safeArea.Bottom); } } protected override void OnDetached() { if (Element is Layout element) { element.Margin = new Thickness(); } } } } |
Here is how you apply the effect.
1 2 3 4 | <pancakeView:PancakeView.Effects> <effects:iOSSafeAreaInsetEffect /> </pancakeView:PancakeView.Effects> |
If you find this article useful, please follow me on Twitter, Github, Linkedin, or like my Facebook page to stay updated.Follow me on social media and stay updated
Conclusion
These are ways to manipulate iOS safe area insets with Xamarin Forms. You can leverage this to your advantage to build pretty Xamarin Forms applications.
Refferences
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout
https://github.com/jfversluis/TravelMonkey
Follow me on social media and stay updated