Add/remove EditText to/from TextInputLayout

Question

"We already have an EditText, can only have one"

我已经为我的应用程序 (LoginFragment) 构建了一个片段，它可以处理两种主要的身份验证模式；即登录并注册用户。有一个按钮允许用户在 "login mode" 和 "sign up" 模式之间切换。每个 "mode" 都有一些其他不需要的额外视图。因此，有必要在切换模式时添加和删除视图。

我在 TextInputLayout 布局中使用 EditText 视图。当我执行以下操作时，我的应用程序崩溃了：

以编程方式添加 EditText
以编程方式删除 EditText
以编程方式添加 EditText -> 崩溃

我得到的错误是：

java.lang.IllegalArgumentException: We already have an EditText, can only have one
                at android.support.design.widget.TextInputLayout.setEditText(TextInputLayout.java:166)
                at android.support.design.widget.TextInputLayout.addView(TextInputLayout.java:155)
                at android.view.ViewGroup.addView(ViewGroup.java:3985)
                at android.view.ViewGroup.addView(ViewGroup.java:3961)
                at com.mydomain.myapp.fragments.LoginFragment.showActivateAccountViews(LoginFragment.java:317)

这来自 android.support.design.widget.TextInputLayout，它有一个在添加视图时设置的内部私有 EditText 变量（来源如下）。看来，当我第二次尝试将视图添加到 TextInputLayout 时，mEditText 变量已经设置。 class 没有自己的 .removeView() 方法，所以我不知道应该如何删除它？

我怀疑我错误地删除了 EditText 视图，但无法弄清楚我做错了什么。我还阅读了其他一些处理删除视图的 Stack Overflow 帖子，但这些方法也没有解决问题。

添加视图 -
删除视图 - Call removeView() on the child's parent first

有人对我如何让它发挥作用有任何想法吗？

下面是我自己的代码，供参考。

LoginFragment.java

...
import android.support.design.widget.TextInputLayout;
import android.widget.EditText;

public class LoginFragment extends Fragment {

    private RelativeLayout mContainer;

    ...

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        final View view = inflater.inflate(R.layout.fragment_login, container, false);
        mContainer = ((RelativeLayout) view.findViewById(R.id.login_container));

        showLoginViews();

        LayoutTransition layoutTransition = mContainer.getLayoutTransition();
        layoutTransition.enableTransitionType(LayoutTransition.CHANGING);

        return view;
    }

    /**
     * Show the view elements for Login mode
     */
    private void showLoginViews() {

        LayoutInflater li = (LayoutInflater)getActivity().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);

        // Configure the button for the primary action
        Button loginButton = (Button)mContainer.findViewById(R.id.button_login_fragment_primary_action);
        ...

        // Configure the toggle button to navigate to Activate Account mode
        TextView toggleButton = (TextView)mContainer.findViewById(R.id.button_toggle_mode);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LoginFragment.this.showActivateAccountViews();
            }
        });
        toggleButton.setText(getResources().getString(R.string.action_activate_account));

        // Hide the Member ID EditText
        ((TextInputLayout)mContainer.findViewById(R.id.member_id_inputlayout)).removeView(mContainer.findViewById(R.id.editText_member_id_field));
    }

    /**
     * Show view elements for Activate Account mode
     */
    private void showActivateAccountViews() {
        LayoutInflater li = (LayoutInflater)getActivity().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);

        // Configure the primary button for the primary action - Activate Account
        Button activateAccountButton = (Button)mContainer.findViewById(R.id.button_login_fragment_primary_action);
        ...

        // Add the Member ID EditText
        ((TextInputLayout)mContainer.findViewById(R.id.member_id_inputlayout)).addView(li.inflate(R.layout.login_member_id_element_layout, (ViewGroup)mContainer.findViewById(R.id.member_id_inputlayout), false));

        // Configure the toggle button to navigate to Login mode
        TextView toggleButton = (TextView)mContainer.findViewById(R.id.button_toggle_mode);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LoginFragment.this.showLoginViews();
            }
        });
        toggleButton.setText(getResources().getString(R.string.action_login));
    }

    ...
}

login_member_id_element_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/editText_member_id_field"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/member_id" />

login_fragment.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.mydomain.myapp.fragments.LoginFragment">

    <RelativeLayout
        android:id="@+id/login_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true">

        <!--placeholder layout with params for activate account elements-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/member_id_inputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!-- a view can be added here-->
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/email_inputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/editText_email_field"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:inputType="textEmailAddress" />

        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/button_login_fragment_primary_action"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/password_inputlayout"
            android:text="@string/action_login" />

        <!-- Toggle button for Login/Activate Account-->
        <TextView
            android:id="@+id/button_toggle_mode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/action_activate_account" />

    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

android.support.design.widget.TextInputLayout（来自最新的22.2.1支持库）

public class TextInputLayout extends LinearLayout {

    private EditText mEditText;

    ...

    public void addView(View child, int index, LayoutParams params) {
        if(child instanceof EditText) {
            android.widget.LinearLayout.LayoutParams params1 = this.setEditText((EditText)child, params);
            super.addView(child, 0, params1);
        } else {
            super.addView(child, index, params);
        }

    }

    private android.widget.LinearLayout.LayoutParams setEditText(EditText editText, LayoutParams lp) {
        if(this.mEditText != null) {
            throw new IllegalArgumentException("We already have an EditText, can only have one");
        } else {
            this.mEditText = editText;
            this.mCollapsingTextHelper.setExpandedTextSize(this.mEditText.getTextSize());
            this.mEditText.addTextChangedListener(new TextWatcher() {
                public void afterTextChanged(Editable s) {
                    TextInputLayout.this.mHandler.sendEmptyMessage(0);
                }

                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                }

                public void onTextChanged(CharSequence s, int start, int before, int count) {
                }
            });
            this.mDefaultTextColor = this.mEditText.getHintTextColors().getDefaultColor();
            this.mEditText.setOnFocusChangeListener(new OnFocusChangeListener() {
                public void onFocusChange(View view, boolean focused) {
                    TextInputLayout.this.mHandler.sendEmptyMessage(0);
                }
            });
            if(TextUtils.isEmpty(this.mHint)) {
                this.setHint(this.mEditText.getHint());
                this.mEditText.setHint((CharSequence)null);
            }

            if(this.mErrorView != null) {
                ViewCompat.setPaddingRelative(this.mErrorView, ViewCompat.getPaddingStart(this.mEditText), 0, ViewCompat.getPaddingEnd(this.mEditText), this.mEditText.getPaddingBottom());
            }

            this.updateLabelVisibility(false);
            android.widget.LinearLayout.LayoutParams newLp = new android.widget.LinearLayout.LayoutParams(lp);
            Paint paint = new Paint();
            paint.setTextSize(this.mCollapsingTextHelper.getExpandedTextSize());
            newLp.topMargin = (int)(-paint.ascent());
            return newLp;
        }
    }
}

Answer 1

恭喜，您（也许？）发现了一个可能的错误（或者我应该说删除 TextInputLayout 的 EditText 时的非预期行为？）

可以看到removeView()是ViewGroup的一个方法。它会从 ViewGroup 的 子视图数组中删除您的 View，但不会删除您的 InputTextLayout 对 EditText.[=21 的引用=]

What should i do, then?

您必须扩展 TextInputLayout 并创建您自己的方法，将 super.mEditText 设置为 null。问题是您仍然需要调用这两个方法，因为仅将 Layout 引用设置为 null 可能会使您的旧布局在整个应用程序生命周期中留在内存中。

Answer 2

com.android.support.design 库 (v22.2.1) 似乎存在限制。您不能在运行时直接删除然后将 EditText 添加到 TextInputLayout。你可以给这个错误加注星标 here.

我已经设计了解决该问题的方法。我修改了 xml 布局，这样我们 add/remove TextInputLayout 在运行时从 TextInputLayout 中 adding/removing EditText 视图（这不起作用）到 LinearLayout 持有人。使用此解决方案，我们永远不需要从 TextInputLayout 中实际删除 EditText。

关于此解决方案，唯一需要注意的是，它使您的视图层次结构比原本需要的层次深 1 层。因此，如果您已经遇到 UI 性能问题，请记住这一点。如果您在阅读本文时并且 com.android.support.design v22.2.1 版本可用，则可能值得检查一下这个问题是否已得到解决。

否则，请参阅下面的示例代码以了解我的解决方法的实现。

LoginFragment.java

import android.support.design.widget.TextInputLayout;
import android.widget.EditText;

public class LoginFragment extends Fragment {

    private RelativeLayout mContainer;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        final View view = inflater.inflate(R.layout.fragment_login, container, false);
        mContainer = ((RelativeLayout) view.findViewById(R.id.login_container));

        showLoginViews();

        LayoutTransition layoutTransition = mContainer.getLayoutTransition();
        layoutTransition.enableTransitionType(LayoutTransition.CHANGING);

        return view;
    }

    /**
     * Show the view elements for Login mode
     */
    private void showLoginViews() {

        LayoutInflater li = (LayoutInflater)getActivity().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);

        // Configure the toggle button to navigate to Activate Account mode
s        TextView toggleButton = (TextView)mContainer.findViewById(R.id.button_toggle_mode);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LoginFragment.this.showActivateAccountViews();
            }
        });
        toggleButton.setText(getResources().getString(R.string.action_activate_account));

        // Hide the Member ID EditText
        ((LinearLayout)mContainer.findViewById(R.id.member_id_holderlayout)).removeView(mContainer.findViewById(R.id.member_id_inputlayout));
    }

    /**
     * Show view elements for Activate Account mode
     */
    private void showActivateAccountViews() {
        LayoutInflater li = (LayoutInflater)getActivity().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);

        // Configure the primary button for the primary action - Activate Account
        Button activateAccountButton = (Button)mContainer.findViewById(R.id.button_login_fragment_primary_action);

        // Add the Member ID EditText
        ((LinearLayout)mContainer.findViewById(R.id.member_id_holderlayout)).addView(li.inflate(R.layout.login_member_id_element_layout, (ViewGroup) mContainer.findViewById(R.id.member_id_inputlayout), false));

        // Configure the toggle button to navigate to Login mode
        TextView toggleButton = (TextView)mContainer.findViewById(R.id.button_toggle_mode);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LoginFragment.this.showLoginViews();
            }
        });
        toggleButton.setText(getResources().getString(R.string.action_login));
    }
}

login_member_id_element_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/member_id_inputlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/editText_member_id_field"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/member_id" />

</android.support.design.widget.TextInputLayout>

login_fragment.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:id="@+id/login_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--placeholder for TextInputLayout to be dynamically added at runtime-->
        <LinearLayout
            android:id="@+id/member_id_holderlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!-- a login_member_id_element_layout can be dynamically added/removed here at runtime-->
        </LinearLayout>


        <!--TextInputLayout for static fields, the EditText is not removed at runtime-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/email_inputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/member_id_holderlayout">

            <EditText
                android:id="@+id/editText_email_field"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:drawablePadding="@dimen/edittext_drawable_padding"
                android:drawableStart="?emailIcon"
                android:focusable="true"
                android:hint="Email"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>

    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

Add/remove EditText to/from TextInputLayout

Add/remove EditText to/from TextInputLayout

android

android-layout

android-view

android-design-library

android-textinputlayout