Android开发之EditText控件（实现用户登录界面）

基本框架

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:layout_width="200dp"
        android:layout_height="100dp"/>

LinearLayout>

基本属性

EditText也继承自TextView类，所以TextView有的EditText也有。

hint

输入提示，在用户未输入时显示的文本。

textColosrHint

提示文字的颜色，一般会设置成比用户输入颜色稍淡。

inputType

输入类型，控制只能输入数字或者将输入加密不显示。

drawable系列

包含左右，在输入框的指定方位添加图片。

drawablePadding

设置图片与输入内容的间距。

padding系列

包含上下左右，设置内容与边框的间距。

background

设置背景色。

设置一个简单输入框

在基本框架的基础上，添加hint和textColor属性，将提示设置为“请输入用户名”，并把文本颜色设置成略透明的灰色，下面是两个资源代码，分别写在colors.xml和strings.xml：

<color name="gray">#AA95A1AAcolor>

<string name="hint">请输入用户名string>

在activity_main中调用他们：

<EditText
        android:hint="@string/hint"
        android:textColorHint="@color/gray"
        android:layout_width="200dp"
        android:layout_height="100dp"/>

运行之后就有了一个简单的输入框：

加入输入类型

输入类型非常多，我们可以在AS给的提示里看个大概，对哪个感兴趣就可以试一试。

比如选择phone或者number，弹出来的输入法就只有数字，通过键盘也只能输入数字：

我们还可以加个输入框用来输入密码，将输入类型选为textPassword或者numberPassword，就可以做出加密效果：

<EditText
        android:hint="@string/password_hint"
        android:textColorHint="@color/gray"
        android:inputType="textPassword"
        android:layout_width="200dp"
        android:layout_height="100dp"/>

还有非常多的其他输入模式，有时间和兴趣可以一一探索。

加入图片

先在drawable文件夹中加入图片资源，过程同这篇文章的图片变换部分。我加入了一个账户图标与一个锁图标：

要在输入框左侧加入图片，设置drawableLeft属性为对应图片，如

android:drawableLeft="@drawable/ic_baseline_account_box_24"

这下看起来就更专业了：

drawableRight同理。

此外，如果对文字和图标的间距不满意，可以通过drawablePadding设置，比如android:drawablePadding="10dp"看起来就会更顺眼一点：

边框距离调整

除了调整图片与文本间的距离，还可以调整内容与边框的距离。padding就是与四周边框的距离，加上上下左右等限制后就可以设置对应边框间距，比如设定android:paddingLeft="10dp"后，就可以看到整个内容都向右移动了：

设置背景

如果不想要输入框下面的线，可以将背景设为纯色，如

如果有专门的UI设计，还可以加入别的图片等等。

获取输入内容

要实现登录界面，一般是输入完用户名密码后点击登录，所以我们还需要加一个按钮，并且能获取到用户输入的内容。

先加个按钮，再给两个输入框和按钮都加上id方便获取

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/account"
        android:hint="@string/name_hint"
        android:textColorHint="@color/gray"
        android:drawableLeft="@drawable/ic_baseline_account_box_24"
        android:drawablePadding="10dp"
        android:paddingLeft="10dp"
        android:background="@color/white"
        android:inputType="phone"
        android:layout_width="200dp"
        android:layout_height="100dp"/>
    <EditText
        android:id="@+id/password"
        android:hint="@string/password_hint"
        android:textColorHint="@color/gray"
        android:drawableLeft="@drawable/ic_baseline_lock_24"
        android:drawablePadding="10dp"
        android:paddingLeft="10dp"
        android:inputType="textPassword"
        android:layout_width="200dp"
        android:layout_height="100dp"/>
    <Button
        android:id="@+id/loginButton"
        android:text="@string/log_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

LinearLayout>

然后，在Java代码中获取这三个控件，同时新建一个按钮的点击响应，用getText函数获取输入内容并用toString函数转化为字符串，在调试信息里打印出来：

package com.example.myedittext;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    private EditText account,password;

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

        Button loginButton=findViewById(R.id.loginButton);
        account=findViewById(R.id.account);
        password=findViewById(R.id.password);

        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String accountText = account.getText().toString();
                String passwordText = password.getText().toString();
                Log.e("ShadyPi", "输入账户"+accountText);
                Log.e("ShadyPi", "输入密码"+passwordText);
            }
        });
    }
}