Kotlin学习日志（六）控件使用
前言
学习最重要的就是坚持了，笨鸟多飞，业精于勤荒于嬉，学如逆水行舟，不进则退。前面学了那么多关于函数、语法、类这些知识，确实是比较枯燥，但却是有必要的，因为这些都是在进行业务实现需要的，举个例子，常规功能，登录。你有想过需要哪些业务逻辑处理吗？你不会以为输入账号密码就没事了吗？当然不是，登录首先是页面的布局处理，通常的是输入框和按钮的搭配，当然有的会有图形验证码，手势验证码，或者滑动验证等验证手段，最简单的就是只有账号和密码的登录，但是账号和密码也是要做限制的，登录的时候首先做非空判断，输入类型限制，比如账号指定是纯数字、还是数字加字母，一般来说是纯数字的，纯数字要限制多少位数，如果是手机号的话需要用正则表达式来验证是否为正规的手机号，总不能你输入个13888888888，我都能让你登录上去吧，那这个程序员也要开除，其次就是登录的时候与后台的数据库进行查询对比，假如没有这个手机号是不是还要先注册呢？然后密码当然不能明文显示，也不能明文传输啊，也不能是纯数字或者纯字母，特殊符号什么的，这里又涉及到了密码的安全登录，常见的是三级，纯数字是不行的，这一步你在注册的时候就过不去，然后是最短和最长的密码位数限制，一般来说最短8位最长18位，然后就是传输过程加密，后台对比数据库的值是否一致，一致再允许登录，进一步的出来就是登录过程中的网络处理了，网络请求多长时间，网络异常，等一些问题的处理，但是在用户眼里就是一个简单的登录而已，所以任何功能的设定都没有你实际看上去的那么简单，如果你想的过于简单的话，都不用到客户，测试就能玩死你，你信不信？好了，废话说的有点多了，接下来进入正题，Kotlin中控件的的使用。
快捷查看
一、简单控件使用
我们之后写示例的时候用到最多的控件就是按钮Button了。
1.1 按钮Button
Button是Android常用的控件之一，我在前面的文章就提到过Button Kotlin学习日志（一）TextView、Button、Toast的使用 我们看一下使用的代码。
btn_test.setOnClickListener { btn_test.text = "您点了一下下" }有没有很熟悉的感觉呢？而长按事件处理和点击事件差不太多，只要在长按代码末尾加上true的返回，就可以了，代码如下：
btn_test.setOnLongClickListener { btn_test.text="您长按了一小下下";true }上面的两种按钮事件代码其实是简化最彻底的表达形式，因为点击事件和长按时间本身存在输入参数，它们的入参是发生了点击和长按动作的视图对象，所以完整的事件处理代码应当保留视图对象这个输入参数。只不过由于多数情况用不到视图对象，因此在Kotlin中把冗余的视图入参给省略了，但是为了弄清楚按钮事件的来龙去脉，还是有必要观察一下它的本来面貌，接下来依次介绍按钮事件的三种Kotlin编码方式:匿名函数、内部类、接口实现。
1. 匿名函数方式
//点击事件第一种：匿名函数方式
btn_test.setOnClickListener { v ->
//Kotlin对变量进行类型转换的关键字as
toast("您点击了控件：${(v as Button).text}")
}从上面的代码可以得出，点击事件的函数代码被符号“ ->” 分成两部分：前一部分的“v” 表示发生了点击动作的视图入参，其类型为View，后一部分则为处理点击事件的具体函数体代码。此时的函数体代码中还有两个值得注意的地方： （1）因为视图View是基本的视图类型，并不存在文本属性，所以需要把这个视图对象的变量类型转换为按钮Button，然后才能得到按钮对象的文本，Kotlin中的类型转换通过关键字as实现的，具体的转换格式形如“待转换的变量名称 as 转换后的类型名称”。 （2）由于待显示的字符串需要拼接按钮文本，因此需要通过字符串模板表达式"${***} "将按钮文本置于该字符串。
2. 内部类方式
对于包含较多行代码的事件处理，往往给它定义一个内部类，这样该事件的处理代码被完全封装在内部类之中，能够有效增强代码的可读性。下面给按钮的点击和长按事件分别定义内部类，代码如下：
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类的所有成员属性和成员方法。下面是示例代码：
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： 布局代码如下：
<?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>代码
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方法来注册该监听器。下面是使用示例： 布局代码：
<?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中：
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的控制，就不过多的啰嗦了，布局代码：
<?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代码中:
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很简单呢？但实际并不简单，比如常见的文字跑马灯效果，一行文本的内容太多，导致无法完全显示，但也不想分行显示，于是就有这个跑马灯效果了。 下面用代码来展示一下吧： 布局代码：
<?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代码：
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
}
}
}运行效果图：
刚才注意到这样一行代码：
tv_marquee.gravity = Gravity.LEFT or Gravity.CENTER在Java中是
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 |
然后代码来演示一遍 布局文件
<?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代码
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,它可以实时监控用户的输入字符，并且支持在输入每个字符时由开发者进行手工干预，从而实现随时校验，随时加工的功能。下面用代码来演示一下：
布局文件：
<?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>使用代码
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位
以上皆是控件的简单用法，并且只介绍了常规的控件，并不完全后续可能还有增加。
- Python标准库05 存储对象 (pickle包，cPickle包)
- macOS平台下虚拟摄像头的研发总结
- 网页优化系列三：使用压缩后置viewstate
- 网页优化系列三：使用压缩后置viewstate
- macOS下利用dSYM文件将crash文件中的内存地址转换为可读符号
- 微信小程序的大动作
- Python标准库04 文件管理 (部分os包，shutil包)
- 手把手教你Dojo入门
- location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能
- 协议森林01 邮差与邮局 (网络协议概观)
- Mac OS平台下应用程序安装包制作工具Packages的使用介绍
- 协议森林02 小喇叭开始广播 (以太网与WiFi协议)
- 信号与频谱
- Mac OS平台下应用程序安装包制作工具Packages的使用介绍（补充）
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php菜单/评论数据递归分级算法的实现方法
- 关于laravel5.5的定时任务详解(demo)
- 用PHP做了一个领取优惠券活动的示例代码
- Laravel 自定命令以及生成文件的例子
- 深入了解Python 变量作用域
- Laravel5.5 数据库迁移:创建表与修改表示例
- python代码能做成软件吗
- php适配器模式简单应用示例
- Python 解析简单的XML数据
- Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
- Python分类测试代码实例汇总
- Swoole 5将移除自动添加Event::wait()特性详解
- laravel 数据验证规则详解
- JS操作XML中DTD介绍及使用方法分析
- PHP设计模式之迭代器（Iterator）模式入门与应用详解