iOS StatusBar, padding and background color.
Member ✭✭
I have an app with simple ListView inside a ContentPage which represent one of the pages of a TabbedPage view. Said app has a background color different from the iOS default and that proved to be an issue when in the page containing the ListView I wanted to move the whole list down a notch (pun intended) to leave some space for the StatusBar: this created a white space between the top of the screen and the beginning of my list, just under the StatusBar, showing the iOS default background color.
I tried searching for a hint about what I could do but apart from a really complicated snippet of code everyone suggested said solution or abandoning the idea of having a custom background color. The whole thing rubbed me wrong and through sheer ingenuity I thought that maybe I could set both the background color of the ListView and the ContentPage on the same color and surprisingly it worked.
Now my question is: was that just a case of weak Google-fu on my side not finding anyone suggesting this solution or none is suggesting it because of the (obvious) implications I fail to see?
Anyway, I went from this (disregard the lack of the clock on the bar, I don't even know how it happened):
To this:
Best Answer
-
LandLu
Member, Xamarin Team Xamurai
ListView is rendered to UITableView on iOS and UITableView is inheriting from UIScrollView. So it has a property called
ContentInsetAdjustmentBehavior. According to this documentation: https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior?language=objc,
we know that its default value is automatic and it will adjust the UITableView's content's offset depending on the safe area.
As a result, when you placed a single list view on a content page, it will display content below your safe area. Therefore, you just need to set your list view's background:<StackLayout> <ListView BackgroundColor="#F1F9FF"> <!--...--> </ListView> </StackLayout>This will leave a space for your status bar and also make them show the same color.
I think your approach is not bad. Set the content page's background the same as your view cell's. Then the only extra work you have to do is setting padding for your stack layout. And the padding is different when using iPhone X or Xs because of the notch on the top. This is why we called it safe area instead of status bar space. You have to set different padding for different iPhones, this is the only defect of your workaround.
Choose the best one you need it's all up to you and feel free to ask here if you can't search the satisfied answer on Google.5
Answers
ListView is rendered to UITableView on iOS and UITableView is inheriting from UIScrollView. So it has a property called
ContentInsetAdjustmentBehavior. According to this documentation: https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior?language=objc,we know that its default value is automatic and it will adjust the UITableView's content's offset depending on the safe area.
As a result, when you placed a single list view on a content page, it will display content below your safe area. Therefore, you just need to set your list view's background:
<StackLayout> <ListView BackgroundColor="#F1F9FF"> <!--...--> </ListView> </StackLayout>This will leave a space for your status bar and also make them show the same color.
I think your approach is not bad. Set the content page's background the same as your view cell's. Then the only extra work you have to do is setting padding for your stack layout. And the padding is different when using iPhone X or Xs because of the notch on the top. This is why we called it safe area instead of status bar space. You have to set different padding for different iPhones, this is the only defect of your workaround.
Choose the best one you need it's all up to you and feel free to ask here if you can't search the satisfied answer on Google.
I definitely used the UseSafeArea property of the page in XAML although I made it look like I was setting the padding manually.