如何使用间隔的EditTexts进行布局?

时间:2017-07-03 13:44:37

标签: android android-edittext android-inputtype

我正在我的应用中实施手机验证。用户将输入4个值。这就是我需要的样子:

enter image description here

如何进行此布局?

2 个答案:

答案 0 :(得分:0)

试试这个 像这样创建布局文件

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="50dp"
    app:cardElevation="10dp"
    app:cardUseCompatPadding="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:text="Verify Number"
            android:textColor="#000000"
            android:textSize="30sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="Enter Code"
            android:textSize="20dp" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            android:layout_marginTop="20dp"
            android:orientation="horizontal"
            android:weightSum="4">

            <EditText
                android:id="@+id/edDigit1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:hint="1"
                android:imeOptions="actionNext"
                android:inputType="number"
                android:maxLength="1" />

            <EditText
                android:id="@+id/edDigit2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:hint="2"
                android:imeOptions="actionNext"
                android:inputType="number"
                android:maxLength="1" />

            <EditText
                android:id="@+id/edDigit3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:hint="3"
                android:imeOptions="actionNext"
                android:inputType="number"
                android:maxLength="1" />

            <EditText
                android:id="@+id/edDigit4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:hint="4"
                android:imeOptions="actionNext"
                android:inputType="number"
                android:maxLength="1" />

        </LinearLayout>

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="Submit"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

    </LinearLayout>

</android.support.v7.widget.CardView>

java代码

public class MainActivity extends AppCompatActivity {

    EditText edDigit1, edDigit2, edDigit3, edDigit4;
    Button btnSubmit;

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

        requestSmsPermission();

        edDigit1 = (EditText) findViewById(R.id.edDigit1);
        edDigit2 = (EditText) findViewById(R.id.edDigit2);
        edDigit3 = (EditText) findViewById(R.id.edDigit3);
        edDigit4 = (EditText) findViewById(R.id.edDigit4);
        btnSubmit = (Button) findViewById(R.id.btnSubmit);

        edDigit1.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (edDigit1.getText().toString().equals("")) {
                    edDigit1.requestFocus();
                } else {
                    edDigit2.requestFocus();
                }

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
        edDigit2.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (edDigit2.getText().toString().equals("")) {
                    edDigit2.requestFocus();
                } else {
                    edDigit3.requestFocus();
                }

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
        edDigit3.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (edDigit3.getText().toString().equals("")) {
                    edDigit3.requestFocus();
                } else {
                    edDigit4.requestFocus();
                }


            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (edDigit1.getText().toString().equals("") || edDigit2.getText().toString().equals("") ||
                        edDigit3.getText().toString().equals("") || edDigit4.getText().toString().equals("")) {
                    Toast.makeText(MainActivity.this, "Please fill all digits", Toast.LENGTH_SHORT).show();
                } else {
                    Intent i = new Intent(MainActivity.this, MyProfile.class);
                    startActivity(i);
                    Toast.makeText(MainActivity.this, "Jalsaa Karroooooooooooo", Toast.LENGTH_SHORT).show();
                }
            }
        });



    }

    private void requestSmsPermission() {
        String permission = Manifest.permission.READ_SMS;
        int grant = ContextCompat.checkSelfPermission(this, permission);
        if (grant != PackageManager.PERMISSION_GRANTED) {
            String[] permission_list = new String[1];
            permission_list[0] = permission;
            ActivityCompat.requestPermissions(this, permission_list, 1);
        }
    }
}

如果ob有任何疑问,请问我

答案 1 :(得分:0)

您可以使用属性LinearLayout的{​​{1}}创建此布局。在android:orientation="horizontal"内添加4 EditText,并为每个LinearLayout添加属性android:layout_weight="1",使其等同EditText

以下是您想要的布局:

width

<强>输出:

enter image description here

#。如果您想要<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:orientation="horizontal" android:weightSum="4"> <EditText android:id="@+id/edit_digit_one" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_margin="8dp" android:gravity="center" android:hint="0" android:inputType="number" android:maxLength="1"/> <EditText android:id="@+id/edit_digit_two" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_margin="8dp" android:gravity="center" android:hint="0" android:inputType="number" android:maxLength="1"/> <EditText android:id="@+id/edit_digit_three" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_margin="8dp" android:gravity="center" android:hint="0" android:inputType="number" android:maxLength="1"/> <EditText android:id="@+id/edit_digit_four" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_margin="8dp" android:gravity="center" android:hint="0" android:inputType="number" android:maxLength="1"/> </LinearLayout> <Button android:id="@+id/button_verify" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="verify" android:enabled="false"/> </LinearLayout> 光标moveprogrammatically VERIFY按钮,具体取决于enable/disable,请在您的活动中添加以下代码:

input

<强>输出:

enter image description here

希望这会有所帮助〜