native.newTextField does not honor left Align or honor display group object:insert()

I am using native.newTextField to display text fields/boxes for the names of seven players to be inputted.  I want to left justify the text after input as well as put the text boxes in a display group. The sample code is below.  

After editing the text either in the simulator or on an Andriod device, the inputted text will not left justify if the text is longer than the length of the visible box.  I could limit the characters for just the amount of characters that will fit in the length of box, but I would rather not do that.

Also, the text field does not honor the display group when I do MainPage.isVisible = false.  All the other objects I put in the Main Page display group will disappear when I do MainPage.isVisible = false.

Any tips on the left justifying and using display groups with native.newTextField?

local PlayerBox = { }

local MainPage = display.newGroup()

local i

for i=1,7,1 do 

PlayerBox[i] = native.newTextField(95+((i-1)*190), 310, 188, 55 )

PlayerBox[i].id = i

PlayerBox[i].font = native.newFont( native.systemFontBold, 36 )

PlayerBox[i].align = “left”

PlayerBox[i].isEditable = true

PlayerBox[i].placeholder = “NAME”

PlayerBox[i]:addEventListener( “userInput”, PlayerBoxListener)

MainPage:insert(PlayerBox[i])

end

Regarding isVisible : You can insert native text fields into display groups and they will honor movement of that group, but they will NOT honor visibility features like:

  • isVisible flag
  • alpha flag
  • layering of other objects (i.e.display objects cannot OVERLAY native text objects)

Why?  In a nutshell, native.* objects are rendered separately.

Regarding align - You did not specify if you were testing:

  • In the simulator on a Windows system? - My tests show this works just fine.
  • In the simulator on OS X?
  • On iOS Device?
  • On Android Device - You did say this actually.

It occurs to me there may be some confusion here too.  When you do the following:

  • type text into a native textField and make the text LONGER than the box
  • Click on another text field

The text does NOT snap-back as you might expect.

However, you can force this behavior using the setSelection() function.

See this example: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2017/12/nativeTextFields.zip

https://www.youtube.com/watch?v=SmiI50jX2nw&feature=youtu.be

I am using simulator on Windows and test on actual Samsung device.

So using setSelection worked!  When text is longer than box on simulator, it snaps back so looks left justified.  I just added one line in the “ended” phase of my existing listener…

PlayerBox[event.target.id]:setSelection( 1, 1 ) 

I did not try it on Samsung device but probably will work!

And thanks for clarification on using native objects in display groups and behavior with .isVisible on group.  I can get a round it by just doing isVisible on all the text fields separately.

Thanks  roaminggamer! And thanks for your work on the video with my sample code!

Regarding isVisible : You can insert native text fields into display groups and they will honor movement of that group, but they will NOT honor visibility features like:

  • isVisible flag
  • alpha flag
  • layering of other objects (i.e.display objects cannot OVERLAY native text objects)

Why?  In a nutshell, native.* objects are rendered separately.

Regarding align - You did not specify if you were testing:

  • In the simulator on a Windows system? - My tests show this works just fine.
  • In the simulator on OS X?
  • On iOS Device?
  • On Android Device - You did say this actually.

It occurs to me there may be some confusion here too.  When you do the following:

  • type text into a native textField and make the text LONGER than the box
  • Click on another text field

The text does NOT snap-back as you might expect.

However, you can force this behavior using the setSelection() function.

See this example: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2017/12/nativeTextFields.zip

https://www.youtube.com/watch?v=SmiI50jX2nw&feature=youtu.be

I am using simulator on Windows and test on actual Samsung device.

So using setSelection worked!  When text is longer than box on simulator, it snaps back so looks left justified.  I just added one line in the “ended” phase of my existing listener…

PlayerBox[event.target.id]:setSelection( 1, 1 ) 

I did not try it on Samsung device but probably will work!

And thanks for clarification on using native objects in display groups and behavior with .isVisible on group.  I can get a round it by just doing isVisible on all the text fields separately.

Thanks  roaminggamer! And thanks for your work on the video with my sample code!