Kotlin笔记(38) — EditText用法

前言

在Android开发过程中，我们有时会用到输入框EditText。这节就让我们来学习下EditText的使用吧。

今天涉及到的知识有：

1. EditText常见输入类型汇总
2. EditText在Activity中使用
3. 效果图和项目结构图

先来波效果图

效果图.gif

一.EditText常见输入类型汇总

EditText作为一个输入框，拥有很多输入类型，下面列出常用的输入类型：

InputType输入类型	说明
InputType.TYPE_CLASS_TEXT	所有文本
InputType.TYPE_CLASS_NUMBER	只能输入数字
InputType.TYPE_CLASS_DATETIME	只能是日期时间
InputType.TYPE_TEXT_VARIATION_NORMAL	正常显示
InputType.TYPE_TEXT_VARIATION_PASSWORD	密文显示
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD	明文显示

当然，我们在实际开发中，涉及到了输入类型绝不仅仅是以上列出的几项，更多类型大家可以看相关AIP，这里就不做详细讲解了。

二. EditText在Activity中使用

下面以监听EditText输入11位数的电话号码为例，在Activity中代码如下：

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
open class MainActivity : AppCompatActivity(), View.OnClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initData()
        setListener()
    }

    private fun initData() {
//        //显示明文密码
//        mEdit.inputType=InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
//        //隐藏密码
//        mEdit.inputType=InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD

        //显示数字
        mEdit.inputType=InputType.TYPE_CLASS_NUMBER
    }

    private fun setListener() {
        mBtnTest.setOnClickListener(this@MainActivity)

        //输入监听
        mEdit.addTextChangedListener(object:TextWatcher{
            override fun beforeTextChanged(charSequence: CharSequence?, start: Int, count: Int, after: Int) {

            }

            override fun onTextChanged(charSequence: CharSequence?, start: Int, before: Int, count: Int) {

            }

            override fun afterTextChanged(editable: Editable) {
                var content:String=editable.toString()
                if(content.contains("\r")||content.contains("\n")){
                    //去掉回车与换行
                    content=content.replace("\r","").replace("\n","")
                }

                mTvTest.text = if (content.length == 11) {
                    "电话号码为: $content"
                } else {
                    "电话号码为:"
                }

            }
        })

    }

    override fun onClick(v: View) {
       when(v.id){
           R.id.mBtnTest->toast("=====han")
       }
    }
}

对应布局activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    android:background="@color/color_f2f2f2"
    tools:context=".ui.MainActivity">

    <TextView
        android:id="@+id/mTvTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:text="测试"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/mEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLength="11"
        android:minWidth="120dp"
        android:layout_marginTop="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTvTest"
        android:textSize="16sp"
        android:textColor="@color/black"/>

    <Button
        android:id="@+id/mBtnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="测试"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mEdit" />

</androidx.constraintlayout.widget.ConstraintLayout>

三.效果图和项目结构图

效果图.gif 项目结构图.png

ok,今天的内容就介绍到这里了，谢谢大家。