Hi,
I spent many hours trying to find a solution to create an editor like the Android or IOS SMS editor.
For this, I did create a panel with a textbox of one line height plus one button to submit the text.
When user tap on the textbox, the keyboard appear.
When this happen, I need the panel plus the textbox contained into the panel, to be moved on the top of the keyboard.
Panel plus textbox can initially be sized for two lines writing.
When editing, I need the textbox + panel being sized automatically depending on the number of lines contained by the textbox.
Then, when the keyboard is hidden, by pressing the back button, I need the panel + textbox being moved to the bottom of the screen (back to the original place).
I tried setting textbox height to 0 for enable auto-height => didn’t works
I tried to update textbox.height on editing => getting strange behaviour because the height is randomized
I didn’t find a way to know when the keyboard is hidden by a back key pressed
Here a sample code :
widget = require('widget')
local initialTextBoxHeight = 35 --Textbox height for one line of text =\> When not in editing mode
local textBoxPadding = 5
local keyboardHeight = 170
local pnlWriteComment = display.newRect(0, display.contentHeight-(initialTextBoxHeight+2\*textBoxPadding), display.contentWidth, initialTextBoxHeight+2\*textBoxPadding)
pnlWriteComment:setFillColor(140, 140, 140)
local textBox = native.newTextBox(textBoxPadding, display.contentHeight-textBoxPadding-initialTextBoxHeight, display.contentWidth-(2\*textBoxPadding), initialTextBoxHeight)
textBox.isEditable = true
local function inputListener( event )
print(event.phase)
if event.phase == "began" then
local newTextBoxHeight = 2\*initialTextBoxHeight -- Two lines
textBox.height = newTextBoxHeight
textBox.y = display.contentHeight-textBoxPadding-initialTextBoxHeight-newTextBoxHeight-keyboardHeight
pnlWriteComment.height = newTextBoxHeight+(2\*textBoxPadding)
pnlWriteComment.y = textBox.y-textBoxPadding
print( event.text )
elseif event.phase == "ended" then
textBox.height = initialTextBoxHeight
textBox.y = display.contentHeight-textBoxPadding-initialTextBoxHeight
pnlWriteComment.height = initialTextBoxHeight+2\*textBoxPadding
pnlWriteComment.y = display.contentHeight-(initialTextBoxHeight+2\*textBoxPadding)
elseif event.phase == "editing" then
-- Determining text box height using display.newText
local tv = display.newText(event.text, 10, 1, display.contentWidth-90, 0, native.systemFont, 18)
local newTextBoxHeight = tv.height
print("Calculated contentHeight="..tv.contentHeight.." height="..tv.height)
--textBox.contentHeight = newTextBoxHeight
textBox.height = newTextBoxHeight
print("Before: textBox.contentHeight="..tostring(textBox.contentHeight).." textBox.height="..tostring(textBox.height))
tv:removeSelf()
tv = nil
textBox.y = display.contentHeight-textBoxPadding-initialTextBoxHeight-newTextBoxHeight-keyboardHeight
pnlWriteComment.height = newTextBoxHeight+(2\*textBoxPadding)
pnlWriteComment.y = textBox.y-textBoxPadding
--print("After: textBox.contentHeight="..tostring(textBox.contentHeight).." textBox.height="..tostring(textBox.height))
--print( event.newCharacters ) nothing
--print( event.oldText ) nothing
print( event.startPosition )
print( event.text )
end
end
textBox:addEventListener( "userInput", inputListener )
-- This doesn't works if keyboard is visible
local function onKeyEvent(event)
print("keyEvent="..event.phase)
if (event.phase=="up") and (event.keyName=="back") then
native.setKeyboardFocus( nil )
end
return true
end
Runtime:addEventListener("key", onKeyEvent) Hope someone can help.
Thanks!
David [import]uid: 223645 topic_id: 36357 reply_id: 336357[/import]