[TIMOB-26461] iOS: Add "safeAreaPadding" property to Ti.UI.Window
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2018-12-07T20:19:48.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 8.0.0 |
Components | iOS |
Labels | iOS, parity, qe-testadded, safearea, window |
Reporter | Joshua Quick |
Assignee | Vijay Singh |
Created | 2018-10-18T05:30:11.000+0000 |
Updated | 2019-04-10T22:44:57.000+0000 |
Description
On iOS add read-only property "safeAreaPadding" to
Ti.UI.Window
. This property will return a Titanium [ViewPadding](https://docs.appcelerator.com/platform/latest/#!/api/ViewPadding) dictionary providing the left, top, right, and bottom padding needed to show content safely within the window without overlap. If there are no insets or if "extendSafeArea" is set false
, then this property is expected to return all zeros for the padding.
The idea is that the app developer will then be able to set up their own safe area view and use it as a container as shown below.
var window = Ti.UI.createWindow({
extendSafeArea: true,
});
var safeAreaView = Ti.UI.createView({
backgroundColor: "green",
borderWidth: "4dp",
borderColor: "blue",
});
window.add(safeAreaView);
window.addEventListener("postlayout", function() {
// Padding's left/top/right/bottom can be used as pin positions for the view.
safeAreaView.applyProperties(window.safeAreaPadding);
});
window.open();
*Note:*
We should do the same on iOS to handle the following:
* iPhone X top notch and bottom home indicator.
* Translucent status bar on all other iOS devices. (Safe area should be beneath status bar.)
*Safe-Area Container Example:*
Test code [^ExtendSafeAreaContainerTest.js] shows how to create a safe-area view container for other child views, guaranteed to always make child content tappable without overlap. The green rectangle with the blue border is the safe-area view within the root white window using an orange border. Note that the safe-area padding compensates for the status bar on all iOS versions and the iPhone X notch and rounded corners.
!ExtendSafeAreaContainerPortraitX.png|thumbnail! !ExtendSafeAreaContainerLandscapeRightX.png|thumbnail! !ExtendSafeAreaContainerLandscapeLeftX.png|thumbnail!
!ExtendSafeAreaContainerPortrait.png|thumbnail! !ExtendSafeAreaContainerLandscapeRight.png|thumbnail! !ExtendSafeAreaContainerLandscapeLeft.png|thumbnail!
*Safe-Area ScrollView Example:*
Test code [^ExtendSafeAreaScrollViewTest.js] shows how to pad a ScrollView. It allows its contents to scroll beneath a translucent status bar and iPhone X notch/home-indicator, but pads the top and bottom so that the top-most view and bottom-most view can be scrolled within the safe-area, making them tappable. it also pads around the iPhone X rounded corners too.
!ExtendSafeAreaScrollPortraitTop.png|thumbnail! !ExtendSafeAreaScrollPortraitBottom.png|thumbnail! !ExtendSafeAreaScrollLandscapeRightTop.png|thumbnail! !ExtendSafeAreaScrollLandscapeRightBottom.png|thumbnail!
*Safe-Area TabGroup Example:*
Test code [^ExtendSafeAreaTabsTest.js] shows how to extend tabs under an iPhone X notch and rounded corners. The safe-area padding reported lies within the TabGroup
container where content is normally displayed when "extendSafeArea" is set to false
.
!ExtendSafeAreaTab1Portrait.png|thumbnail! !ExtendSafeAreaTab1LandscapeRight.png|thumbnail! !ExtendSafeAreaTab1LandscapeLeft.png|thumbnail!
+1 for this, I hope it can make it into 7.5.0 for parity with Android! Explicitly, we need the tab-group safe-area insets to lay out a custom tab-view.
PR - https://github.com/appcelerator/titanium_mobile/pull/10440
FR Passed. PR Merged.
Closing ticket, Improvement verified in SDK version 8.0.0.v20181207122537. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10440