[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layout Margins #9475

vijaysingh-axway · 2017-09-23T19:18:32Z

https://jira.appcelerator.org/browse/TIMOB-25301

…t Margins

hansemannn

Left a few comments about general proxy-handling. Besides that, I'm wondering if we need a wrapper-view to achieve the safeAreaInsets changes, although I can see this might be the only way to solve it with the current layout-system.

I also tested the built SDK with this change and the whole view does not seem to respond anymore. I tried with https://github.com/hansemannn/studentenfutter-app and changed the SDK to 7.0.0 which is the latest master this PR is being filed against. Please check it out as well to ensure it's something with my env.

hansemannn · 2017-09-23T19:28:08Z

iphone/Classes/TiUIWindowProxy.h

@@ -27,6 +27,8 @@
 - (void)refreshBackButton;
 - (void)updateNavBar;
 - (void)boot:(BOOL)timeout args:(id)args;
+@property (nonatomic, assign) TiViewProxy *safeAreaViewProxy;


Add one tmpty line for readability. Also ensure to format everything with our clang-format

hansemannn · 2017-09-23T19:29:45Z

iphone/Classes/TiUIWindowProxy.m

@@ -937,6 +940,49 @@ - (void)cleanupWindowDecorations
    [barImageView removeFromSuperview];
  }
 }
+
+- (void)processForSafeArea


Should be compiled out by #if IS_XCODE_9 to decrease the code-size for Xcode < 9.

hansemannn · 2017-09-23T19:30:36Z

iphone/Classes/TiUIWindowProxy.m

+      bottom = rootView.safeAreaInsets.bottom;
+      top = rootView.safeAreaInsets.top;
+    }
+    [self.safeAreaViewProxy setTop:[NSNumber numberWithFloat:top]];


Use NUMFLOAT for all 4 sizes

Access safeAreaViewProxy via [self safeAreaViewProxy]

hansemannn · 2017-09-23T19:30:56Z

iphone/Classes/TiViewProxy.m

@@ -20,6 +20,8 @@
 #import <QuartzCore/QuartzCore.h>
 #import <libkern/OSAtomic.h>
 #import <pthread.h>
+#import "TiUIWindowProxy.h"
+#import "TiUIViewProxy.h"



Compile out for Xcode < 9

hansemannn · 2017-09-23T19:32:02Z

iphone/Classes/TiViewProxy.m

+     windowProxy.shouldExtendSafeArea = [TiUtils boolValue:[self valueForUndefinedKey:@"extendSafeArea"]
+                                             def:NO];
+    if (!windowProxy.safeAreaViewProxy && !windowProxy.shouldExtendSafeArea) {
+      windowProxy.safeAreaViewProxy = [[TiUIViewProxy alloc] _initWithPageContext:[self pageContext] args:nil];


May need to be [[TiUIViewProxy alloc] _initWithPageContext:[self pageContext]] autorelease]

hansemannn · 2017-09-23T19:32:33Z

iphone/Classes/TiViewProxy.m

+        [windowProxy.safeAreaViewProxy add:a];
+      } else {
+        [self add:a];
+      }


Compile out for Xcode < 9, change the access of safeAreaViewProxy as well.

… Margins

hansemannn · 2017-09-25T10:53:00Z

iphone/Classes/TiViewProxy.m

+#endif
+        [self add:a];
+      }
+#if IS_XCODE_9


Where does this bracket belong to? Maybe this is more readable (untested!):

// allow either an array of arrays or an array of single proxy if ([arg isKindOfClass:[NSArray class]]) { for (id a in arg) { #if IS_XCODE_9 if (windowProxy.safeAreaViewProxy) { [windowProxy.safeAreaViewProxy add:a]; continue; } #endif [self add:a]; } return; }

…anium_mobile into TIMOB-25301

vijaysingh-axway · 2017-09-25T11:15:28Z

@hansemannn , I tried your app with extendSafeArea = false , UI is not responding . But if set extendSafeArea = true, its working fine. KitchenSink- V2 is also working fine. Tried to create a similar Test case but it is working properly.
var win = Ti.UI.createWindow({
backgroundColor: 'white',
title: 'Shopping List'});

var control = Ti.UI.createRefreshControl({
tintColor:'red'
});
var listView = Ti.UI.createListView({
refreshControl:control
});

// Left navigation button to toggle between editing and selection mode
var button = Ti.UI.createButton({title: 'Edit'});
win.leftNavButton = button;

listView.sections = sections;

var footerView = Ti.UI.createView({
backgroundColor:'gray' ,
height:50,
bottom:0
});
var footerLabel = Ti.UI.createLabel({
text: 'Footer View',
});
footerView.add(footerLabel);
win.add(listView);
win.add(footerView);

var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
navWin.open();

Will check again. Can you please try to create a simple test case from your app, which I can use in debug . Thanks!

build · 2017-09-25T11:26:53Z

	Fails
🚫	🔬 There are library changes, but no changes to the unit tests. That's OK as long as you're refactoring existing code, but will require an admin to merge this PR. Please see README.md#unit-tests for docs on unit testing.

Generated by 🚫 dangerJS

hansemannn · 2017-09-26T07:22:32Z

@vijaysingh-axway That's exactly what I would have done to test it, hehe. Maybe the overlay (loader) influences it. I'll try removing UI-parts incrementally today to track it down. The other changes look good so far!

jquick-axway · 2017-09-26T17:14:23Z

Side Comment:
If we ever decide to support tvOS or Android TV in the future, we can use an API like this to determine the overscan insets/margins.

And for Android phones/tablets that display an overlaid/translucent status bar and navigation bar, we can bind this new JavaScript API to the Java WindowInsets API, but this is only available on Android 4.4 and higher. But we could use it in the future when dropping older OS versions. (The older Android API View.getWindowDisplayVisibleDisplayFrame() for doing this is unreliable and usually provides the wrong results. Google's own comments in their code here admits to this.)

…ut Margins

…t Margins

hansemannn · 2017-10-11T22:29:36Z

@ewieberappc Build now passing on this ones :-) Getting back the green arrows, feeling like inside a DC-comic!

jquick-axway · 2017-10-18T17:25:46Z

apidoc/Titanium/UI/Window.yml

+
+        Read more about the safe-area layout-guide in the [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/).
+
+        Note: The default value is `true`, so content will extend the safe-are for backward compatibility. In Titanium SDK 7.0.0 


Typo. Change "safe-are" to "safe-area".

jquick-axway · 2017-10-18T17:27:42Z

apidoc/Titanium/UI/Window.yml

+        Note: The default value is `true`, so content will extend the safe-are for backward compatibility. In Titanium SDK 7.0.0 
+        and later, this property will be `false` by default to automatically adjust the layout. This will be a breaking 
+        change for windows without a navigation-bar, as the status-bar is part of the safe-area, so subviews that are positioned 
+        relatively to the status-bar do not need to include the height of the status-bar (20px) in the margins anymore.


The status-bar on iOS is 20dp (ie: Apple points), not 20px.

jquick-axway · 2017-10-18T17:39:12Z

apidoc/Titanium/UI/Window.yml

+    description:  |
+        If the value is `true`, the content (subviews) of the window will not respect the safe-area, meaning that the content 
+        will fill the whole screen available for rendering. If the value is `false`, the content of the
+        window will be rendered inside the safe-area (including then status-bar, iPhone X home-indicator & iPhone X notch).


Question:
If this is set false, then what will this mean for a translucent status bar? Will the window's background color or image be behind the translucent status bar or not? If yes, then does the window's height property include the height of the status bar then?

I ask because we may want to document these details. This may matter to a developer who is doing absolute positioning via a composite layout that involves subtracting from the window height. Please see the "LayoutTest.js" sample project attached to TIMOB-24972 and try its "Absolute Position" test in the list.

If false, it will not extend the safe-area (status-bar is part of that), meaning that a translucent status-bar should receive the window-background-color and the height of the window will not be influenced by the status-bar.

Okay, so, this means that window.height and window.width returns the safe area width height in this case, right? We should document this detail.

vijaysingh-axway · 2017-11-08T09:13:13Z

apidoc/Titanium/UI/Window.yml

+    description:  |
+        If the value is `true`, the content (subviews) of the window will not respect the safe-area, meaning that the content 
+        will fill the whole screen available for rendering. If the value is `false`, the content of the
+        window will be rendered inside the safe-area (including then status-bar, iPhone X home-indicator & iPhone X notch).


@hansemannn status-bar, iPhone X home-indicator & iPhone X notch are not part of safe area. Let us remove the statement from doc.
And we have planned to make extendSafeArea property false by default to automatically adjust layout in Titanium SDK 7.0.0. Do you really think we need to change it. In my view default property should be true. So that when developer change this property they will be aware of consequences of property and will change this wherever they require and verify the same. What you think ?

Let us discuss on this. Thanks.

vijaysingh-axway · 2017-11-09T04:31:33Z

@ QE android test is getting failed. So it is not getting built.

jquick-axway · 2017-11-10T01:07:41Z

apidoc/Titanium/UI/Window.yml

+        Note: The default value is `true`, so content will extend the safe-area for backward compatibility. 
+        Please note that status-bar, which have height (20pt), is outside safe-area. So any view added on window with 
+        this property 'true', will start rendering below to status-bar. In other words, subviews that are positioned 
+        relatively to the status-bar do not need to include the height of the status-bar (20pt) in the margins anymore.


The above description has grammar issues. How about we rewrite it to the following?...

description:
If set true (the default), then the content of the window will be extended to fill the whole screen and under the system's UI elements (such as the top status-bar) and physical obstructions (such as the iPhone X rounded corners and top sensor housing). In this case, it is the app developer's responsibility to position views so that they're unobstructed.

If set false, then the window's content will be laid out within the safe-area and its child views will be unobstructed. For example, you will not need to position a view below the top status-bar.

Read more about the safe-area layout-guide in the Human Interface Guidelines.

Thanks Josh! We should consider having a grammar review for all docs changes due to an international team 🙂.

Happy to help! :)
And my grammar isn't perfect either. I just made a couple edits to my text above just now.

hansemannn · 2017-11-10T19:14:11Z

@jquick-axway PR updated. @ewieberappc Ready to be merged (6_3_X was test & merged earlier already).

mukherjee2 · 2017-11-13T22:54:40Z

@eric34 can you please merge this one? CR and FR passed.

[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layou…

312ee2a

…t Margins

hansemannn requested changes Sep 23, 2017

View reviewed changes

hansemannn added this to the 7.0.0 milestone Sep 23, 2017

hansemannn added improvement ios iOS11 labels Sep 23, 2017

[TIMOB-25301]:iPhone X Need to be able to control the Insets / Layout…

0080d45

… Margins

hansemannn reviewed Sep 25, 2017

View reviewed changes

hansemannn and others added 3 commits September 25, 2017 12:59

Update Window.yml

5a12013

[TIMOB-25301]:Indentation fix

b34604c

Merge branch 'TIMOB-25301' of https://github.com/vijaysingh-axway/tit…

3b5c1a5

…anium_mobile into TIMOB-25301

vijaysingh-axway and others added 12 commits September 29, 2017 15:02

[TIMOB-25301] : iPhone X Need to be able to control the Insets / Layo…

7f48efa

…ut Margins

[TIMOB-25301] : iPhone X Need to be able to control the Insets / Layo…

25709d8

…ut Margins

[TIMOB-25301] : Update layout only when it needed.

00c0262

[TIMOB-25301]: iPhone X Need to be able to control the Insets / Layou…

378c5c1

…t Margins

[TIMOB-25301]: window property passed to safeAreaView

5d17368

[TIMOB-25301]: Safe area layout calculated early

8aa4c49

[TIMOB-25301]:Indentation fixed

73159dc

Merge branch 'master' into TIMOB-25301

adeaeaa

[TIMOB-25301] : early calculation of safe area for tab group’s window

e14f1a2

[TIMOB-25301]: Added safeAreaViewProxy after creating it

967bdaf

[TIMOB-25301] : Support for split window

7789988

Merge branch 'master' into TIMOB-25301

1d9f24e

hansemannn added 2 commits October 12, 2017 10:27

Rephrase safe-area docs

ecf5b94

Update Window.yml

e087ac7

jquick-axway suggested changes Oct 18, 2017

View reviewed changes

ewieberappc and others added 2 commits October 30, 2017 20:44

Merge branch 'master' into TIMOB-25301

34f9b7c

Merge branch 'master' into TIMOB-25301

7651eca

build added docs ios labels Nov 3, 2017

ewieberappc and others added 2 commits November 6, 2017 13:54

Merge branch 'master' into TIMOB-25301

cbc8623

Merge branch 'master' into TIMOB-25301

179f75e

vijaysingh-axway commented Nov 8, 2017

View reviewed changes

Merge branch 'master' into TIMOB-25301

d6113d4

build added docs ios labels Nov 9, 2017

[TIMOB-25301] : Window.yml doc updated

c5b9022

Merge branch 'master' into TIMOB-25301

de5871c

jquick-axway suggested changes Nov 10, 2017

View reviewed changes

build added docs ios labels Nov 10, 2017

hansemannn added 2 commits November 10, 2017 20:13

Update Window.yml

7db933d

Merge branch 'master' into TIMOB-25301

74eed9b

build added docs ios labels Nov 10, 2017

jquick-axway approved these changes Nov 10, 2017

View reviewed changes

Merge branch 'master' into TIMOB-25301

6cd1e94

build added docs ios labels Nov 11, 2017

eric34 merged commit 4ce7c86 into tidev:master Nov 14, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layout Margins #9475

[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layout Margins #9475

vijaysingh-axway commented Sep 23, 2017

hansemannn left a comment •

edited

hansemannn Sep 23, 2017

hansemannn Sep 23, 2017

hansemannn Sep 23, 2017

hansemannn Sep 23, 2017

hansemannn Sep 23, 2017

hansemannn Sep 23, 2017

hansemannn Sep 25, 2017 •

edited

vijaysingh-axway commented Sep 25, 2017

build commented Sep 25, 2017 •

edited

hansemannn commented Sep 26, 2017

jquick-axway commented Sep 26, 2017

hansemannn commented Oct 11, 2017

jquick-axway Oct 18, 2017

jquick-axway Oct 18, 2017

jquick-axway Oct 18, 2017

hansemannn Oct 18, 2017

jquick-axway Oct 18, 2017

vijaysingh-axway Nov 8, 2017

vijaysingh-axway commented Nov 9, 2017

jquick-axway Nov 10, 2017 •

edited

hansemannn Nov 10, 2017

jquick-axway Nov 10, 2017

hansemannn commented Nov 10, 2017

mukherjee2 commented Nov 13, 2017


		Read more about the safe-area layout-guide in the [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/).

		Note: The default value is `true`, so content will extend the safe-are for backward compatibility. In Titanium SDK 7.0.0

[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layout Margins #9475

[TIMOB-25301]:iPhone X: Need to be able to control the Insets / Layout Margins #9475

Conversation

vijaysingh-axway commented Sep 23, 2017

hansemannn left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hansemannn Sep 25, 2017 • edited

Choose a reason for hiding this comment

vijaysingh-axway commented Sep 25, 2017

build commented Sep 25, 2017 • edited

hansemannn commented Sep 26, 2017

jquick-axway commented Sep 26, 2017

hansemannn commented Oct 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vijaysingh-axway commented Nov 9, 2017

jquick-axway Nov 10, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hansemannn commented Nov 10, 2017

mukherjee2 commented Nov 13, 2017

hansemannn left a comment •

edited

hansemannn Sep 25, 2017 •

edited

build commented Sep 25, 2017 •

edited

jquick-axway Nov 10, 2017 •

edited