Kotlin学习日志（六）控件使用（下）-阿里云开发者社区

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赋值，如下表所示：

然后代码来演示一遍

布局文件

<?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的方法调用，这里用一个表来进行说明：

实际的业务逻辑操作中，很多是在输入的过程中对输入值进行判断，对于输入时的控制通过文本观察器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位

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

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

1.4 开关按钮Switch

1.5 文本视图TextView

1.6 图像视图ImageView

1.7 文本编辑框EditText

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

1.4 开关按钮Switch

1.5 文本视图TextView

1.6 图像视图ImageView

1.7 文本编辑框EditText

热门文章

最新文章

相关课程

相关电子书

相关实验场景