Android开发基础——常用控件的使用方法

TextView

TextView可以说是Android中最简单的一个控件了，其主要用于在界面上显示一段文本信息。

"1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is TextView" />
 
LinearLayout>

比如上面的代码中，运行之后的结果为：

 虽然TextView文本的宽度是和屏幕一样宽的，但是显示出来并不觉得，这是因为TextView中的文字默认是居左上角对齐的。虽然TextView的宽度充满了整个屏幕，但是由于文字内容并不够长，所以看不出效果，这里可以修改文本内容的对齐方式：

"1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is TextView" />
 
LinearLayout>

 运行结果为：

 上面的参数中，android:gravity就是用来指定文本的对齐方式，可选值有top/bottom/start/end/center，可以用|来同时指定多个值。这里指定的是center，效果等于center_vertical|center_horizontal，表示在垂直和水平方向都居中对齐。

另外还可以修改文本的颜色和大小：

"1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#00ff00"
        android:textSize="24sp"
        android:text="This is TextView" />
 
LinearLayout>

运行结果为：

 在上面的代码中，android:textColor表示的是文本的颜色，android:textSize表示的是文本的大小，文字大小的单位是sp，以使用户在系统中修改了文字显示尺寸时，应用程序中的文字大小也会跟着变化。

Button

Button这个控件之前都已经用过了：

"1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#00ff00"
        android:textSize="24sp"
        android:text="This is TextView" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
 
LinearLayout>

比如上面的代码创建了一个按钮，运行结果为：

 虽然在Button的属性android:text中是Button，但是显示的却是大写的BUTTON，这是因为Android系统默认会将按钮上的英文字母全部转换为大写。如果需要保留指定的原始文字内容，可以修改代码为：

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="Button" />

运行结果为：

 而由于Button是交互式的控件，因此还可以在Activity中添加Button的监视器：

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

这里使用的是Java函数式API的形式，只需要在对应位置书写lambda表达式即可。

同时也可以使用实现接口的方式来进行注册，代码为：

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    
    override fun onClick(v:View?) {
        when (v?.id) {
            R.id.button -> {
                // statement
            }
        }
    }
}

即实现接口，然后在对应的方法中接收对应的id，判断是哪个控件，然后做出响应。

EditText

EditText是程序用于和用户进行交互的另一个控件，其允许用户在控件中输入和编辑内容，并可以在程序中对这些内容进行处理。

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

运行程序结果为：

 在上面的结果显示中，输入字母的前部分，会存在输入提示，而在用户输入了内容之后，这些提示性阿文字就会消失。这种功能在Android中是非常容易实现的，甚至都不需要做任何逻辑控制，因为系统已经帮用户都处理好了。

在上面的代码中，是没有android:text这个属性的，这里加上看一下：

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Type something here" />

结果为：

 从显示来看，这个属性的内容已经是输入好的，虽然能起到提示的作用，但用户却需要进行手动删除，将代码修改为：

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here" />

 运行结果为：

 这里的显示就是隐藏式的，在用户要输入内容的时候，提示性文本会消失，而当文本框为空时，提示性文本又会出现。

而当输入内容不断增多时，EditText会被不断拉长，这是因为EditText的高度指定的wrap_content，因此其总是能够包含其里面的内容，但当输入内容过多时，界面会变得不太好看：

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here"
        android:maxlines="2"/>

 这样就会限制EditText的最大显示行数：

 而如果将EditText和Button相结合，比如通过点击按钮获取EditText中输入的内容：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            val inputText = editText.text.toString()
            Toast.makeText(this, inputText, Toast.LENGTH_SHORT).show()
        }
    }
}

运行结果为： 

 在上面的代码中，在按钮点击事件中调用了EditText的getText方法获取输入内容，然后调用toString方法将其内容转换为字符串，最后使用Toast将输入的内容进行显示。

ImageView

ImageView是用于在界面上展示图片的一个控件，其可以让程序界面变得更加丰富。

图片通常是放在drawable开头的目录下，并且要带上具体的分辨率。现在最主流的手机屏幕分辨率大多是xxhdpi的，因此在res目录下再新建一个drawable-xxhpi目录，然后在该目录下复制两张图片img_1.png和img_2.png。

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_1"/>

运行结果为：

 上面的代码中，使用android:layout_width和android:layout_height限制了图片的显示范围，保证了不管图片的尺寸，都可以进行完整的显示，而android:src属性则指示了显示的内容。

 而如果将ImageView和Button相结合，比如通过点击按钮更改ImageView显示内容：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            imageView.setImageResource(R.drawable.img_2)
        }
    }
}

点击按钮后的结果为：

 ProgressBar

ProgressBar用于在界面上显示一个进度条，表示程序正在加载一些数据。

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

运行结果为：

 在按钮的点击事件中，可以通过getVisibility方法来判断ProgressBar是否可见，如果可见就将之隐藏，如果不可见就将ProgressBar进行显示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            if (progressBar.visibility == View.VISIBLE) {
                progressBar.visibility = View.GONE
            } else {
                progressBar.visibility = View.VISIBLE
            }
        }
    }
}

另外，还可以指定ProgressBar的样式：

    
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"/>

同时修改代码为：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            progressBar.progress = progressBar.progress + 10
        }
    }
}

运行结果为：

 上面代码修改了ProgressBar的显示样式，同时设定了进度条的最大值，然后在Activity中添加按钮的点击事件，即每点击一次，进度条前进10%。

AlertDialog

AlertDialog可以在当前界面弹出一个对话框，该对话框是置顶于所有界面元素之上的，能够屏蔽其它控件的交互能力，因为该控件一般用于提示一些非常重要的内容或警告信息。比如为了防止用户误删重要内容，可以在删除前弹出一个确认对话框。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            AlertDialog.Builder(this).apply {
                setTitle("this is a Dialog")
                setMessage("Something important")
                setCancelable(false)
                setPositiveButton("OK") {dialog, which->}
                setNegativeButton("Cancel")  {dialog, which->}
                show()
            }
        }
    }
}

 在上面的代码中，首先通过AlertDialog.Builder构建了一个对话框，然后通过apply函数为该对话框设置了标题，内容，能够使用Back键关闭对话框等属性，然后调用setPositiveButton和setNegativeButton方法为对话框设置确定/取消按钮的点击事件，然后调用show方法显示对话框。

运行结果为：