[TIMOB-25855] Android: Add TextArea lines and maxLines support

GitHub Issue	n/a
Type	New Feature
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2018-06-27T19:09:40.000+0000
Affected Version/s	Release 7.0.2
Fix Version/s	Release 7.5.0
Components	Android
Labels	android, textfield
Reporter	Michael Gangolf
Assignee	Joshua Quick
Created	2018-03-11T12:45:54.000+0000
Updated	2018-09-06T13:02:37.000+0000

Description

Add the possibility to set the properties lines and maxLines at a TextField. * https://developer.android.com/reference/android/widget/TextView.html#attr_android:lines * https://developer.android.com/reference/android/widget/TextView.html#attr_android:maxLines The TextField will start with the lines amount of lines and will be extended to maxLines when pressing the Return key.

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

var tf = Ti.UI.createTextArea({
	lines: 1,
	maxLines: 5,
	borderColor: "#000",
	borderWidth: 1,
	color: "#000",
	width: 200,
	top: 10,
})

win.add(tf);

var tf2 = Ti.UI.createTextArea({
	lines: 2,
	maxLines: 2,
	borderColor: "#000",
	borderWidth: 1,
	color: "#000",
	width: 200,
	bottom: 10
})

win.add(tf);
win.add(tf2);
win.open();

Attachments

File	Date	Size
lines_maxLines.mp4	2018-03-11T12:52:24.000+0000	286464

Comments

Michael Gangolf 2018-03-11

PR: https://github.com/appcelerator/titanium_mobile/pull/9927
Hans Knöchel 2018-03-12

We need to add parity for this first. But as its a feature request with low number of general interest so far, I would not consider it for an early next version so far. *EDIT*: It seems like iOS does [not support this natively](https://stackoverflow.com/questions/5225763/limit-the-number-of-lines-for-uitextview). There seems to be a [workaround](https://stackoverflow.com/a/22814446/5537752) which could be tried out, but I feel it mike be error prone for all the use cases we have.
Michael Gangolf 2018-03-12

No problem. It was requested by a user on Stackoverflow because it is the default behaviour inside Whatsapp (Android) when you write a message (lines: 1, maxLines: 5).

Michael Gangolf 2018-03-18

Extended example:

   var win = Ti.UI.createWindow({
   	backgroundColor: '#fff',
   	
   });
   
   var sv = Ti.UI.createScrollView({
   	layout:"vertical",
   	height:Ti.UI.FILL
   })
   
   var tf1 = Ti.UI.createTextArea({
   	borderColor: "#000",
   	borderWidth: 1,
   	color: "#000",
   	width: 200,
   	hintText:"1 to 5",
   	hintTextColor:"#999",
   	lines: 1,
   	maxLines: 5,
   	
   })
   
   var tf2 = Ti.UI.createTextArea({
   	lines: 2,
   	maxLines: 2,
   	borderColor: "#000",
   	borderWidth: 1,
   	color: "#000",
   	width: 200,
   	hintText:"2 to 2 -> setting lines to 4",
   	hintTextColor:"#999"
   });
   tf2.lines = 4;
   
   
   var tf3 = Ti.UI.createTextArea({
   	lines: 2,
   	maxLines: 2,
   	borderColor: "#000",
   	borderWidth: 1,
   	color: "#000",
   	width: 200,
   	hintText:"2 to 2",
   	hintTextColor:"#999"
   });
   tf3.maxLines = 2;
   
   var tf4 = Ti.UI.createTextArea({
   	lines: 2,
   	maxLines: 2,
   	borderColor: "#000",
   	borderWidth: 1,
   	color: "#000",
   	width: 200,
   	hintText:"2 to 2 -> setting max to 4",
   	hintTextColor:"#999"
   });
   tf4.maxLines = 4;
   
   var textField1 = Ti.UI.createTextField({
   	borderColor: "#000",
   	borderWidth: 1,
   	color: "#000",
   	width: 200,
   	hintText:"Textfield",
   	hintTextColor:"#999"
   });
   
   var lbl1 = Ti.UI.createLabel({
   	color:"#000",
   	bottom: 10,
   	text:"one line"
   });
   var lbl2 = Ti.UI.createLabel({
   	color:"#000",
   	bottom: 10,
   	text:"two\nline"
   });
   var lbl3 = Ti.UI.createLabel({
   	color:"#000",
   	bottom: 10,
   	text:"max 3 multi\n1 multi\n2 multi\n3 multi\n4 multi\nmulti\nline",
   	maxLines: 3
   });
   var lbl4 = Ti.UI.createLabel({
   	color:"#000",
   	bottom: 10,
   	text:"line 2 multi\n1 multi\n2 multi\n3 multi\n4 multi\nmulti\nline",
   	lines: 2
   });
   win.add(sv);
   sv.add(tf1);
   sv.add(tf2);
   sv.add(tf3);
   sv.add(tf4);
   sv.add(textField1);
   sv.add(lbl1);
   sv.add(lbl2);
   sv.add(lbl3);
   sv.add(lbl4);
   win.open();

Joshua Quick 2018-03-19

[~hknoechel], internally, Google's Android code is calculating based on line height as well, plus decoration and padding size. So, it's probably not all that far off than that iOS work-around code. Also, setting the Android TextArea's height via setLines() is much more common than setting it to an arbitrary pixel/dp size. The reason is because native Android developers can't make assumptions about the default font size used by the system. Especially with forked Android OSes that don't follow the rules. I agree. We want iOS parity. I'm okay with us pushing this feature out and releasing it simultaneously with iOS support. And I don't know if we "need" setMaxLines() support. That feature is more useful for labels than TextAreas (it'll auto-show ellipsis when going beyond maxLines). It's easy enough to add to Android, but I don't think we need it on iOS. Thoughts?
Josh Longton 2018-09-06

*Closing ticket.* Text area lines and maxLines can now be set, verified using the example above. The feature is present in SDK: {noformat} 7.5.0.v20180904155047 {noformat} *ENV* {noformat} Pixel 2 XL (9.0) Emulator (8.1, 7.1.1) Appc NPM: 4.2.13 Appc CLI: 7.0.6 Ti CLI: 5.1.1 Node: 8.9.4 NPM: 6.3.0 {noformat}

JSON Source