一、UI的定义
Android提供了一系列UI，这些UI可以为我们的界面提供布局和控件，使我们的界面变得美观、合理
二、常见的UI控件
- 2.1 TextView
作用：主要用于在界面上显示一段文本信息
TextView常见属性使用：
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is TextView"//显示文本信息
android:gravity="center"//指定文字的对齐方式
android:textSize="24sp"//指定文字的大小
android:textColor="#00ff00"//指定文字的颜色
/>
在Android的UI控件中，match_parent和fill_parent表示让当前控件的大小和父布局的大小一样；wrap_content表示让当前控件的大小能够刚好包含住里面的内容
- 2.2 Button
- 作用：表示在界面上显示一个按钮，常见的属性使用如下：
<Button
android:id="@+id/button_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1"
android:textAllCaps="false"//该属性表示禁止控件名称显示时自动转为大写，表示你的按钮名称大小写变化，true为默认，即大写情况；false则把按钮里的文字改为小写
/>
- 两种注册监听器的方法
（一）匿名类方式注册：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button_1);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//在此处添加逻辑
}
});
}
（二）实现接口的方式注册：
1、继承View.OnClickListener接口 2、重写onClick(View v) 方法
public class MainActivity<onClick> extends AppCompatActivity implements View.OnClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button_1);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
//在此处添加逻辑
break;
default:
break;
}
}
}
- 2.3 EditText
作用：允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理
<EditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type something here"// 表示在输入框内显示一些提示性的文字，当用户输入任何内容时，这些提示性文字就会消失
android:maxLines="2"//表示指定Edit的最大行数为两行
/>
我们还可以结合使用EditText和Button来完成一些功能，比如通过点击按钮来获取EditText中输入的内容
private EditText editText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button_1);
editText = (EditText)findViewById(R.id.edit_text);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
String inputText = editText.getText().toString();//从edittext控件中获取被填入的数据
Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
- 2.4 ImageView
作用：适用于在界面上展示图片的一个控件，他可以使得程序界面变得更加丰富多彩。注意，图片一般都是放在drawable文件下的
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img_1"
/>
我们还可以通过点击按钮来更换图片
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button_1);
imageView = (ImageView) findViewById(R.id.image_view);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
imageView.setImageResource(R.drawable.img_2);//setImageResource()办法表示设置要展示的图片的来源
break;
default:
break;
}
}
- 2.5 ProgressBar
（一）作用：用于在界面上显示一个进度条，表示我们的程序正在加载一些数据，代码如下：
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
（二）当数据加载完成时，如何让进度条消失？
- 1、Android控件的可见属性：所有的控件可以通过android:visibility进行指定，其中选定的值有三种：visible、invisible、gone；①visible表示控件是可见的；②invisible表示控件不可见，但是仍然占据着原来的位置的大小；③gone表示控件不仅不可见，而且不再占用任何屏幕空间
- 2、通过代码来设置控件的可见性，使用的是setVisibility()方法，可以传入View.VISIBLE、View.INVISIBLE、View.GONE这三种值
实现代码：
public class MainActivity<onClick> extends AppCompatActivity implements View.OnClickListener{
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button_1);
progressBar = (ProgressBar)findViewById(R.id.progress_bar);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
if(progressBar.getVisibility() == View.GONE){
//调用该方法判断ProgressBar是否可见，若可见则隐藏掉；反之就将他显示出来
progressBar.setVisibility(View.VISIBLE);
}else{
progressBar.setVisibility(View.GONE);
}
break;
default:
break;
}
}
}
（三）给ProgressBar控件指定不同的样式，默认为圆形进度条
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"//提供条形进度条
android:max="100"//给进度条设置一个最大值
/>
- 2.6 AlertDialog
作用：在当前得界面弹出一个对话框，该对话框置顶于所有界面元素之上的，能够屏蔽掉其他控件得交互能力，因此AlertDialog一般都是用于提示一些非常重要的内容或着警告信息，示例代码如下：
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
//1、首先创建一个实例
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
//2、设置一些内容
dialog.setTitle("This is a dialog");
dialog.setMessage("Something important.");
//3、可否用Back键关闭对话框，true表示可以；false表示不可以
dialog.setCancelable(false);
//4、调用setPositiveButton()方法为对话框设置确定按钮的点击事件
dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//在此处添加逻辑
}
});
//5、调用setNegativeButton()方法为对话框设置取消按钮的点击事件
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//在此处添加逻辑
}
});
//6、调用show()方法显示
dialog.show();
break;
default:
break;
}
}
- 2.7 ProgressDialog
作用：跟ProgressDialog类似，弹出一个对话框，能够屏蔽掉其他控件的交互能力。不同的是，ProgressDialog会在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心地等待
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_1:
//1、首先创建一个实例
ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
//2、设置一些内容
progressDialog.setTitle("This is a dialog");
progressDialog.setMessage("loading.....");
//3、可否用Back键关闭对话框，true表示可以；false表示不可以
progressDialog.setCancelable(false);
//4、调用show()方法显示
progressDialog.show();
break;
default:
break;
}
}
注意：如果数据或者操作执行完成，需要通过调用dismiss()方法来关闭对话框，否则该控件会一直存在
三、创建自定义控件
- 3.1 常用控件和布局的继承结构
1、所有的控件都是直接或间接继承自View的
2、所有的布局都是直接或间接继承自ViewGroup的
3、View是Android中最基本的一种UI组件，它在在屏幕上绘制一块矩形区域，并能够响应这块区域的各种事件。
4、ViewGroup是一种特殊的View，他可以包含很多子View和子ViewGroup，是一个用于放置控件和布局的容器 - 3.2 引入自定义布局
作用：我们可以只创建一个通用格式的布局，然后在其他的活动中调用此布局文件，这样就避免频繁的重复的操作控件
举例：创建如下的导航栏
1、在layout包下创建一个布局文件title.xml，然后添加控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"//可以指定控件在上下左右方向上偏移的距离
android:text="Back"
android:textColor="#00ff66" />
<TextView
android:id="@+id/title_text"
android:layout_width="0dp"
android:layout_height="58dp"
android:layout_weight="1"
android:gravity="center"
android:text="Title Text"
android:textColor="#00ff66"
android:textSize="24sp" />
<Button
android:id="@+id/title_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Edit"
android:textColor="#00ff66" />
</LinearLayout>
2、引用该文件的方法：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/title"/>//引用，这样该页面就有了自定好的导航栏
</LinearLayout>
在include中，引号里的格式：“@包名/布局文件名”
3、java文件中，修改代码，将系统自带的标题栏隐藏掉
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();//getSupportActionBar()方法用于获取实例
if (actionBar != null){
actionBar.hide();
}
}
- 3.3 创建自定义控件
作用：对自己已经创建好的控件进行操作设置，比如上面的自定义的布局中的Back键，Back键的目的就是销毁该活动，我们可以通过自定义Back的控件，使得每一个自定义的布局中Back键执行的情况都是相同，这样就避免在每一个活动中都需要重新注册一遍返回按钮的点击事件。
1、新建一个类，继承LinearLayout类，让他成为我们自定义的标题栏控件
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title,this);
}
}
LayoutInflater的from()方法创建了一个LayoutInflater对象，调用inflate()方法以动态加载一个布局文件，传入的第一个参数就要加载的布局文件的id，第二个参数就是给加载好的布局再添加一个父布局
2、在我们想要引用该控件的布局文件中中添加自定义控件代码：
<com.example.uicustomviews.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
3、然后再在回到java代码中为按钮注册点击事件
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title,this);
Button titleback = (Button)findViewById(R.id.title_back);
Button titleEdit = (Button)findViewById(R.id.title_edit);
titleback.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity)getContext()).finish();
}
});
titleEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(),"Editing",Toast.LENGTH_SHORT).show();
}
});
}
}
四、 小结
1、本节讲了七种常见控件及其使用方法
- TextView——主要用于在界面上显示一段文本信息
- Button——表示在界面上显示一个按钮，有两种注册监听器的方法
- EditText——允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理
- ImageView——适用于在界面上展示图片的一个控件，他可以使得程序界面变得更加丰富多彩
- ProgressBar——用于在界面上显示一个进度条，表示我们的程序正在加载一些数据
- AlertDialog——可以在当前得界面弹出一个对话框，该对话框置顶于所有界面元素之上的，能够屏蔽掉其他控件得交互能力，因此AlertDialog一般都是用于提示一些非常重要的内容或着警告信息
- ProgressDialog——跟ProgressDialog类似，弹出一个对话框，能够屏蔽掉其他控件的交互能力。不同的是， ProgressDialog会在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心地等待