Kotlin学习日志（六）控件使用

前言

学习最重要的就是坚持了，笨鸟多飞，业精于勤荒于嬉，学如逆水行舟，不进则退。前面学了那么多关于函数、语法、类这些知识，确实是比较枯燥，但却是有必要的，因为这些都是在进行业务实现需要的，举个例子，常规功能，登录。你有想过需要哪些业务逻辑处理吗？你不会以为输入账号密码就没事了吗？当然不是，登录首先是页面的布局处理，通常的是输入框和按钮的搭配，当然有的会有图形验证码，手势验证码，或者滑动验证等验证手段，最简单的就是只有账号和密码的登录，但是账号和密码也是要做限制的，登录的时候首先做非空判断，输入类型限制，比如账号指定是纯数字、还是数字加字母，一般来说是纯数字的，纯数字要限制多少位数，如果是手机号的话需要用正则表达式来验证是否为正规的手机号，总不能你输入个13888888888，我都能让你登录上去吧，那这个程序员也要开除，其次就是登录的时候与后台的数据库进行查询对比，假如没有这个手机号是不是还要先注册呢？然后密码当然不能明文显示，也不能明文传输啊，也不能是纯数字或者纯字母，特殊符号什么的，这里又涉及到了密码的安全登录，常见的是三级，纯数字是不行的，这一步你在注册的时候就过不去，然后是最短和最长的密码位数限制，一般来说最短8位最长18位，然后就是传输过程加密，后台对比数据库的值是否一致，一致再允许登录，进一步的出来就是登录过程中的网络处理了，网络请求多长时间，网络异常，等一些问题的处理，但是在用户眼里就是一个简单的登录而已，所以任何功能的设定都没有你实际看上去的那么简单，如果你想的过于简单的话，都不用到客户，测试就能玩死你，你信不信？好了，废话说的有点多了，接下来进入正题，Kotlin中控件的的使用。

快捷查看

• 前言
• 一、简单控件使用
• ​
  • 1.1 按钮Button
  • ​
    • 1. 匿名函数方式
    • 2. 内部类方式
    • 3. 接口实现方式
  • 1.2 复选框CheckBox
  • 1.3 单选按钮RadioButton
  • 1.4 开关按钮Switch
  • 1.5 文本视图TextView
  • 1.6 图像视图ImageView
  • 1.7 文本编辑框EditText

一、简单控件使用

我们之后写示例的时候用到最多的控件就是按钮Button了。

1.1 按钮Button

Button是Android常用的控件之一，我在前面的文章就提到过Button

Kotlin学习日志（一）TextView、Button、Toast的使用

我们看一下使用的代码。

代码语言：javascript复制

btn_test.setOnClickListener { btn_test.text = "您点了一下下" }

有没有很熟悉的感觉呢？而长按事件处理和点击事件差不太多，只要在长按代码末尾加上true的返回，就可以了，代码如下：

代码语言：javascript复制

btn_test.setOnLongClickListener { btn_test.text="您长按了一小下下";true }

上面的两种按钮事件代码其实是简化最彻底的表达形式，因为点击事件和长按时间本身存在输入参数，它们的入参是发生了点击和长按动作的视图对象，所以完整的事件处理代码应当保留视图对象这个输入参数。只不过由于多数情况用不到视图对象，因此在Kotlin中把冗余的视图入参给省略了，但是为了弄清楚按钮事件的来龙去脉，还是有必要观察一下它的本来面貌，接下来依次介绍按钮事件的三种Kotlin编码方式:匿名函数、内部类、接口实现。

1. 匿名函数方式

代码语言：javascript复制

		//点击事件第一种：匿名函数方式
        btn_test.setOnClickListener { v ->
            //Kotlin对变量进行类型转换的关键字as
            toast("您点击了控件：${(v as Button).text}")
        }

从上面的代码可以得出，点击事件的函数代码被符号“ ->” 分成两部分：前一部分的“v” 表示发生了点击动作的视图入参，其类型为View，后一部分则为处理点击事件的具体函数体代码。此时的函数体代码中还有两个值得注意的地方：

（1）因为视图View是基本的视图类型，并不存在文本属性，所以需要把这个视图对象的变量类型转换为按钮Button，然后才能得到按钮对象的文本，Kotlin中的类型转换通过关键字as实现的，具体的转换格式形如“待转换的变量名称 as 转换后的类型名称”。

（2）由于待显示的字符串需要拼接按钮文本，因此需要通过字符串模板表达式"${***} "将按钮文本置于该字符串。

2. 内部类方式

对于包含较多行代码的事件处理，往往给它定义一个内部类，这样该事件的处理代码被完全封装在内部类之中，能够有效增强代码的可读性。下面给按钮的点击和长按事件分别定义内部类，代码如下：

代码语言：javascript复制

package com.llw.kotlinstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import com.llw.kotlinstart.custom_class.*
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.longToast
import org.jetbrains.anko.toast

class MainActivity : AppCompatActivity() {

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

        //点击事件第二种:内部类方式
        btn_test.setOnClickListener(MyClickListener())//点击
        btn_test.setOnLongClickListener(MyLongClickListener())//长按
    }
    
    //点击事件第二种：内部类方式,还记得inner吗,内部类就是在class前面加上inner
    private inner class MyClickListener:View.OnClickListener{
        override fun onClick(v: View?) {
            toast("您点击了控件:${(v as Button).text}")
        }
    }
    
    private inner class MyLongClickListener:View.OnLongClickListener{
        override fun onLongClick(v: View): Boolean {
            longToast("您长按了控件：${(v as Button).text}")
            return true
        }
    }
    

}

3. 接口实现方式

内部类方式固然使事件代码更加灵活，可如果每个事件都定义新的内部类，要是某个页面上有多个控件都需要监听对应的事件处理，那页面上的代码就会很多，为了解决这个问题，第三种方式➖接口实现方式边应运而生,该方式让页面的Activity类实现事件监听器的接口，并重写监听器的接口方式，使得那些接口方法就像是Activity类的成员方法一样，并且可以毫无障碍地访问该Activity类的所有成员属性和成员方法。下面是示例代码：

代码语言：javascript复制

package com.llw.kotlinstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import com.llw.kotlinstart.custom_class.*
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.longToast
import org.jetbrains.anko.toast

class MainActivity : AppCompatActivity(), View.OnClickListener, View.OnLongClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //点击事件第三种：Activity实现接口
        btn_test.setOnClickListener(this)
        btn_test.setOnLongClickListener(this)

    }

    //点击事件第三种：Activity实现接口
    override fun onClick(v: View) {
        if (v.id == R.id.btn_test) {
            toast("您点击了控件:${(v as Button).text}")
        }
    }

    override fun onLongClick(v: View): Boolean {
        if (v.id == R.id.btn_test) {
            longToast("您长按了控件：${(v as Button).text}")
        }
        return true
    }


}

1.2 复选框CheckBox

复选框用于检查有没有选中的控件，只有两种情况，选中和未选中。也就是true和false,在学习复选框的用法之前，先了解一下复合按钮CompoundButton的概念，在Android体系中，CompoundButton是抽象的复合按钮，因为是抽象类，所以不能直接使用，而我们实际开发中用的是它的几个派生类，如复选框CheckBox、单选按钮RadioButton单选按钮、Switch开关按钮，这些派生类均可使用CompoundButton的属性和方法。

在Java中，复合按钮CompoundButton的勾选状态有两个，setChecked和isChecked，前者用于设置是否勾选，后者用于判断是否勾选，但在Kotlin中这两个方法被统一成了isChecked属性，修改isChecked的属性即为设置是否勾选，而获取isChecked的属性值即为判断是否勾选，这种合二为一的情况还有一些，如下表：

按钮控件的属性说明	Kotlin的状态属性	Java的状态获取与设置方式
是否勾选	isChecked	isChecked/setChecked
是否允许点击	isClickable	isClickable/setClickable
是否可用	isEnabled	isEnabled/setEnabled
是否获得焦点	isFocusable	isFocusable/setFocusable
是否按下	isPressed	isPressed/setPressed
是否允许长按	isLongClickable	isLongClickable/setLongClickable
是否选择	isSelected	isSelected/setSelected

下面来使用一下这个CheckBox：

布局代码如下：

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    
    <CheckBox
        android:id="@ id/ck_select"
        android:text="这是一个复选框"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_marginTop="20dp"
        android:textColor="#000"
        android:id="@ id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

代码

代码语言：javascript复制

package com.llw.kotlinstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        ck_select.isChecked = false //默认未选中
        ck_select.setOnCheckedChangeListener { buttonView, isChecked ->
            tv_result.text = "您${if (isChecked) "勾选" else "取消勾选"}了复选框"
        }

    }

}

运行效果图：

有一说一，Android默认的控件颜色是真的辣眼睛。

1.3 单选按钮RadioButton

单选按钮要在一组按钮中选择其中一项，并且不能多选，这要求有个容器确定这组按钮的范围，这个容器便是单选组RadioGroup，单选组RadioGroup实质上是一个布局，同一组的RadioButton都要放在同一个RadioGroup节点之下，RadioGroup拥有orientation属性，可指定下级控件的排列方向，该属性为horizontal时，单选按钮就在水平方向上排列，该属性为vertical时，单选按钮就在垂直方向上排列，并且RadioGroup下面除了RadioButton外，也可以挂载其他子控件，如TextView、ImageView等，这样看来，它就是一个特殊的线性布局，只不过多了一个管理单选按钮的功能。

单选按钮RadioButton默认是未选中状态，点击它则显示选中状态，但是再次点击并不会取消选择，只有点击同组的其他单选按钮，原来选中的单选按钮才会被取消选中。另外，单选按钮的选中时间一般不由RadioButton相应，而是由RadioGroup来响应。单选按钮的选中事件在实现的时候，首先写一个选中监听器实现接口RadioGroup.OnCheckedChangeListener,然后调用RadioGroup对象的setOnCheckedChangeListener方法来注册该监听器。下面是使用示例：

布局代码：

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:textColor="#000"
        android:text="请选择您的性别"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <RadioGroup
	    android:id="@ id/rg_sex"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@ id/rb_male"
            android:text="男"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>

        <RadioButton
            android:id="@ id/rb_female"
            android:text="女"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <TextView
        android:id="@ id/tv_sex"
        android:layout_marginTop="20dp"
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

Activity中：

代码语言：javascript复制

package com.llw.kotlinstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        rg_sex.setOnCheckedChangeListener { group, checkedId ->
            tv_sex.text = when (checkedId) {
                R.id.rb_male -> "靓仔啊"
                R.id.rb_female -> "靓女啊"
                else -> ""
            }
        }
    }

}

运行效果图：

1.4 开关按钮Switch

这个Switch其实和就是true和false的控制，就不过多的啰嗦了，布局代码：

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:textColor="#000"
        android:text="请选择开关"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Switch
        android:id="@ id/switch_open"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    

    <TextView
        android:id="@ id/tv_switch"
        android:layout_marginTop="20dp"
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

Activity代码中:

代码语言：javascript复制

package com.llw.kotlinstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        switch_open.setOnCheckedChangeListener { buttonView, isChecked ->
            tv_switch.text = if (isChecked) "打开 开关" else "关闭 开关"
        }
    }

}

运行效果图：

1.5 文本视图TextView

有没有人觉得TextView很简单呢？但实际并不简单，比如常见的文字跑马灯效果，一行文本的内容太多，导致无法完全显示，但也不想分行显示，于是就有这个跑马灯效果了。

下面用代码来展示一下吧：

布局代码：

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@ id/cl_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:textSize="14sp"
        android:padding="10dp"
        android:text="跑马灯效果，点击暂停，再点击恢复"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_marginTop="20dp"
        android:id="@ id/tv_marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:textSize="18sp"
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Activity代码：

代码语言：javascript复制

package com.llw.kotlinstart

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.TextUtils
import android.view.Gravity
import android.view.View
import android.widget.LinearLayout
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.constraintlayout.widget.ConstraintLayout
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.above
import org.jetbrains.anko.alignParentLeft
import org.jetbrains.anko.dip

class MainActivity : AppCompatActivity() {

    private var bPause = false

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

        tv_marquee.text = "富强   民主   文明   和谐   自由   平等   公正   法治"  
                "   爱国   敬业   诚信   友善"
        tv_marquee.gravity = Gravity.LEFT or Gravity.CENTER
        tv_marquee.ellipsize = TextUtils.TruncateAt.MARQUEE//从右往左滚动的跑马灯
        tv_marquee.setSingleLine(true)//单行显示
        tv_marquee.setOnClickListener {
            bPause = !bPause
            tv_marquee.isFocusable = if(bPause) false else true
            tv_marquee.isFocusableInTouchMode = if(bPause) false else true
        }

    }





}

运行效果图：

刚才注意到这样一行代码：

代码语言：javascript复制

tv_marquee.gravity = Gravity.LEFT or Gravity.CENTER

在Java中是

代码语言：javascript复制

tv_marquee.gravity = Gravity.LEFT | Gravity.CENTER

这是位运算符的区别

1.6 图像视图ImageView

图像视图是另一种常用的基本控件。图像视图ImageView在代码中调用的方法说明如下：

• setImageDrawable : 设置图形的Drawable对象。
• setImageResource : 设置图形的资源ID。
• setImageBitmap : 设置图形的位图对象。
• setScaleType : 设置图形的拉伸类型，在Kotlin中可直接给属性scaleType赋值，如下表所示：
• ​

scaleType类的拉伸类型	说明
ScaleType.FIT_XY	拉伸图片使之正好填满视图(图片可能被拉伸变形)
ScaleType.FIT_START	拉伸图片使之位于视图上部
ScaleType.FIT_CENTER	拉伸图片使之位于视图中间
ScaleType.FIT_END	拉伸图片使之位于视图下部
ScaleType.CENTER	保持图片原尺寸，并使之位于视图中间
ScaleType.CENTER_CROP	拉伸图片使之充满视图，并位于视图中间
ScaleType.CENTER_INSIDE	使图片位于视图中间(只压不拉)，当图片尺寸大于视图时，centerInside等同于fitCenter：当图片尺寸小于视图时，centerInside等同于center

然后代码来演示一遍

布局文件

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@ id/iv_img"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

    <TextView
        android:layout_marginTop="20dp"
        android:id="@ id/tv_info"
        android:text="原图"
        android:textColor="#000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <LinearLayout
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@ id/btn_center"
            android:text="Center"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@ id/btn_fit_center"
            android:text="Fit Center"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@ id/btn_center_crop"
            android:text="Center Crop"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@ id/btn_center_inside"
            android:text="Center Inside"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout

        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@ id/btn_fit_xy"
            android:text="Fit XY"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@ id/btn_fit_start"
            android:text="Fit Start"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@ id/btn_fit_end"
            android:text="Fit End"
            android:textAllCaps="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

Activity代码

代码语言：javascript复制

package com.llw.kotlindemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        iv_img.setImageResource(R.mipmap.logo)//代码中设置图片

        //按钮控制图片展示方式
        btn_center.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.CENTER;tv_info.text = "CENTER" }

        btn_fit_center.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.FIT_CENTER;tv_info.text = "FIT_CENTER" }

        btn_center_crop.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.CENTER_CROP;tv_info.text = "CENTER_CROP" }

        btn_center_inside.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.CENTER_INSIDE;tv_info.text = "CENTER_INSIDE" }

        btn_fit_xy.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.FIT_XY;tv_info.text = "FIT_XY" }

        btn_fit_start.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.FIT_START;tv_info.text = "FIT_START" }

        btn_fit_end.setOnClickListener { iv_img.scaleType = ImageView.ScaleType.FIT_END;tv_info.text = "FIT_END" }
    }
}

运行效果：

这里我选了几张又代表性的

当然这些效果你也可以直接在布局文件中写好

这里设置也是一样的效果。

1.7 文本编辑框EditText

文件编辑框通俗的说就是输入框，在实际的开发中应用广泛，基本每一个APP都会有，常见的在一些登录、注册、个人信息编辑的地方使用，EditText是可以限制用户的输入方式的，比如手机号，就限制你只能输入数字，并且点击之后弹出数字键盘，而不是默认的文字键盘。通过setInputType方法，可以过滤合法的输入字符，只有符合输入类型的字符，才允许接收并显示出来，而Kotlin可以直接给inputType属性设置输入类型,从而取代setInputType的方法调用，这里用一个表来进行说明：

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

实际的业务逻辑操作中，很多是在输入的过程中对输入值进行判断，对于输入时的控制通过文本观察器TextWatcher,它可以实时监控用户的输入字符，并且支持在输入每个字符时由开发者进行手工干预，从而实现随时校验，随时加工的功能。下面用代码来演示一下：

布局文件：

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@ id/et_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <TextView
        android:layout_marginTop="20dp"
        android:id="@ id/tv_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

使用代码

代码语言：javascript复制

package com.llw.kotlindemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.InputType
import android.text.TextWatcher
import android.widget.ImageView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        //EditText的控件赋值不能像TextView那样，通过text来进行赋值
        //否则会报错Editable与String类型不匹配,只能调用setText方法对EditText控件设置文本
        et_phone.setText("")
        //显示明文数字
        et_phone.inputType = InputType.TYPE_CLASS_NUMBER
        //显示明文密码
        //et_phone.inputType = InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
        //隐藏密码
        //et_phone.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD

        //给输入框添加文本变化监听器
        et_phone.addTextChangedListener(EditWatcher())
    }

    private inner class EditWatcher: TextWatcher{
        //输入之前
        override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, before: Int) {}
        //输入中
        override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}
        //输入之后
        override fun afterTextChanged(s: Editable) {
            var str = s.toString()//获取输入之后的文本
            if(str.indexOf("r") >= 0 || str.indexOf("n") >= 0){
                //去掉回车符和换行符  将回车符和换行符都替换成 "" 空字符串
                str = str.replace("r","").replace("n","")
            }
            if (str.length >= 11){
                tv_phone.text = "您输入的手机号码是：$str"
            }
        }


    }
}

运行效果图：

输入未到11位

到11位或者大于11位

以上皆是控件的简单用法，并且只介绍了常规的控件，并不完全后续可能还有增加。

编程算法 kotlin textview android

0 人点赞