[TIMOB-20513] iOS: Activity indicator label cut off when auto layout is enabled

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2016-11-10T21:55:30.000+0000
Affected Version/s	Release 5.2.0
Fix Version/s	Release 6.1.0
Components	iOS
Labels	activityindicator, autolayout
Reporter	Chee Kiat Ng
Assignee	Vijay Singh
Created	2016-03-04T06:56:32.000+0000
Updated	2016-11-16T22:20:00.000+0000

Description

Steps to reproduce

1. create a new titanium app 2. use this code

var win = Ti.UI.createWindow({
  backgroundColor: 'white'
});

var indicator = Ti.UI.createActivityIndicator({
  color: 'green',
  font: {fontFamily:'Helvetica Neue', fontSize:26, fontWeight:'bold'},
  message: 'Loading...',
  style: Ti.UI.ActivityIndicatorStyle.DARK
});

win.addEventListener('open', function (e) {
  indicator.show();
});
win.add(indicator);
win.open();

3. In tiapp.xml, include this property

	<ios>
		<use-autolayout>true</use-autolayout>

Expected result

indicator spinning with text "Loading"

Actual result

indicator spinning with text "Loading" cut off. Compare attached screenshots

Attachments

File	Date	Size
autoLayoutFalse.png	2016-03-04T06:56:11.000+0000	19888
autoLayoutTrue.png	2016-03-04T06:56:11.000+0000	19764
test_autolayout.zip	2016-11-05T21:09:25.000+0000	24038

Comments

Hans Knöchel 2016-03-25

PR: https://github.com/appcelerator/titanium_mobile/pull/7885 To be discussed: The fix was quite simple, because (I think) the layout given by the iOS VFL (visual format language) was for layouting vertical views, not defining the height. Remove those definitions solved the height.
Chee Kiat Ng 2016-04-25

As commented by Pedro on PR. Failing review.
Hans Knöchel 2016-11-05

Added the native project test_autolayout.zip to demonstrate the autolayout constraints necessary in the code-base.
Vijay Singh 2016-11-08

[~hansknoechel] In shared native project , if we increase font size of text , activity indicator get vertical aligned with text . Do we need same or center aligned ?
Vijay Singh 2016-11-08

I have made changes for center alignment of indicator view, which looks better . PR(master) : https://github.com/appcelerator/titanium_mobile/pull/8589
Hans Knöchel 2016-11-10

PR approved and merged. However, there is a possible issue for special use-cases where the developer selects over-sized tests. This seems to happen without autolayout enabled as well, so we might file a general ticket for that behavior. /cc [~vsingh]
Abir Mukherjee 2016-11-16

Used the following environment to validate the fix: Node Version: 4.5.0 Mac OS: 10.12.1 Appc CLI: 6.0.0 Appc CLI NPM: 4.2.8 Titanium SDK version: 6.1.0.v20161116071014 Appcelerator Studio, build: 4.8.0.201611121409 Xcode 8.1 GM Using the sample code in the description, I tested this with Device with SDK 6.0.0 GA, and found that the word "Loading" was cutoff at the bottom. I then built the app using SDK 6.1.0.v20161116071014, and found that the word "Loading" was not cutoff.

JSON Source