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

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

本系列文章目录： 更多精品文章分类

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

界面设计和功能开发一样重要，界面美观的应用程序不只能够大大增长用户粘性，还能帮咱们吸引到更多的新用户。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();
复制代码

效果图:

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();

    }
复制代码

效果：

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