Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26461] iOS: Add "safeAreaPadding" property to Ti.UI.Window

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-12-07T20:19:48.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.0.0
ComponentsiOS
LabelsiOS, parity, qe-testadded, safearea, window
ReporterJoshua Quick
AssigneeVijay Singh
Created2018-10-18T05:30:11.000+0000
Updated2019-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!

Attachments

FileDateSize
ExtendSafeAreaContainerLandscapeLeft.png2018-11-27T01:34:26.000+000084028
ExtendSafeAreaContainerLandscapeLeftX.png2018-11-27T01:34:26.000+000084138
ExtendSafeAreaContainerLandscapeRight.png2018-11-27T01:34:26.000+000085284
ExtendSafeAreaContainerLandscapeRightX.png2018-11-27T01:34:26.000+000084343
ExtendSafeAreaContainerPortrait.png2018-11-27T01:34:26.000+0000102181
ExtendSafeAreaContainerPortraitX.png2018-11-27T01:34:26.000+0000103596
ExtendSafeAreaContainerTest.js2018-11-27T01:34:26.000+0000844
ExtendSafeAreaScrollLandscapeRightBottom.png2018-11-27T00:28:58.000+000089209
ExtendSafeAreaScrollLandscapeRightTop.png2018-11-27T00:28:58.000+000088761
ExtendSafeAreaScrollPortraitBottom.png2018-11-27T00:28:58.000+0000117714
ExtendSafeAreaScrollPortraitTop.png2018-11-27T00:28:58.000+0000116932
ExtendSafeAreaScrollViewTest.js2018-11-27T00:28:53.000+00001801
ExtendSafeAreaTab1LandscapeLeft.png2018-11-27T02:07:56.000+000083742
ExtendSafeAreaTab1LandscapeRight.png2018-11-27T02:07:56.000+000083988
ExtendSafeAreaTab1Portrait.png2018-11-27T02:07:56.000+0000103146
ExtendSafeAreaTabsTest.js2018-11-27T02:07:56.000+00001955

Comments

  1. Hans Knöchel 2018-10-27

    +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.
  2. Vijay Singh 2018-11-09

    PR - https://github.com/appcelerator/titanium_mobile/pull/10440
  3. Lokesh Choudhary 2018-12-07

    FR Passed. PR Merged.
  4. Samir Mohammed 2018-12-10

    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

JSON Source