android 常用控件的使用方式

android 常用控件的使用方式

@author lisiwen

@createTIme 2022/04/07

文章中的测试用例链接：https://github.com/NET-lisiwen/UIWidgetTest/tree/master

1.TextView

​ TextVIew可以说是使用起来比较简单的一个控件，这里在介绍使用TextView方法的同时，也会将一些简单的资源引用方法，这里也是使用自动创建一个empyt activity然后修改activity_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="@string/Text_View_String">
    </TextView>
</LinearLayout>

​ strings.xml

<resources>
    <string name="app_name">UIWidgetTest</string>
    <string name="Text_View_String">this is text view</string>
</resources>

​ 外边的LinearLayout先不看，这个是一种基本布局方式，后边会讲，在TextView中使用android:id给当前控件定义了一个唯一标识符，@+id表示新增一个id，若@id则是表示引用一个现有的一个id为xxx的资源，所以说定义唯一标识符可以有两种方式，一种为使用@+id/textview 此时定义的唯一标识符为textview，另一种方式为在res\values\ids.xml文件中定义一个id

<resources>
    <item type="id" name="text_view"/>
</resources>

并且在activity_main.xml修改id的定义方式为 android:id="@id/text_view" ，此时会自动引用ids.xml文件中名字为text_view对应的值 ，这时如果没有对应的值编译是会报错的， 此种使用方式和@+id/textview 效果相同。

​ 然后使用android:layout_width和android:layout_height定义了当前控件的高度和宽度。Android中所有的控件都具有这两个属性，可选值有3中：match_parent、wrap_content和固定值。match_parent表示当前空间的大小和父布局的大小一致，也就是由父布局来决定当前控件的大小。wrap_content表示让当前控件的大小能够刚好包含住里边的内容，也就是由控件内容决定当前控件的大小。固定值表示给控件指定一个固定的尺寸，单位一般使用dp，这是一种屏幕密度无关的储存单位，可以保证在不同分辨率的手机上显示效果尽可能地一致，就比如50dp就是一个有效的固定值。最后android:text就是当前控件的显示的字串的内容，此处就是引用的Strings.xml中name为Text_View_String的对应的内容，也就是this is text view，此种使用方式和android:text="this is text view"效果一致。

​ 所以说上边的代码就表示让TextView的宽度和父布局一样宽，也就是手机屏幕的宽度，让TextView的高度足够包含住里边的内容就行。现在运行程序，效果如图所示

​ 这里文本是正常显示出来了，但是这里好像是看不出来TextView的宽度和手机宽度是一致的，这里是因为TextView默认是左对齐的，这里可以更改一下TextView的对齐方式

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="@string/Text_View_String">
    </TextView>
</LinearLayout>

可以看到第八行加了一个android:gravity属性，这个属性就是用来指定文字的对齐方式，可选的值有top、bottom、start、end、center等，可以使用”|“来同时指定多个值，这里我们使用的是”center“，效果同等与”center_horizontal|center_vertical“，表示文字在水平和垂直方向都居中对齐，现在可以重新运行程序看一下

​ 可以看到目前字是屏幕居中对齐，也说明了TextVIew的宽度确实和屏幕宽度是一致的。

​ 另外我们也可以对TextView中文字的颜色和大小进行修改，如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:textSize="30sp"
        android:textColor="#FF0000"
        android:text="@string/Text_View_String">
    </TextView>
</LinearLayout>

​ 通过android:textColor可以指定文字的颜色，通过android:textSize可以指定文字字体的大小。文字大小通常使用sp作为单位，这样当用户在系统中修改了文字显示尺寸时，应用程序中的文字大小也会跟着变化。重新运行程序，效果如下图

​ TextView中还有很多其他属性，这里就不一一介绍了，需要的时候官方阅读文档就好了。

2.Button

​ Botton是程序用于和用户进行交互的一个重要的控件。它可配置的属性和TextView差不多，我们可以在activity_main.xml中这样加入Botton

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...

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

加入botton之后的界面如图所示

​ 这里可以注意到设置按钮的文字明明是Button，可是界面上显示的却是BUTTON，这样显示是因为android系统默认会将按钮上的英文字母全部转换成大写，可能是认为按钮上的内容都比较重要吧。如果这不是你想要的效果，可以在xml中添加属性android:textAllCaps="false"，这样系统就会保留你指定的原始文字内容了。

​ 接下来在MainActivity中为Button的点击事件注册一个监听器，如下所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 方式一
        findViewById(R.id.button).setOnClickListener((v)->{
            // 添加点击事件的处理逻辑
        });
        // 方式二
        findViewById(R.id.button).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button:
                // 添加点击事件的处理逻辑
            default:
                break;
        }
    }
}

​ 在这里可以看到有两种方式给botton的点击事件注册一个监听器，其中方式一为直接实现接口进行注册即可，方式二其实是当前类实现了点击时间接口，然后再实现的onclick方法可以对当前view的id进行判断，对于不同的view进行不同的时间，这样可以多个botton或者view进行使用同一个监听器，使代码比较简洁。

3.EditText

​ EditText是程序用于和用户进行交互的另一个重要的控件，它允许用户再控件里输入和编辑内容，并且可以在程序中对这些内容进行处理。EditText的应用场景应该u按时非常普遍，在发短信、发微博、聊微信等等需要输入文字的场景其实都是需要EditText的。接下来看看如何使用EditText吧，修改activity_main.xml代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...

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

​ 其实看到这里，估计发现了控件的使用规律了吧。用法都比较相似，给控件定义一个id，并且指定其宽和高，然后再加入控件特有的属性就差不多了，所以使用xml来编写界面其实一点都不难。现在重新运行一下程序，EditText就显示出来了，并且我们是可以在里边输入内容的，如下图所示

​ 可能会注意到，有的场景输入框会有一些提示性的文字，一旦用户输入了任何内容，这些提示文字就消失了。这种提示功能在android其实是非常容易实现的，因为android已经给我们提供好了属性，我们不需要做任何的逻辑控制，修改activity_main.xml如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入内容"/>
</LinearLayout>

​ 这里使用android:hint属性制定了一段提示性的文本，重新运行程序如下图所示

​ 可以看到EditText中显示了一段提示性文本，然后当我们输入了任意内容的时候，这段提示的文字就自动消失了。

​ 不过随着输入的内容越来越多，EditText会被不断的腊肠，这是由于EditText的高度指定是wrap_content，因此它总是能包含住里面的内容，但是当输入内容过多时，界面就会变得非常难看。这里我们可以使用android:maxLines来指定最大行数来解决这个问题，修改activity_main.xml如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    ...

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入内容"
        android:maxLines="2"/>
</LinearLayout>

​ 这里通过android:maxLines指定了EditText最大行数为两行，如果文字超过两行文本就会向上滚动，EditText不会继续拉伸，如下图所示

​ 这里我们也可以结合使用Botton和EditText来完成一些功能，比如通过点击Botton来获取EditText中的内容，修改MainActivity中的内容如下图所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ...

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 添加点击事件的处理逻辑
                // 获取edittext中输入的内容的字串
                String inputStr = ((EditText) findViewById(R.id.edittext)).getText().toString();
                Toast.makeText(this, inputStr, Toast.LENGTH_SHORT).show();
            default:
                break;
        }
    }
}

​ 在botton的点击时间的监听中使用getText()获取输入的内容，再调用toString()将其转换为字串，最后使用Toast将其显示出来

​ 输入内容后点击按钮，运行程序结果如下图所示

4.ImageView

​ ImageView时用于再界面上展示图片的一个控件，它可以让我们的程序页面变得更加丰富多彩。学习这个控件我们需要体检准备好一些图片，你可以自己准备任意的图片，图片通常是放在drawable开头的目录下的，并且要带上具体的分辨率。现在主流的手机屏幕大多都是xxhdpi的，所以我们再res目录下新建一个drawable-xxhdpi目录，然后将图片放进去，

​ 接下来修改activity_main.xml中的内容如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...

    <ImageView
        android:id="@+id/iamgeview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image_1"/>
</LinearLayout>

​ 可以看到这里使用android:src给ImageView指定了一张图片。由于图片的宽和高都是不固定的，所以这里宽高的属性都定义为wrap_content，这样就不管图片的尺寸是多少都可以完整的展示出来，重新运行程，如下图所示。

​ 我们还可以再程序中通过代码动态的更改ImageView的图片，修改MainActivity的代码，如下图所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ...

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 添加点击事件的处理逻辑
                ((ImageView) findViewById(R.id.iamgeview)).setImageResource(R.drawable.image_2);
            default:
                break;
        }
    }
}

​ 在按钮的点击事件里，通过调用ImageView的setImageResource()方法将显示的图片修改为iamge_2，现在重新运行程序点击按钮，ImageView中的图片就改变了，结果如下图所示

5.ProgressBar

​ ProgressBar用户在界面上显示一个进度条，表示我们程序正在加载一些数据，用户需要等待一下。它的用法也非常简单，修改activity_main.xml中的代码，如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...
    
    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

​ 重新运行程序，会看到屏幕中间有个原型进度条正在旋转，如下图所示

​ 这时候可能会有点疑问吗，我们的数据总会加载完，那么这个进度条怎么让它消失呢？这里我们就要使用一个全新的属性：android:visibility这个属性可选值有三个visible、invisible和gone。visible表示控件可见的这个值是默认值，不指定android:visibility这个属性的时候，控件默认都是可见的，invisible表示控件不可见，但是它仍然占据这原来的位置和大小，可以理解为控件隐藏了变成了透明的，但是实际还是存在的。gone则表示控件不仅不可见而且不在占用任何的屏幕空间。我们可以通过代码来设置控件的可见性，使用的是setVisibility()方法允许传入visible、invisible和gone

​ 接下来就尝试一下实现点击一下按钮隐藏进度条，再点击一下进度条显示出来，修改MainActivity中的代码如下所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ...

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 添加点击事件的处理逻辑
                ProgressBar progressBar = findViewById(R.id.progressbar);
                if (progressBar.getVisibility() == View.VISIBLE) {
                    progressBar.setVisibility(View.GONE);
                } else {
                    progressBar.setVisibility(View.VISIBLE);
                }
            default:
                break;
        }
    }
}

​ 在代码中使用getVisibility()判断进度条控件的可见性，如果可见则将其隐藏，反之将其显示出来。重新运行程序，不断点击按钮，就可以看到进度条在显示与隐藏之间来回切换了。

​ 另外，我们还可以给ProgressBar指定不同的样式，刚刚是圆形进度条，通过style属性可以将他设置成水平进度条，修改activity_main.xml，如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    ...
    
    <ProgressBar
        android:id="@+id/progressbar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:max="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

​ 指定成水平进度条后，我们还可以通过android:max属性来给进度条设置一个最大值，然后在代码中动态更改进度条的进度，修改MainActivity中的代码如下所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ...

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 添加点击事件的处理逻辑
                ProgressBar progressBar = findViewById(R.id.progressbar);
                progressBar.setProgress(progressBar.getProgress() >= progressBar.getMax() ? 0 : progressBar.getProgress() + 10);
            default:
                break;
        }
    }
}

​ 每点击一次按钮，我们就通过progressBar.getProgress()获取当前的进度，并且判断当前进度是否大于当前设置的最大值，超过最大值设置成0，没超过则进度加上10，重新运行程序点击数次按钮之后效果如下图所示

6.AlertDialog

​ AlertDialog可以在当前界面弹出一个对话框，这个对话框时置顶于所有界面元素之上的，能够屏蔽其他控件的交互能力，因此AlertDialog一般用于提示一些非常重要的内容或者警告信息。比如为了防止用户误删重要内容，在删除前弹出一个确认对话框。下面来试一下他的用法，修改MainActivity中的代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener, DialogInterface.OnClickListener {

    ...

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                new AlertDialog.Builder(this)
                        .setTitle("this is dialog")
                        .setMessage("this is message")
                        .setCancelable(false)
                        .setPositiveButton("OK", this)
                        .setNegativeButton("CANCLE", this)
                        .show();
            default:
                break;
        }
    }

    @Override
    public void onClick(DialogInterface dialog, int which) {
        //添加dialog的点击事件
    }
}

​ 首先通过AlertDialog.Builder构建一个对话框，这里设置了dialog的标题，消息还有两个按钮的内容并且注册了监听方法，具体点击事件在onClick(DialogInterface dialog, int which)进行实现即可，最后调用show()将dialog显示出来，重新运行程序，如下图所示