本系列持续更新中….
界面设计和功能开发同样重要,界面美观的应用程序不仅可以大大增加用户粘性,还能帮我们吸引到更多的新用户。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 是在界面上显示一个进度条,表示当前程序正在加载一些数据。
使用方法很简单
代码语言:javascript复制<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 中或者通过通知的形式来提醒用户。
代码实现:
代码语言:javascript复制 public void progressDialog() {
ProgressDialog progressDialog = new ProgressDialog(this);
progressDialog.setTitle("正在加载");
progressDialog.setMessage("请稍等......");
progressDialog.setCancelable(false);
progressDialog.show();
}
效果:
注意:setCancleable()
中传入了 false
表示 ProgressBar 是不能通过 Back 键来取消的,你只能在代码中调用 dismiss()
来让 ProgressBar 消失,负责他就一直存在了。