第5章Android用户界面

第5章Android用户界面本章学习目标：了解各种界面控件的使用方法掌握各种界面布局的特点和使用方法掌握选项菜单、子菜单和快捷菜单的使用方法掌握操作栏和Fragment的使用方法掌握按键事件和触摸事件的处理方法5.1用户界面基础用户界面（UserInterface，UI)是系统和用户之间进行信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换在计算机出现早期，批处理界面（1945-1968）和命令行界面（1969-1983）得到广泛的使用目前，流行图像用户界面（GraphicalUserInterface，GUI），采用图形方式与用户进行交互的界面未来的用户界面将更多的运用虚拟现实技术，使用户能够摆脱键盘与鼠标的交互方式，而通过动作、语言，甚至是脑电波来控制计算机5.1用户界面基础Android用户界面框架Android用户界面框架采用MVC（Model-View-Controller）模型控制器（Controller）处理用户输入视图（View）显示用户界面和图像模型（Model）保存数据和代码MVC模型中的控制器能够接受并响应程序的外部动作，如按键动作或触摸屏动作等控制器使用队列处理外部动作，每个外部动作作为一个对立的事件被加入队列中，然后Android用户界面框架按照“先进先出”的规则从队列中获取事件，并将这个事件分配给所对应的事件处理函数模型控制器视图键盘等输入绘制界面更新5.1用户界面基础Android用户界面框架Android用户界面框架采用视图树（ViewTree）模型由View和ViewGroup构成View是最基本的可视单元存储了屏幕上特定矩形区域内所显示内容的数据结构实现所占据区域的界面绘制、焦点变化、用户输入和界面事件处理等一个重要的基类，所有在界面上的可见元素都是View的子类ViewGroup是一种能够承载含多个View的显示单元承载界面布局承载具有原子特性的重构模块ViewGroupViewGroupViewViewViewViewView5.1用户界面基础Android用户界面框架采用视图树（ViewTree）模型Android系统会依据视图树的结构从上至下绘制每一个界面元素每个元素负责对自身的绘制，如果元素包含子元素，该元素会通知其下所有子元素进行绘制5.1用户界面基础单线程用户界面控制器从队列中获取事件和视图在屏幕上绘制用户界面，使用的都是同一个线程。也就是说，在界面事件处理完之前，该线程没有办法处理其它事件。特点：处理函数具有顺序性，能够降低应用程序的复杂程度，同时也能减低开发的难度缺点：如果事件处理函数过于复杂，线程一直处理事件函数，无法处理其它事件，这可能会导致用户界面失去响应。因此，界面事件应尽可能使用低耗时的操作。如果有过于耗时的操作，可以开启新的后台线程。本章节，我们使用一个线程。多线程的情况在Servcie组件章节（第七章，后台服务）中出现。5.2界面控件常见的系统控件TextViewEditTextButtonImageButtonCheckboxRadioButtonSpinnerListViewTabHost5.2界面控件5.2.1TextView和EditTextTextView是一种用于显示字符串的控件EditText则是用来输入和编辑字符串的控件EditText是一个具有编辑功能的TextView例子1、TextView和EditText建立一个“TextViewDemo”的程序，包含TextView和EditText两个控件上方“用户名”部分使用的是TextView，下方的文字输入框使用的是EditText这里只做界面演示，因此，只需要修改界面文件activity_main.xml和对应的字符串文件string.xml便可。界面文件activity_main.xml代码如下所示：1.RelativeLayoutxmlns:android=:tools=:layout_width=match_parent4.android:layout_height=match_parent5.android:paddingBottom=@dimen/activity_vertical_margin6.android:paddingLeft=@dimen/activity_horizontal_margin7.android:paddingRight=@dimen/activity_horizontal_margin8.android:paddingTop=@dimen/activity_vertical_margin9.tools:context=.MainActivity1.!--用户名输入提示--2.TextView3.android:id=@+id/userNameHint4.android:layout_width=wrap_content5.android:layout_height=wrap_content6.android:text=@string/userName/7.!--用户名输入--8.EditText9.android:id=@+id/userNameEdit10.android:layout_below=@id/userNameHint11.android:layout_width=fill_parent12.android:layout_height=wrap_content13.android:inputType=textPersonName/14./RelativeLayout因为上表中，第6行用到了字符串文件，因此字符串文件string.xml需要进行修改，如下所示：1.?xmlversion=1.0encoding=utf-8?2.resources3.stringname=app_nameTextViewDemo/string4.stringname=action_settingsSettings/string5.stringname=hello_worldHelloworld!/string6.7.stringname=userName用户名/string8./resourcesMainActivity代码无需修改，如下所示：publicclassMainActivityextendsActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){getMenuInflater().inflate(R.menu.main,menu);returntrue;}}例子一效果注意的细节：第1行android:id属性声明了TextView的ID，这个ID主要用于在代码中引用这个TextView对象“@+id/userNameHint”表示所设置的ID值斜杠后面的字符串（userNameHint）表示新资源的名称加号（+）表示需要建立新资源名称，并添加到R.java文件中如果资源不是新添加的，或属于Android框架的ID资源，则不需要使用加号（+），但必须添加Android包的命名空间，例如android:id=@android:id/empty“第6行代码，表示TextView所显示的字符串。@表示后面的字符串是ID资源android:layout_width属性用来设置控件的宽度，android:layout_height属性用来设置TextView的高度。wrap_content表示控件的宽度只要能够包含所显示的字符串即可。“fill_content”表示EditText的宽度将等于父控件的宽度。android:inputType是针对于EditText控件的属性。指明该EditText控件将用于何种输入。这里使用了用户名。也有密码等。与html的input标签类似。5.2界面控件5.2.2Button和ImageButtonButton是一种按钮控件，用户能够在该控件上点击，并后引发相应的事件处理函数ImageButton用以实现能够显示图像功能的控件按钮，除了Button的基本功能之外，还能显示程序制定的图标例子二建立一个“ButtonDemo”的程序，包含三个控件，TextView，Button和ImageButton两个按钮。点击按钮不同的按钮。TextView将显示不同的内容。思路与上一个例子相比，本例子有两点不同。首先，需要添加按钮的单击事件。用来改变TextView的值。第二，我们用到了图片按钮。图片的摆放位置以及引用方式。修改界面文件activity_main.xml，代码如下所示：1.RelativeLayoutxmlns:android=:tools=:layout_width=match_parent4.android:layout_height=match_parent5.android:paddingBottom=@dimen/activity_vertical_margin6.android:paddingLeft=@dimen/activity_horizontal_margin7.android:paddingRight=@dimen/activity_horizontal_margin8.android:paddingTop=@dimen/activity_vertical_margin9.tools:context=.MainActivity1.!--提示框--2.TextView3.android:id=@+id/show4.android:layout_width=wrap_content5.android:layout_height=wrap_content6.android:text=@string/hello_world/7.8.!--普通按钮--9.Button10.android:id=@+id/button11.android:layout_width=wrap_content12.android:layout_height=wrap_content13.android:layout_below=@id/show14.android:text=@string/touchIt15./16.1.!--图片按钮--2.ImageButton3.android:id=@+id/imageButton4.android:layout_width=wrap_content5.android:layout_height=wrap_content6.android:layout_below=@id/button7.android:src=@drawable/ic_launcher8.android:contentDescription=@string/touchIt9./10./RelativeLayout11.这里要注意第7行代码，指定了图