search

cocos2d / cocos2d-x

Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.
https://www.cocos.com/en/cocos2d-x
18.25k stars 7.06k forks source link

Editbox text field moves up when you tap on the Edibox to enter a text. #20645

Closed asnagni closed 3 years ago

asnagni commented 3 years ago

Hi Cocos team,

I am having a problem with the Editbox class. when I tap on an Editbox, the editbox placeholder (the text field) moves up above the original text field position.

I was under the impression that this issue was fixed with the TextField class. So, to make sure, I replaced the Editbox class with the TextField class and the problem doesn’t show up (The text doesn’t shift up). That confirms that the Editbox class is causing the issue.

Could anyone help fix this issue or help port the fix from the TextField class to the Editbox class. For a better understanding of the issue I attached two videos to this bug report. One video with the Editbox class and another one with TextField class so you can see the difference.

Video with Editbox (you will see the problem):

https://user-images.githubusercontent.com/37470668/106496648-22158700-648b-11eb-9af3-8a3489e5613d.mp4

Video with TexField (The problem doesn't exist with the TextField):

https://user-images.githubusercontent.com/37470668/106496805-4ffacb80-648b-11eb-89ef-148d186c1fd6.mp4

Thank you, Stay safe.

Steps to Reproduce:

  1. create an Editbox
  2. Build the App
  3. Start the App
  4. Tap on the Editbox
thienphuoc commented 3 years ago

My solution :

asnagni commented 3 years ago

Hi Thienphuoc, First thank you for your answer, I do appreciate. From your solution, I can see that depending on the environment, you will use the EditBox class or the TextField class. That solution is viable 👍.

That said I have a question for you. How did you solve the unicode aspect with your solution. The TextField class doesn't fully support unicode. For example if someone enter an emoji like this one "✌️" how do you handle it with the TextField class?

Thank you, Stay safe.

asnagni commented 3 years ago

Hi all, After analyzing carefully the situation, I think that using the coscos2d-x TextField class is not a good solution because you will be missing lot of functionalities that are implemented in the EditBox class. After all the cocos2d-x development team is recommending to use the EditBox class and I think this is good recommendation. That said, when designing the EditBox class, I think that the cocos2d-x team didn’t take in account that on some Android devices, the Keyboard can change the UI visibility when it appears. Unfortunately it is not consistent in the Android universe. So to solve this issue, is to detect if the UI visibility was change and to set it in the mode that prevent the problem.

With this solution there is not need to change the cocos2d-x core code. The solution will be implemented in the AppActivity.java file. 
I will put the full solution here in case that anyone may be facing this issue and is looking for a solution:

So the solution will be implemented in the AppActivity class (AppActivity.java file)

1) You need to declare a View data member in the class:
    static View mDecorView = null;

2) You need to listen to any UI visibility change and make sure that you set it to what you need to fix the problem. Put this code in the method “onCreate(Bundle savedInstanceState)”. Put the code at the bottom of the method:

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        ……………
        ……………
        ……………
        ……………
        ……………

        // The code to listen to any UI visibility change
            final View decorView = getWindow().getDecorView();
            mDecorView = decorView;
            decorView.setOnSystemUiVisibilityChangeListener(
            new View.OnSystemUiVisibilityChangeListener()
            {
                @Override
                public void onSystemUiVisibilityChange(int i)
                {
                    UpdateSystemUI();
                }
            });
        }

  3) Implement the function that updates the UI visibility

    private void UpdateSystemUI()
    {
        Log.d(TAG, "AdjustEditboxPositionHandler - UpdateSystemUI");

        if(mDecorView != null)
        {
            int uiOptions = View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_FULLSCREEN
                            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;

            mDecorView.setSystemUiVisibility(uiOptions);
        }
    }

4) The video that shows the fix:

https://user-images.githubusercontent.com/37470668/106753575-d6cdb680-65f9-11eb-8902-f07f0e886472.mp4

asnagni commented 3 years ago

Hi Thienphuoc, I published a solution that will allow you to use the Editbox onely on all platforms without having the issue. Please have look and feel to improve.

Thank you, Stay safe.

On Feb 2, 2021, at 3:15 AM, thienphuoc notifications@github.com wrote:

My solution :

for the IOS platform , we will use the editbox -> to support copy/paste for the andorid/windows/macos, we will use the ui::�Text�field. `cocos2d::ui::EditBox APBase::createEditBoxFromTextfield(cocos2d::ui::TextField i_textField,ui::EditBox::InputFlag inputFlag,ui::EditBox::InputMode inputMode ) { if (!i_textField) { return nullptr; }

auto _editName = ui::EditBox::create(i_textField->getContentSize(), "empty_box.png",ui::Widget::TextureResType::LOCAL); _editName->setIgnoreAnchorPointForPosition(false); _editName->setAnchorPoint(i_textField->getAnchorPoint()); _editName->setPosition(i_textField->getPosition()); _editName->setFontSize(i_textField->getFontSize()); _editName->setFontName(i_textField->getFontName().c_str()); _editName->setFontColor(i_textField->getTextColor()); _editName->setPlaceHolder(i_textField->getPlaceHolder().c_str()); _editName->setPlaceholderFont(i_textField->getFontName().c_str(), i_textField->getFontSize()); _editName->setPlaceholderFontColor(i_textField->getPlaceHolderColor()); _editName->setMaxLength(i_textField->getMaxLength()); _editName->setTextHorizontalAlignment(i_textField->getTextHorizontalAlignment()); _editName->setText(i_textField->getString().c_str()); _editName->setReturnType(ui::EditBox::KeyboardReturnType::DONE); //_editName->setDelegate(this); _editName->setInputMode(inputMode); _editName->setName(i_textField->getName()); _editName->setVisible(i_textField->isVisible()); _editName->setTag(i_textField->getTag());

if (auto parent = i_textField->getParent()) { parent->addChild(_editName,i_textField->getLocalZOrder()); }

_editName->setInputFlag(inputFlag);

return _editName ; }`

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cocos2d/cocos2d-x/issues/20645#issuecomment-771453556, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI54DTEXCSAHDQMEFQMMVNLS46YDHANCNFSM4W5GQVZA.