安卓学习笔记之八：界面布局及简单控件（Kotlin版本）

创建一个Kotlin项目，学习尝试一些界面布局和简单控件使用方面的知识。

创建一个Kotlin项目

创建一个Empty Views Activity项目

 主活动程序文件MainActivity.kt很简单：

package com.example.uidemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

添加一个图文框和两个按钮

总布局窗口，通过垂直和水平辅助线添加

加入一根垂直辅助线

采用百分比标识，中心即50%

在加一条10%的水平辅助线

以屏幕左右边界和这条水平辅助线为基准，重新定义HelloWord图文框。

这个Text View的最终定义可以在主布局文件activity_main.xml中可以看到：

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textview"
        android:textSize="34sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

再加一条20%的水平辅助线

以屏幕左边界和中心辅助线，以及这条水平辅助线为基准，加一个按钮值为“Lift”；以中心辅助线和屏幕右边界，以及这条水平辅助线为基准，加一个按钮值为“Right”；

 这两个Buttion的最终定义可以在主布局文件activity_main.xml中可以看到：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button1"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.421"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

 采用百分比而不用像素来标识的水平辅助线绑定控件的好处，既可以适配各种型号的手机，又可以方便地平移调整控件的位置。还有就是能够使得应用更好地支持两种屏幕方式。

屏幕方式是在项目目录下的app\src\main\AndroidManifest.xml中定义，可以选只支持其中的一种：android:screenOrientation="landscape" 或者android:screenOrientation="portrait"

处理按钮点击，变换图文框的显示内容

代码如下：

        val display : TextView = findViewById(R.id.textview)
        val leftButton: Button = findViewById(R.id.button1)
        val rightButton: Button = findViewById(R.id.button2)

        leftButton.setOnClickListener(){
            display.setText(R.string.button1)
        }
        rightButton.setOnClickListener(){
            display.setText(R.string.button2)
        }

运行效果如下：

添加一个开关

开关的定义可以在主布局文件activity_main.xml中可以看到：

    <Switch
        android:id="@+id/switch1"
        android:layout_width="134dp"
        android:layout_height="50dp"
        android:text="@string/lightOut"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline4" />

在 UIDemo\app\src\main\res\values下增加三个string：

开关处理代码如下，拨动开关，文本框相应改变：

        val aswitch: Switch = findViewById(R.id.switch1)

        aswitch.setOnCheckedChangeListener { compoundButton, b ->
            if(b)
                display.setText(R.string.lightOn)
            else
                display.setText(R.string.lightOff)
        }

 仿真效果如下：

 添加一个圆形进度条， 一个长形进度条

圆形进度条会一直转圈。

长形进度条的属性indeterminate设为true，让它滚动起来。

这里只做演示，没有相关处理代码。

添加一个长形进度条，数值输入框和确认按钮

让进度条进度指示符合输入的数字

相应代码：

        val button3: Button = findViewById(R.id.button3)
        val progressBar: ProgressBar = findViewById(R.id.progressBar3)
        val editText: EditText = findViewById(R.id.editTextNumber)

        button3.setOnClickListener {
            val str = editText.text.toString()
            if(TextUtils.isEmpty(str)){
                progressBar.setProgress(Integer.valueOf("0"))
                display.setText("0")
            }else{
                progressBar.setProgress(Integer.valueOf(str))
                display.setText(str)
            }
        }

添加Radio按钮组

包括两个Radio按钮，一个显示为andriod（checked为true），一个显示为apple。

在右边添加一个图形框，点击radio按钮变换事先在UIDemo\app\src\main\res\drawable下面准备好的图形。

 

代码如下：

    val radioGroup: RadioGroup = findViewById(R.id.radioGroup)
        val imageView: ImageView = findViewById(R.id.imageView)
        radioGroup.setOnCheckedChangeListener { group, checkedId ->
            if(checkedId == R.id.radioButton) {
                imageView.setImageResource(R.drawable.adriod)
                display.setText(R.string.radiobutton1)
            }
            else {
                imageView.setImageResource(R.drawable.apple)
                display.setText(R.string.radiobutton2)
            }
        }

添加三个checkBox

水平中心对齐align，垂直中心串联chain.

添加一个五星RatingBar，并用Toast方式显示评分

仿真效果如下：

 

对应代码： 

        val ratingBar: RatingBar = findViewById(R.id.ratingBar)
        lateinit var toastText:String
        ratingBar.setOnRatingBarChangeListener{ratingBar, v, b ->
            toastText = v.toString()
            Toast.makeText(applicationContext, toastText ,Toast.LENGTH_SHORT).show()
        }