从0系统学Android--3.1编写UI界面

image

image

本系列持续更新中....

界面设计和功能开发同样重要，界面美观的应用程序不仅可以大大增加用户粘性，还能帮我们吸引到更多的新用户。Android 系统为我们提供了大量的 UI 开发工具，只要合理的使用它们，就可以编写出各种各样漂亮的界面。

3.1 如何编写程序界面

Android 中许多编写程序界面的方式。Android Studio 提供了可视化的编辑工具，并且允许我们通过拖放控件的方式来编写布局，并能在视图上直接修改控件的属性。但是这种拖放控件的方式不推荐大家使用。这种方式不利于我们了解界面背后的实现原理，并且在一些复杂的界面，这种拖拽的方式难以胜任。我们下面介绍的编写方式都是通过自己编写 xml 代码来实现的。

3.2 常用控件的使用方法

Android 提供了大量的 UI 控件，下面就挑选几种常用的控件来详细的介绍一下使用方法。

3.2.1 TextView

TextView 可以说是 Android 中最简单的一个控件了，也是许多控件的父类比如：Button。

下面就来学习一下 TextView 的更多用法

修改 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"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is TextView"
        android:id="@+id/tv"/>
</LinearLayout>

在 TextView 中使用 android:id 给当前控件定义一个唯一标识符，使用 android:layout_width 和 android:layout_height 指定宽度和高度。Android 中所有的控件都有这两个属性。可选值有：match_parent、fill_parent、wrap_content 其中 match_parent 和 fill_parent 的意义相同，官方推荐使用 match_parent。表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小。wrap_content 表示让当前控件的大小能够刚刚包含住里面的内容，也就是由控件内容来决定当前控件的大小。当然你还可以对控制指定固定的大小，但是这样有时候会在不同的手机屏幕上出现适配的问题。

android:gravity 属性可以用来指定文字的对齐方式，可选值有：top、bottom、left、right、center。可以用 | 来同时指定多个值。

android:textSize 属性用来指定文字大小

android:textColor 属性用来指定文字的颜色，单位用 sp

当然 TextView 还有许多其他的属性，有需要就去查阅文档。

3.2.2 Button

Button 是程序用于和用户进行交互的一个重要控件。它是 TextView 的子类。

Button 在使用的时候，系统会对 Button 中的所有英文字母自动进行大写转换，如果你不想这种效果，那么使用 android:textAllCaps = "false" 来关闭这个默认特性。

当然我们还可以对 Button 来设置点击事件，这样当我们点击 Button 的时候就会触发函数。

3.2.3 EditText

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

EditText 的使用方法和前面的控件非常相似，首先添加一个 id，再指定宽度和高度，然后适当的加入一些控件特有的属性就可以了。

特有属性，提示性文章：android:hint

当我们输入的文字内容过多的时候，EditText 的高度如果指定了 wrap_content 这种情况下，效果就会非常糟糕，这个时候属性 maxLines 就起作用了 android:maxLines="2" 这样我们的 EditText 只能显示两行高度的内容，内容再多就会用滚动的形式显示，效果就会好很多。

3.2.4 ImageView

ImageView 是用来在界面上展示图片的控件。图片通常放在以 drawable 开头的目录下面，目前我们项目中会默认有一个 drawable 不过没有指定具体的分辨率，这里我们自己在 res 目录下新建一个 drawble-xhdpi 目录，然后将图片放入。这样我们就可以使用 android:src="@drawable/img1" 来给 ImageView 指定图片了。

在代码中使用 imageView.setImageResource(R.drawable.img) 给 ImageView 指定图片。

3.2.5 ProgressBar

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

使用方法很简单

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

运行程序，就会在屏幕上看到一个圆形的进度条正在旋转。

那么数据加载完成后如何让进度条消失呢？这个时候需要引入一个属性了 android:visibility 默认是 visible 表示可见的，还有 invisible 表示控件不可见但是仍然占据原来的大小，gone 表示控件不可见也不会占用任何屏幕控件。在代码中设置的话通过 setVisibility() 传入 View.VISIBLE 、View.INVISIBLE 、View.GONE 这三种值。

同样我可以通过给 ProgressBar 指定不同的样式，来改变进度条的样式。默认是圆形进度条，通过属性 style 给他指定成水平进度条 style="?android:attr/progressBarStyleHorizontal" android:max="100"

当然 ProgressBar 还有其他的样式，可以自己尝试

3.2.6 AlerDialog

AlerDialog 可以在当前的界面弹出一个对话框，置顶于所有界面之上，并且屏蔽掉其他控件的交互能力。常用来作为警告提示。

AlertDialog 的创建需要通过 Builder 来创建，属于构建者模式。

 AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("题目");
        builder.setMessage("内容消息");
                // 这个方法是设置屏蔽返回键，也就是说当你按返回键的时候这个弹出框也不会消失
        builder.setCancelable(false);
        builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // 点击后弹出框自动消失
                // which 代表点击的是哪一个 button 对应下面的值
                /** The identifier for the positive button. */
                int BUTTON_POSITIVE = -1;

                /** The identifier for the negative button. */
                int BUTTON_NEGATIVE = -2;

                /** The identifier for the neutral button. */
                int BUTTON_NEUTRAL = -3;

            }
        });

        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // 点击后弹出框自动消失
            }
        });
        builder.show();

效果图:

image

3.2.7 ProgressDialog

ProgressDialog 和 AlertDialog 类似，都可以在界面上弹出一个对话框，都能够屏蔽与其他控件的交互能力。不同的是 ProgressDialog 显示的是一个进度条，一般用于耗时操作的时候，让用户等待。

现在官方已经不推荐使用 ProgressDialog 了，更推荐将 ProgressBar 嵌套在 UI 中或者通过通知的形式来提醒用户。

代码实现：

    public void progressDialog() {
        ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setTitle("正在加载");
        progressDialog.setMessage("请稍等......");
        progressDialog.setCancelable(false);
        progressDialog.show();

    }

效果：

image

注意：setCancleable() 中传入了 false 表示 ProgressBar 是不能通过 Back 键来取消的，你只能在代码中调用 dismiss() 来让 ProgressBar 消失，负责他就一直存在了。

image