(3)Android用户界面

Android用户界面

5.1 用户界面基础

Android用户界面框架

Android用户界面框架( Android UI Framework)采 用视图树(View Tree)模 型

ViewGroup

Android用户界面框架中的 界面元素以一种树型结构组 织在一起，称为视图树 Android系统会依据视图树 的结构从上至下绘制每一个 界面元素。每个元素负责对 自身的绘制，如果元素包含 子元素，该元素会通知其下 所有子元素进行绘制

View

ViewGroup

View

View

View

View

5.1 用户界面基础

Android用户界面框架

视图树

视图树由View和ViewGroup构成 View是界面的最基本的可视单元，存储了屏幕上特定矩 形区域内所显示内容的数据结构，并能够实现所占据区域 的界面绘制、焦点变化、用户输入和界面事件处理等功能 View也是一个重要的基类，所有在界面上的可见元素都 是View的子类 ViewGroup是一种能够承载含多个View的显示单元 ViewGroup功能：一个是承载界面布局，另一个是承载具 有原子特性的重构模块

5.2 界面控件

Android系统的界面控件分为定制控件和系统 控件

定制控件是用户独立开发的控件，或通过继承并修改系 统控件后所产生的新控件。能够为用户提供特殊的功能 或与众不同的显示需求方式 系统控件是Android系统提供给用户已经封装的界面控 件。提供在应用程序开发过程中常见功能控件。系统控 件更有利于帮助用户进行快速开发，同时能够使 Android系统中应用程序的界面保持一致性

常见的系统控件包括TextView、EditText、 Button、ImageButton、Checkbox、RadioButton 、Spinner、ListView和TabHost

5.2 界面控件

5.2.1 TextView和EditText

TextView是一种用于显示字符串的控件 EditText则是用来输入和编辑字符串的控件

EditText是一个具有编辑功能的TextView

5.2 界面控件

5.2.1 TextView和EditText

建立一个“TextViewDemo”的程序，包含TextView和 EditText两个控件

上方“用户名”部分使用的是TextView,下方的文字输入 框使用的是EditText

5.2 界面控件

5.2.1 TextView和EditText

TextViewDemo在XML文件中的代码

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

<TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView01" > </TextView> <EditText android:id="@+id/EditText01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="EditText01" > </EditText>

5.2 界面控件

5.2.1 TextView和EditText

第1行android:id属性声明了TextView的ID,这个ID主要 用于在代码中引用这个TextView对象

“@+id/TextView01”表示所设臵的ID值 @表示后面的字符串是ID资源 加号(+)表示需要建立新资

源名称，并添加到R.java文 件中 斜杠后面的字符串(TextView01)表示新资源的名称 如果资源不是新添加的，或属于Android框架的ID资源， 则不需要使用加号(+),但必须添加Android包的命名空 间，例如android:id="@android:id/empty"

5.2 界面控件

5.2.1 TextView和EditText

第2行的android:layout_width属性用来设臵TextView的 宽度，wrap_content表示TextView的宽度只要能够包含 所显示的字符串即可 第3行的android:layout_height属性用来设臵TextView 的高度 第4行表示TextView所显示的字符串，在后面将通过代 码更改TextView的显示内容 第7行中“fill_content”表示EditText的宽度将等于父控 件的宽度

5.2 界面控件

5.2.1 TextView和EditText

TextViewDemo.java文件中代码的修改TextView textView = (TextView)findViewById(R.id.TextView01); EditText editText = (EditText)findViewById(R.id.EditText01); textView.setText("用户名："); editText.setText("");

1. 2. 3. 4.

第1行代码的findViewById()函数能够通过ID引用界面上的 任何控件，只要该控件在XML文件中定义过ID即可 第3行代码的setText()函数用来设臵TextView所显示的内 容

5.2 界面控件

5.2.2 Button和ImageButton

Button是一种按钮控件，用户能够在该控件上点击，并 后引发相应的事件处理函数 ImageButton用以实现能够显示图像功能的控件按钮

5.2 界面控件

5.2.2 Button和ImageButton

建立一个“ButtonDemo”的程序，包含Button和 ImageButton两个按钮，上方是“Button按钮”,下方 是一个ImageButton控件

5.2 界面控件

5.2.2 Button和ImageButton

ButtonDemo在XML文件中的代码1. 2. 3. 4. 5. 6. 7. 8. 9.

<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button01" > </Button> <ImageButton android:id="@+id/ImageButton01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageButton>

定义Button控件的高度、宽度和内容 定义ImageButton控件的高度和宽度，但是没定义显示的 图像，在后面的代码中进行定义

5.2 界面控件

5.2.2 Button和 ImageButton

引入资源

将download.png文件拷贝到 /res/drawable文件夹下 在/res目录上选择Refresh 新添加的文件将显示在 /res/drawable文件夹下 R.java文件内容也得到了更 新

否则提示无法找到资源的 错误

5.2 界面控件

5.2.2 Button和ImageButton

更改Button和ImageButton内容

引入android.widget.Button和android.widget.ImageButton

1. 2. 3. 4.

Button button = (Button)findViewById(R.id.Button01); ImageButton imageButton = (ImageButton)findViewById(R.id.ImageButton01); button.setText("Button按钮"); imageButton.setImageResource(R.drawable.download);

第1行代码用于引用在XML文

件中定义的Button控件 第2行代码用于引用在XML文件中定义的ImageButton控件 第3行代码将Button的显示内容更改为“Button按钮” 第4行代码利用setImageResource()函数，将新加入的png 文件R.drawable.download传递给ImageButton

5.2 界面控件

5.2.2 Button和ImageButton

按钮响应点击事件：添加点击事件的监听器final TextView textView = (TextView)findViewById(R.id.TextView01); button.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { textView.setText("Button按钮"); } }); imageButton.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { textView.setText("ImageButton按钮"); } });

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

第2行代码中button对象通过调用setOnClickListener()函 数，注册一个点击(Click)事件的监听器 View.OnClickListener() 第3行代码是点击事件的回调函数 第4行代码将TextView的显示内容更改为“Button按钮”