第34讲高级用户界面设计-视图组件view

Android平台手机嵌入式开发第三讲高级用户界面设计-视图组件Views.主要内容：视图组件小部件（Widgets）菜单对话框消息提示条主要内容：通过前面的介绍，了解了Android平台中布局、视图、小部件的相同点和不同点：相同点：这三者都是可以显示的组件不同点：从角色定义上

布局：注重整体，好比设计图

小部件（widget）：注重的是细节，好比装饰品

视图（view）：注重的是组件的组合，好比组合家具本讲重点讲解各视图组件和小部件的使用3.1：视图组件（Views）1、视图的使用模式：视图组件的定义和使用

和布局组件的定义一样，也有在运行时创建和使用XML这两种方式。

和布局组件的不同之处在于，布局组件一般都是布局资源的根元素；

而视图组件更多的包含于布局之内，使用时必须使用findViewByID()方法

但也有个别视图组件标记根元素：如画廊视图和网页视图

使用时可以直接设置为内容，引用方法和布局一样：R.layout.<文件名>，setContentView()3.1：视图组件（Views）1、视图的使用模式：视图组件的事件响应

当用户与屏幕显示的组件进行交互时，组件需要侦听用户的选择，并进行相应的响应。

下表是view组件的事件及侦听器类型举例事件侦听器类型对应的事件说明View.OnClickListeneronClick()点击事件View.OnFocusChangeListeneronFocusChange()焦点改变事件View.OnKeyListeneronKey()击键事件View.OnTouchListeneronTouh()触摸事件View.OnLongClickListeneronLongClick()长点击事件View.OnCreateContextMenuListeneronCreatContextMenu()创建上下文菜单事件3.1：视图组件（Views）1、视图的使用模式：视图组件的事件响应

在Android平台中，开发人员可以通过三种方式来设置事件侦听：1）、先定义事件侦听器，后注册给需要侦听用户动作的组件：privateOnClickListenermListener=newOnClickListener(){ @Override publicvoidonClick(Viewv){ if(v.getId()==R.id.BTN_ACTION){ Toast.makeText(EventHandleDemoAct.this,"Hello,Android!", Toast.LENGTH_SHORT).show(); } }};mBtnAction.setOnClickListener(mListener);3.1：视图组件（Views）视图组件的事件响应2）、重载用于侦听用户动作的事件回调函数publicclassEventHandleDemoActextendsActivityimplementsOnClickListener{

publicvoidonClick(Viewv){ //TODOAuto-generatedmethodstub if(v.getId()==R.id.BTN_ACTION){ Toast.makeText(EventHandleDemoAct.this,"Hello,Android!", Toast.LENGTH_SHORT).show(); } }}mBtnAction.setOnClickListener(this);参考例子：Ch03_EventHandleDemo3.1：视图组件（Views）视图组件的事件响应3）、在XML文件中使用android:onClick属性配置对应的方法

在Activity中编写一个包含View类参数的方法，并且将要触发的动作代码放在该方法中，然后再布局文件中，通过android:onClick属性指定对应的方法名实现。publicvoidmyClick(Viewview){//编写要执行的动作代码}在布局文件中通过android：onClick=“myClick”语句添加点击事件监听器3.2：小部件（widgets）1、widgets介绍：小部件widget都是指在界面框架中比较独立的视图组件，不作为容器组件。

例如：文本视图：TextView、按钮Button、图片视图ImageView小部件定义在android.widget包中小部件既可以在XML中定义，也可以在代码中定义。在XML中小部件的定义都是在布局或者一些视图组件的定义体内，不会定义为布局资源的根元素。3.2：小部件（widgets）2、小部件的使用：引用资源：对于XML中定义的小部件，对小部件的使用，也必须先使用资源填充器inflater对XML资源进行填充Inflate；然后通过该资源文件对应的Activity组件或者小部件的父视图对象的findViewById()方法来获取资源ID指定的小部件对象实例动态创建：在java代码中可以直接使用new语句来创建小部件对象实例，然后再添加到父视图中，添加时需要指明布局参数，定义如何放置小部件3.2：小部件（widgets）3、事件响应：

从设计角度，小部件正是用于与用户进行交互的。对其事件的响应也是最全面的

在使用的过程中，必须先注册相应类型事件侦听器(Listener)，在该侦听器的事件回调方法中再对该事件进行相应处理。3.2：小部件（widgets）4、具体小部件widget介绍：一：显示和编辑文本的组件：

在SDK中，提供了TextView、EditText组件，分别用来显示和编辑文本，还提供了MultiAutoCompleteTextView组件来自动完成需要输入的文本内容。3.2：小部件（widgets）1：TextView组件：ch03_textviewch03_texthtmlviewXML定义：

<TextViewandroid:id="@+id/textview2"android:layout_width="fill_parent" android:layout_height="wrap_content"android:text="更复杂的设置" android:textSize="20dp"android:textColor="#FF00FF" android:background="#FFFFFF"android:padding="30dp" android:layout_margin="30dp"/>3.2：小部件（widgets）1：TextView组件：属性介绍：android:gravity：设置文本位置，如设置成“center”，文本将居中显示；center_vertical、center_horizontalandroid:password：ture：以小点”.”显示文本

android:password=‘ture’android:textColor:设置文本颜色

textView.setTextColor(android.graphics.Color.RED);android:padding：设置文字距离TextView组件的间距，可以有paddingLeft、paddingRight、paddingTop、paddingBottom属性3.2：小部件（widgets）属性介绍：android:layout_margin：TextView组件距离相邻组件的间距

有marginLeft、marginRight、marginTop、marginBottom属性android:text：设置显示文本Java代码中设置text：setText()setText():如果想设置一个int类型的值（不是资源ID），此时需要使用String.valueOf()方法将int转换3.2：小部件（widgets）属性介绍：背景色设置：方法有三SetBackgroundResource：使用颜色资源ID设置textView.setBackgroundResource(R.color.background);SetBackgoundColor：通过颜色值设置textView.setBackgroundColor(android.graphics.Color.REDSetBackgoundDrawable：通过Drawable对象设置Resourcesresources=getBaseContext().getResources();Drawabledrawable=resources.getDrawable(R.color.background);textView.setBackgroundDrawable(drawable);3.2：小部件（widgets）属性介绍：android:autoLink：设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。TextView组件可以自动识别。

可选值：none:不匹配任何链接，默认值web:匹配web网址email:匹配email网址phone:匹配电话号码map:匹配映射地址all:匹配所有的链接3.2：小部件（widgets）android:autoLink：

如果TextView组件不设置该属性，则需要使用HTML的<a>标签。XML中：在文本中使用<a>标签指定链接及链接文本。

XML布局文件中不能直接使用<a>，因此要在字符串资源文件中指定相应的文本，然后在布局文件中指定字符串资源ID<stringname="link_text_manual">作者博客：<ahref=''></a>android:text="@string/link_text_manual"/>3.2：小部件（widgets）android:autoLink：JAVA代码中：需要使用android.text.html类的fromHtml()方法进行转换。

textView2.setText(Html.fromHtml("作者博客：<ahref=''></a><h1><i><fontcolor='#0000FF'>h1号字、斜体、蓝色</font></i></h5></h1><h3>h3号字</h3><h5><fontcolor='#CC0000'>李宁</font></h5>"));3.2：小部件（widgets）其他知识点介绍：Drawable：Drawable就是一个可画的对象，其可能是一张位图（BitmapDrawable），也可能是一个图形（ShapeDrawable），还有可能是一个图层（LayerDrawable），

我们根据画图的需求，创建相应的可画对象，最终将这种可画对象显示在画布上LayoutInflater：它的作用类似于findViewById(),不同点是LayoutInflater是用来找layout下xml布局文件，并且实例化！而findViewById()是找具体xml下的具体widget控件(如:Button,TextView等)。4.2：小部件（widgets）2：EditText组件：ch03_edittext

是TextView的子类，具有TextView组件的一切属性和方法。

区别：开发中一般使用EditText组件输入文本，TextView组件显示文本<EditTextandroid:layout_width="200dp"android:layout_height="wrap_content" android:textColor="#000000"android:background="#FFFFFF" android:layout_margin="10dp"android:digits="abcdefghijklmnopqrstuvwxyz"/>

3.2：小部件（widgets）2：EditText组件：属性介绍可以通过多种方式指定允许输入的字符Android:digits：设置允许输入哪些字符。如“1234567890.+-*/%()” //设置只接受某些数字，0123456789

//只接受某些字母：abcdefg….xyz android:numeric："integer“//设置只能输入整数，如果是小数则是：decimalandroid:inputType：设置文本的类型，用于帮助输入法显示合适的键盘类型，如textEmailAddress，会显示一些@等特殊字符键盘3.2：小部件（widgets）2：EditText组件：Android:visibility：设置组件是否可见

invisible：不可见，布局中仍然留出位置

gone：不可见，布局中不会留出位置

visible：可见Android:autoText：//自动拼写帮助Android:capitalize：//首字母大写Android：singleLine：//是否单行或者多行，回车是离开文本框还是文本框增加新行Android：password：//密码Android：phoneNumber：

//输入电话号码Android：editable：//是否可编辑3.2：小部件（widgets）3：AutoCompleteTextView组件：ch03_autotext该组件和EditText组件类似，都可以输入文本；不同点：该组件可以绑定一个字符串数组或者List对象，当输入两个及以上字符时，系统将在该组件下方列出被绑定对象中所有以输入字符开头的字符串LayoutXML<AutoCompleteTextViewandroid:id="@+id/autoCompleteTextView" android:layout_width="fill_parent"android:layout_height="wrap_content"/>

3.2：小部件（widgets）3：AutoCompleteTextView组件：Activity

如果需要实现辅助输入列表，在Activity中还需要使用Adapter对象。String[]autoString=newString[]{"a","ab","abc","bb","bcd","bcdf","手机","手机操作系统","手机软件"};ArrayAdapter<String>adapter=newArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line,autoString);//AutoCompleteTextViewAutoCompleteTextViewautoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);autoCompleteTextView.setAdapter(adapter);3.2：小部件（widgets）4：

MultiAutoCompleteTextView组件：

连续输入组件，在AutoCompleteTextView上进行的扩展。当输入完一个字符串后，输入逗号，然后再输入其他字符，系统仍然会显示辅助输入列表。

<MultiAutoCompleteTextViewandroid:id="@+id/multiAutoCompleteTextView" android:layout_width="fill_parent"android:layout_height="wrap_content"/>3.2：小部件（widgets）4：

MultiAutoCompleteTextView组件：Activity说明：

除了使用Adapter之外，还需要说明字符串之间的分隔符。multiAutoCompleteTextView.setAdapter(adapter);multiAutoCompleteTextView.setTokenizer(newMultiAutoCompleteTextView.CommaTokenizer());

3.2：小部件（widgets）5：

按钮与复选框组件：

按钮可分为多种形式：如普通按钮Button、带图像的按钮ImageButton、选项按钮RadioButton。普通按钮Buttonch03_button Button组件的基本用法与TextView、EditText没有太大的差异定义：<Buttonandroid:id="@+id/button1"android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="我的按钮1"/>3.2：小部件（widgets）属性：android:background："#aa00aa"---设置按钮背景颜色android:drawableX：在按钮的文字上下左右显示图片android:drawableTop="@drawable/star“android:drawableBottom="@drawable/star“android:drawableLeft="@drawable/star“android:drawableRight="@drawable/star“3.2：小部件（widgets）事件：单击事件(onClick)

触摸事件（onTouch）

焦点变化事件（onFocusChange）

键盘事件（onKey）:button1=(Button)findViewById(R.id.button1); button1.setOnClickListener(this);button1.setOnTouchListener(this);button1.setOnFocusChangeListener(this);button1.setOnKeyListener(this);3.2：小部件（widgets）图像按钮Buttonch_03_imagebutton， ch_03_imagetextbutton

ImageButton是ImageView的子类，不是TextView的子类。XML定义：<ImageButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/button1_1"/>3.2：小部件（widgets）单选按钮RadioButtonch_03_radiobutton

该组件为Button的子类，因此很多属性和事件都可以使用

用于多选一的应用中，如果想在选中某一个选项后，其他的单选按钮都被设置为未选中状态，需要将RadioButton放置在<RadioGroup>中XML定义<RadioGroupandroid:layout_width="wrap_content"><RadioButtonandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:text="选项3" android:drawableLeft="@drawable/star"android:drawableTop="@drawable/circle" android:drawablePadding="20dp"/>

3.2：小部件（widgets）开关状态按钮组件ToggleButtonch_03_togglebutton

该组件与Button组件的功能基本相同，用法也与Button基本相同。但该组件还提供了可以表示‘开/关’状态的功能，类似于复选框。

该组件在按钮文字的下方显示一个绿色的指示条来表示‘开/关’状态，XML定义：<ToggleButtonandroid:id="@+id/toggleButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:textOff="打开电灯"android:textOn="关闭电灯"/>3.2：小部件（widgets）开关状态按钮组件属性：Checked：ture：指示条显示蓝色，false：白色

可以通过setChecked()方法来设置android:textOff：“关闭”文本

android:textOn：“开启”文本3.2：小部件（widgets）复选框按钮CheckBox ch_03_dynamiccheckbox

该组件用于多选应用

XML定义<CheckBoxandroid:id="@+id/checkbox"android:layout_width="fill_parent"android:layout_height="wrap_content"/>主要属性：Android:checked:设置复选框的状态，ture：选中，false：不选

还可以通过setChecked()方法设置该属性isChecked：判断是否被选中动态创建组件示例：参考例子ch_03_dynamiccheckbox

3.2：小部件（widgets）6：

日期与时间组件：参考案例：ch_03_datetimepicker AndroidSDK提供了两个组件：DatePicker和TimePicker，可以可视化输入日期和时间

同时SDK提供了显示时间的组件：DigitalClock和AnalogClock，分别以数字方式和表盘方式显示时间。DatePicker

XML定义：<DatePickerandroid:id="@+id/datepicker"android:layout_width="fill_parent"android:layout_height="wrap_content"/>3.2：小部件（widgets）DatePicker

方法介绍：getYear()：获得当前的年份getMonth()：获得当前的月份getDayOfMonth()：获得当前的日期init(2001,1,25,OnDateChangedListener)：初始化DatePicker组件，并设置日期变化的事件监听器datePicker.init(2001,1,25,this);3.2：小部件（widgets）6：

日期与时间组件：TimePicker

默认情况下市12小时进制，可以通过setIs24HourView(true)设置XML定义：<TimePickerandroid:id="@+id/timepicker"android:layout_width="fill_parent"android:layout_height="wrap_content"/>3.2：小部件（widgets）TimePicker

方法介绍：getCurrentHour()：获得当前的小时setCurrentHour()：设置当前的小时getCurrentMinute()：获得当前的分钟setCurrentMinute()：设置得当前的分钟setOnTimeChangedListener（）：设置onTimeChanged事件监听器3.2：小部件（widgets）显示时钟的组件：AnalogClock和DigitalClock

ch_03_clock以表盘和数字方式显示时间：XML定义<AnalogClockandroid:layout_width="fill_parent" android:layout_height="wrap_content"/><DigitalClockandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="18dp"/>3.2：小部件（widgets）7：

进度条组件：参考案例：ch03_datetimepicker

任务或者工作完成率是软件展现给用户的一些基本信息，一般通过进度条来展现。

它还有一个次要的进度条，用来显示中间进度，如在流媒体播放的缓冲区的进度。一个进度条也可不确定其进度。在不确定模式下，进度条显示循环动画。这种模式常用于应用程序使用任务的长度是未知的 AndroidSDK提供了ProgressBar组件来展示进度条，同时提供了SeekBar和RatingBar组件，这两个组件在ProgressBar组件上做了进一步的改进。3.2：小部件（widgets）ProgressBar

XML定义：<ProgressBarandroid:layout_width="wrap_content"android:layout_height="wrap_content"style="?android:attr/progressBarStyleLarge"/>属性介绍：该组件在默认情况下是圆形的进度条，可以通过style属性修改进度条为大、中、小三种形式的进度条，同时可以设置为水平进度条style=“?android:attr/progressBarStyleHorizontal”：水平进度条 android:progressBarStyle：默认进度条样式style=“?android:attr/progressBarStyleLarge”圆形进度条style="?android:attr/progressBarStyleSmall"style="?android:attr/progressBarStyleSmallTitle"3.2：小部件（widgets）ProgressBar

属性介绍：android:max=“100”：设置进度条总刻度android:progress=“30”：设置进度条当前刻度值3.2：小部件（widgets）SeekBar ch_03_seekbarXML定义：<SeekBarandroid:id="@+id/seekbar1"android:layout_width="fill_parent" android:layout_height="wrap_content"android:max="100" android:progress="30"/>RatingBar ch_03_ratingbarXML定义：<RatingBarandroid:id="@+id/ratingbar2"android:layout_width="wrap_content" android:layout_height="wrap_content"android:numStars="5" android:stepSize="0.1"/>3.1：视图组件（Views）2、常见视图组件：适配器视图(AdapterView)视图组件的继承关系如右图所示：

适配器视图组件是部分视图组件的父类。该视图组件需要使用适配器来显示数据，

3.1：视图组件（Views）2、常见视图组件：适配器视图(AdapterView)AdapterView的直接子类:

AbsListView,AbsSpinner

AdapterView的间接子类

ExpandableListView,Gallery, GridView,ListView,Spinner

适配器视图类是一个抽象类，无法直接创建该类的实例，只能通过继承该类来实现子类实例，或者已经定义好的适配器视图的子类：列表视图、格子视图等等

3.1：视图组件（Views）2、常见视图组件：适配器视图(AdapterView)适配器是适配器视图和数据之间的桥梁，对适配器的介绍将结合具体的视图进行适配器是该视图和其所依赖的数据之间的桥梁。在android.widget包中定义适配器对象的继承关系如图所示：

3.1：视图组件（Views）2、常见视图组件：列表视图(ListView)

列表视图以其简洁直观的界面效果和灵活的数据模型，赢得了开发人员的青睐。它以列表的形式展示具体内容，并且能够根据数据的长度自适应显示。

ListView采用MVC模式将前端显示与后台数据进行分离：

数据获取需要一个Adapter对象

3.1：视图组件（Views）具体使用：Xml定义如下所示：Listview的定义，可以创建新的资源ID，也可以引用系统资源ID，如果只有一个listview时，可以引用系统Listview的ID<ListViewandroid:id="@id/android:list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:drawSelectorOnTop="false"/>注意：该id的定义，必须引用系统资源中ID为list组件，否则会报错：Causedby:java.lang.RuntimeException:YourcontentmusthaveaListViewwhoseidattributeis'android.R.id.list‘创建新的ID<ListViewandroid:id="@+id/lvCommonListView"android:layout_width="fill_parent"android:layout_height="wrap_content"/>3.1：视图组件（Views）相应的Activity组件Ch04_ListActDemo只有一个List时，可以使用ListActivity组件：注意与前面的只有一个listview的布局定义保持一致（）

普通的Activity组件也可以显示列表视图组件，但是在对列表视图所需的记录数据的管理方面存在问题：Activity组件必须自己去维护这些数据集，增加代码量，同时增加了操作与数据的耦合度。 Android平台基于此种考虑，把列表视图和数据适配器组合在一起，封装成一个新的Activity组件—ListActivity。其有默认的布局资源，也可以定制布局资源。注意必须包含一个ID为’list’的列表视图，否则会报错。

可以直接继承ListActivity，也可以继承Activity，然后在该子类中通过列表适配器进行列表视图与数据的绑定。3.1：视图组件（Views）列表视图(ListView)Adapter适配器：提供数据给列表视图进行显示3.1：视图组件（Views）列表视图(ListView)Adapter适配器：继承关系3.1：视图组件（Views）SimpleAdapter构造函数publicSimpleAdapter(Contextcontext,List<?extendsMap<String,?>>data,intresource,String[]from,int[]to)参数:context

关联SimpleAdapter运行着的视图的上下文。data

一个Map的列表。在列表中的每个条目对应列表中的一行，应该包含所有在from中指定的条目resource一个定义列表项目的视图布局的资源唯一标识。布局文件将至少应包含哪些在to中定义了的名称。from

一个将被添加到Map上关联每一个项目的列名称的列表to应该在参数from显示列的视图。这些应该全是TextView。在列表中最初的N视图是从参数from中最初的N列获取的值。3.1：视图组件（Views）SimpleAdapter//创建列表数据适配器ListAdapteradapter=newSimpleAdapter(ListActAct.this, mItems, R.layout.row_ui, mColumnNames,mViewIds);ListActAct.this：适配器上下文mItems：数组形式的记录集，可以得到展现的记录数R.layout.row_ui：列表视图的行视图资源ID，定义每一行的布局mColumnNames：每行数据的列名数组mViewIds：显示每行数据的组件资源ID数组，定义哪列由哪一个组件显示设置数据适配器，绑定数据setListAdapter(adapter);3.1：视图组件（Views）ArrayAdapterArrayAdapter(Context

context,inttextViewResourceId,

List<T>objects)ArrayAdapter<String>aaData=newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data);

This：上下文ContextR.layout.simple_list_item_1：定义列表项模板Data：显示的数据设置数据适配器，绑定数据setAdapter(adapter);3.1：视图组件（Views）SimpleCursorAdapter

newSimpleCursorAdapter(Contextcontext,intlayout,Cursor

c,String[]from,int[]to)参数解释：context

.当前环境上下文。layout：要绑定的布局文件。c：从数据库返回的数据，存放在Cursor中。from：对应要绑定的数据库中的字段名。to：对应要绑定的控件ID。3.1：视图组件（Views）注意：传入的cursor必须要有“_id”这个字段，Cursor会根据这个字段进行逐一的数据绑定，如果数据库中没有“_id”，则利用SimpleCursorAdapter绑定就会报错。一定要以数据库作为数据源的时候,才能使用SimpleCursorAdapter，这里特别需要注意的一点是：不要忘了在AndroidManifest.xml文件中加入权限<uses-permissionandroid:name="android.permission.READ_CONTACTS"></uses-permission>

3.1：视图组件（Views）列表视图(ListView)setContentView和inflate区别：setContentView()一旦调用,layout就会立刻显示UI；inflate只会把Layout形成一个以view类对象的实例，有需要时再用setContentView(view)显示出来。

一般在activity中通过setContentView()将界面显示出来，但是如果在非activity中如何对控件布局设置操作了，这需LayoutInflater动态加载在程序中动态加载以上布局：

LayoutInflaterflater=LayoutInflater.from(this);

Viewview=flater.inflate(R.layout.example,null);

获取布局中的控件。

button=(Button)view.findViewById(R.id.button);

textView=(TextView)view.findViewById(R.id.tview);

3.1：视图组件（Views）LayoutInflater：具体作用：1、对于一个没有被载入或者想要动态载入的界面，都需要使用LayoutInflater.inflate()来载入；2、对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。获得LayoutInflater实例的三种方式1.LayoutInflaterinflater=getLayoutInflater();//调用Activity的getLayoutInflater()2.LayoutInflaterlocalinflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);3.LayoutInflaterinflater=LayoutInflater.from(context);3.1：视图组件（Views）LayoutInflater.inflate()方法介绍：publicViewinflate(intresource,ViewGrouproot)：reSource：View的layout的IDroot：如果提供root(不传null)时，返回值其实就是这个root，这个方法就是把xml解析成view之后挂载这个root下。

如果传null(不提供root)，返回值是View，它就是当前xml布局里面的根节点。3.1：视图组件（Views）列表视图(ListView)设置列表视图的表头和表脚this.getListView().addHeaderView( this.getLayoutInflater().inflate(R.layout.header_view,null), null,false);this.getListView().addFooterView( this.getLayoutInflater().inflate(R.layout.footer_view,null), null,false);参数说明：this.getLayoutInflater().inflate(R.layout.foot