将 TextInputEditText 的宽度设置为 n 个字符

Question

我正在尝试实现一种布局，用户可以在其中输入他们的电话号码。电话号码将为 11 位数字。所以我想构建一个固定宽度的文本输入字段，可以容纳 11 个字符。

注意：我不希望输入字段超过 11 个字符。假设每个字符的宽度为 10 像素。所以输入字段的宽度应该是 11*10px = 110px（我在这里没有考虑可绘制图标）。

这是我在 XML 中尝试过的：

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textField"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margin_48"
                app:startIconDrawable="@drawable/ic_phone">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/phone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ems="11"
                    android:inputType="phone"
                    android:maxLength="11"
                    android:maxLines="1"
                    android:minEms="11"
                    android:text="01"
                    android:textSize="20sp"
                    android:typeface="monospace" />
            </com.google.android.material.textfield.TextInputLayout>

但这会产生如下所示的输出：

如您所见，尽管使用了 ems 和 minEms，该字段为 2字符宽（如果我不添加 android:text，则为 0 个字符宽）。但我希望它的宽度为 11 个字符（不多或更少）。为什么 ems 在这里不起作用以及解决方案是什么？

Answer 1

对我来说，给出的答案不起作用。但这做到了：

<com.google.android.material.textfield.TextInputLayout
  ...
  android:maxEms="12"
  minEms="12">

    <com.google.android.material.textfield.TextInputEditText
    ...
    singleLine="true">
</com.google.android.material.textfield.TextInputLayout>

Answer 2

只需编辑您的布局宽度

从

  android:layout_width="wrap_content"

到

   android:layout_width="match_parent"

我刚刚编辑了您的代码

        <com.google.android.material.textfield.TextInputLayout
       

         android:id="@+id/textField"
                    
            
            
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/margin_48"
                    app:startIconDrawable="@drawable/ic_phone">
    
                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/phone"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ems="11"
                        android:inputType="phone"
                        android:maxLength="11"
                        android:maxLines="1"
                        android:minEms="11"
                        android:text="01"
                        android:textSize="20sp"
                        android:typeface="monospace" />
                </com.google.android.material.textfield.TextInputLayout>

Answer 3

您应该在 TextInputEditText 小部件中设置 11 位数字等宽文本（例如 12345678901），然后在片段中定义一个 ViewTreeObserver.OnGlobalLayoutListener，当布局可供测量时计算宽度。

您可以在片段的 onResume() 中实例化观察者，并在 onPause() 中将其删除。您还应该存储活动旋转期间的宽度。

下面是一个完整的工作示例：

MainActivity.java：

public class MainActivity extends AppCompatActivity {

    ConstraintLayout constraintLayout;
    TextInputEditText textInputEditText;
    int viewWidth;

    ViewTreeObserver.OnGlobalLayoutListener viewTreeObserver = new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                constraintLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                constraintLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            viewWidth = textInputEditText.getMeasuredWidth();
            textInputEditText.setWidth(viewWidth);
            textInputEditText.setText("");
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (savedInstanceState != null) {
            viewWidth = savedInstanceState.getInt("viewWidth", 0);
        }

        constraintLayout = findViewById(R.id.id_constraintlayout);
        textInputEditText = findViewById(R.id.phone);
    }

    @Override
    public void onSaveInstanceState(Bundle savedInstanceState) {
        super.onSaveInstanceState(savedInstanceState);
        savedInstanceState.putInt("viewWidth", viewWidth);
    }

    @Override
    public void onResume() {
        super.onResume();
        if (viewWidth == 0) {
            textInputEditText.setText("12345678901");
            ViewTreeObserver vto = constraintLayout.getViewTreeObserver();
            vto.addOnGlobalLayoutListener(viewTreeObserver);
        } else textInputEditText.setWidth(viewWidth);
    }

    @Override
    public void onPause() {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
            constraintLayout.getViewTreeObserver().removeGlobalOnLayoutListener(viewTreeObserver);
        } else {
            constraintLayout.getViewTreeObserver().removeOnGlobalLayoutListener(viewTreeObserver);
        }
        super.onPause();
    }
}

activity_main.xml：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_constraintlayout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:startIconDrawable="@drawable/ic_phone">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="11"
            android:inputType="phone"
            android:maxLength="11"
            android:maxLines="1"
            android:minEms="11"
            android:textSize="20sp"
            android:typeface="monospace" />
    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我在下面附上了结果的图像，其中我已经输入了 6 位数字：