1、,Android移动开发 项目化教程,本章导读,在前几个项目中，我们已经掌握Android应用程序中基本组件的使用方法，并学习了Android中的Activity类的编写。在一些项目中为了实现一些特殊效果，需要一些高级组件来丰富UI的效果，本章项目我们就来学习自动完成文本框、消息提示框、对话框等一些高级组件的设计和开发。,项目十,高级用户界面设计,项目要求,项目十,高级用户界面设计,自动完成文本框（AutoCompleteTextView），可根据用户输入的内容，匹配指定的数据源，以列表的形式显示数据源中所有符合要求的数据，以供用户选择，减少用户的输入内容，方便用户使用。例如常用的百度搜索。
2、自动完成文本框的定义格式如下：,项目十,高级用户界面设计,01,自动完成文本框AutoCompleteTextView,在Android中AutoCompleteTextView组件类继承自EditText类，所以EditText组件所支持的属性，AutoCompleteTextView组件类都可以进行直接的调用。AutoCompleteTextView支持的XML属性如表10-1所示。,项目十,高级用户界面设计,表10-1 AutoCompleteTextView支持的XML属性,高级组件的程序开发与一般组件程序开发有所不同。在高级组件开发中，一般需要XML文件和Java程序的配合使用才能完
3、成，下面是一个带自动提示功能的搜索框的实现，程序如下所示：,项目十,高级用户界面设计,1）布局文件activity_main.xml, AutoCompleteTextView android:id=“+id/autoCompleteTextView1“android:layout_width=“wrap_content“android:layout_height=“wrap_content“,程序代码如下：,项目十,高级用户界面设计,android:layout_weight=“7“android:completionHint=“输入搜索内容“ /在下拉菜单指定提示标题android:com
4、pletionThreshold=“1“ /指定用户至少输入几个字符才会显示提示android:text=“ ,项目十,高级用户界面设计,2）主活动文件MainActivity.Java程序,public class MainActivity extends Activity /* 成员变量：字符串数组，用于保存下拉菜单列表项 */private static final String COUNTRIES = “天猫“, “天气预报“, “天天向上“, “天津“,“天津小吃“, “天津现代职业技术学院“, “美丽天津“ ; Override protected void onCreate(Bu
5、ndle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);/ 获取自动完成文本框final AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1); / 创建一个ArrayAdapter适配器，显示列表项 ArrayAdapter adapter = new ArrayAdapter(this,an
6、droid.R.layout.simple_dropdown_item_1line, COUNTRIES);,项目十,高级用户界面设计,/ 自动完成文本框与适配器关联 autoCompleteTextView.setAdapter(adapter); / 获取按钮，并添加单击事件监听器 Button button = (Button) findViewById(R.id.button1); button.setOnClickListener(new OnClickListener() Overridepublic void onClick(View arg0) / 通过消息提示框，显示自动完成
7、文本框中输入的内容Toast.makeText(MainActivity.this,autoCompleteTextView.getText().toString(),Toast.LENGTH_SHORT).show(); ); ,实现的效果如图10-1所示。,项目十,高级用户界面设计,图10-1 AutoCompleteTextView实现效果图,项目十,高级用户界面设计,02,进度条ProgressBar,ProgressBar也是UI界面中常用的一种高级组件，通常用于向用户显示某些耗时操作完成的百分比。在实际应用中，当一个应用程序在后台执行项目时（如下载项目），前台界面不会有任何信息，这
8、时用户根本不知道程序是否在执行，以及执行的进度等，因此需要使用ProgressBar来显示程序执行的进度。,项目十,高级用户界面设计,在开发时，我们可以通过style属性为ProgressBar指定风格，该属性支持如下几种属性值： android:style/Widget.ProgressBar.Horizontal：水平进度条。 android:style/Widget.ProgressBar.Inverse：细的、顺时针旋转的、中等圆形普通进度条。 android:style/Widget.ProgressBar.Large：粗的、顺时针旋转的、大圆形进度条。 android:style/
9、Widget.ProgressBar.Large.Inverse：粗的、顺时针旋转的、大圆形普通进度条。 android:style/Widget.ProgressBar.Small：细的、顺时针旋转的、小圆形进度条。 android:style/Widget.ProgressBar.Small.Inverse：细的、顺时针旋转的、小圆形普通进度条。,项目十,高级用户界面设计,“?android:attr/progressBarStyle“：逆时针旋转的、半封闭的、中等圆形进度条。 “?android:attr/progressBarStyleHorizontal“：细的、水平方向的进度条。
10、“?android:attr/progressBarStyleInverse“：逆时针旋转的、半封闭的、中等圆形普通进度条。 “?android:attr/progressBarStyleLarge“：逆时针旋转的、全封闭的、大圆形进度条。 “?android:attr/progressBarStyleLargeInverse“：逆时针旋转的、全封闭的、大圆形普通进度条。 “?android:attr/progressBarStyleSmall“：逆时针旋转的、半封闭的、小圆形进度条。 “?android:attr/progressBarStyleSmallInverse“：逆时针旋转的、半封
11、闭的、小圆形进度条。,ProgressBar在开发的时候支持如表10-2所示的属性。,项目十,高级用户界面设计,表10-2 ProgressBar支持的XML属性,ProgressBar的常用方法有以下两个：,项目十,高级用户界面设计,SetProgress(int)：设置进度的完成百分比。 IncrementProgressBy(int)：设置进度条的进度增加或减少量。参数为整数增，为负数减。,实现一个水平进度条和圆形进度条的程序如下：,项目十,高级用户界面设计,1）布局文件activity_main.xml,ProgressBarandroid:id=“+id/progressBar1“s
12、tyle=“android:style/Widget.ProgressBar.Horizontal“ /水平进度条,项目十,高级用户界面设计,android:layout_width=“match_parent“android:layout_height=“wrap_content“android:max=“100“ /,2）主活动文件MainActivity.Java（见书中详细代码）,实现效果如图10-2所示。,项目十,高级用户界面设计,图10-2 ProgressBar实现效果图,项目十,高级用户界面设计,03,拖动条SeekBar,拖动条通常用于对Android系统中的某项数值进行调节
13、，如音量、亮度等。拖动条和前面介绍的进度条非常相似，进度条ProgressBar采用颜色填充来表明进度完成程度，而拖动条SeekBar通过滑块的位置来标识数值，并且允许用户拖动滑块来改变进度。在开发中，程序员可通过设置android:thumb属性来改变滑块外观（需要制定一个Drawable对象，该对象作为自定义滑块）。为了让程序能够响应拖动条滑块位置的改变，我们可以为它绑定一个名为OnSeekBarChangeListener监听器。,下面我们来看一个在屏幕上显示拖动条的例子。,项目十,高级用户界面设计,1）布局文件activity_main.xml,项目十,高级用户界面设计,/拖动条当前值
14、 ,项目十,高级用户界面设计,2）主活动文件MainActivity.Java,public class MainActivity extends Activity /* 成员变量 */private SeekBar seekBar; /拖动条Overrideprotected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);/ 获取文本视图final TextView result = (TextView) fi
15、ndViewById(R.id.textView1);/ 获取拖动条，并添加拖动事件监听器seekBar = (SeekBar) findViewById(R.id.seekBar1);,项目十,高级用户界面设计,seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() Overridepublic void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) result.setText(“当前值：“ + arg1);Overridepublic void on
16、StartTrackingTouch(SeekBar arg0) Toast.makeText(MainActivity.this, “开始滑动“, Toast.LENGTH_SHORT) .show();Overridepublic void onStopTrackingTouch(SeekBar arg0) Toast.makeText(MainActivity.this, “结束滑动“+ arg0.getProgress(), Toast.LENGTH_SHORT) .show();); ,SeekBar的效果如图10-3所示。,项目十,高级用户界面设计,图10-3 SeekBar实现效
17、果图,项目十,高级用户界面设计,星级评分条表示对某一事物或应用的支持、评价，或对某种应用服务的满意程度等, 在星级评分条开发时，允许程序员直接通过拖动星星图案来改变进度。星级评分条与拖动条有着相同的一个父类AbsSeekBar，因此用法、功能也十分接近，都允许用户通过拖动来改变进度。为了让程序能够响应星级评分条评分的改变，可以为它绑定一个OnRatingBarChangeListener监听器。,04,星级评分条RatingBar,项目十,高级用户界面设计,星级评分条支持的常见XML属性，如表10-3所示。,表10-3 星级评分条支持的常见XML属性,星级评分条常用方法有以下三个： getRa
18、ting()：用于获取等级，表示选中了几颗星。 getStepSize()：用于获取每次最少要改变多少个星级。 getProgress()：用于获取进度，获取到的进度值= getRating()*getStepSize()。,项目十,高级用户界面设计,下面是一个实现星级评分条的程序，代码如下：,/设置初始星级,1）布局文件activity_main.xml,项目十,高级用户界面设计,public class MainActivity extends Activity / 成员变量private RatingBar ratingBar; / 星级评分条 Override protected vo
19、id onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);/ 获取星级评分条ratingBar = (RatingBar) findViewById(R.id.ratingBar1);/ 获取按钮，并添加单击事件监听器Button button = (Button) findViewById(R.id.button1);button.setOnClickListener(new OnClickListener() ,2）主活动文
20、件MainActivity.Java,项目十,高级用户界面设计,Overridepublic void onClick(View arg0) int result = ratingBar.getProgress(); / 获取进度float rating = ratingBar.getRating(); / 获取等级float step = ratingBar.getStepSize(); / 获取每次最少改变多少颗星Log.i(“星级评分条“, “step=“ + step + “ result=“ + result+ “ rating=“ + rating);Toast.makeText(
21、MainActivity.this, “你得到了“ + rating + “颗星“,Toast.LENGTH_SHORT).show();); ,项目十,高级用户界面设计,实现效果如图10-4所示。,图10-4 星形效果图实现,项目十,高级用户界面设计,05,选项卡TabHost,选项卡（TabHost）主要功能是进行分类管理，它是一种非常实用的组件，可以在一个窗口中显示多组标签页，每个标签页Tab相当于获得了一个与外部容器相同大小的组件摆放区域。通过这种方式，就可以在一个容器里放置更多组件，如手机中的通话记录、未接来电、已接电话等。选项卡主要由TabHost、TabWidget和FrameL
22、ayout三个组件组成，如果程序需要监控TabHost里当前标签页的改变，可为它注册监听器TabHost.OnTabChangeListener。 选项卡的实现一般按照如下步骤进行： （1）在布局文件中添加所需的TabHost、TabWidget和FrameLayout组件。 （2）编写各标签页所对应的XML布局文件。 （3）在Activity中，获取并初始化TabHost组件。 （4）为TabHost对象添加标签页。,项目十,高级用户界面设计,以下是选项卡的常用方法： newTabSpace(String tag)：创建选项卡。 addTab(TabHost.TabSpec tabSpace
23、)：添加标签页。 getCurrentView()：获取当前的View组件。 setup()：建立TabHost对象。 setCurrentTab(int index)：设置当前显示的Tab编号。 setCurrentTabByTag(String tag)：设置当前显示的Tab名称。 getTabContentView()：返回标签容器FrameLayout的对象。 setOnTabChangeListener(TabHost.OnTabChangeListener)：设置标签改变时触发。,项目十,高级用户界面设计,下面是一个实现显示未接来电和已接来电选项卡的示例，程序如下：,1）布局文件a
24、ctivity_main.xml,项目十,高级用户界面设计,11,2）编辑标签页1布局文件tab1.xml,项目十,高级用户界面设计,3）编辑标签页2布局文件tab2.xml,项目十,高级用户界面设计,public class MainActivity extends Activity / 成员变量private TabHost tabHost;Overrideprotected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.activity
25、_main);/ 获取TabHost组件，并初始化tabHost = (TabHost) findViewById(R.id.tabhost);tabHost.setup(); / 初始化TabHost组件/ 为TabHost对象添加标签页：一个用于模拟显示未接来电，/另一个用于模拟显示已接来电LayoutInflater inflater = LayoutInflater.from(this);,4）主活动文件MainActivity.Java,项目十,高级用户界面设计,/声明并实例化一个LayoutInflater对象inflater.inflate(R.layout.tab1, tabH
26、ost.getTabContentView();inflater.inflate(R.layout.tab2, tabHost.getTabContentView();tabHost.addTab(tabHost.newTabSpec(“tab01“).setIndicator(“未接来电“).setContent(R.id.linearLayout02); /添加第1个标签页tabHost.addTab(tabHost.newTabSpec(“tab02“).setIndicator(“已接来电“).setContent(R.id.linearLayout03); /添加第2个标签页 Ove
27、rride public boolean onCreateOptionsMenu(Menu menu) / Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true; ,项目十,高级用户界面设计,实现效果如图10-5所示。,图10-5 显示未接来电和已接来电的选项卡,项目十,高级用户界面设计,06,图像切换器ImageSwitcher,图像切换器ImageSwitcher的主要功能是完成图片的切换显示，
28、即可以单击按钮逐张切换显示的图片。在切换时，还可以为其添加一些动画效果。ImageSwitcher是ViewSwitcher的子类。ViewSwitcher类专门用于显示切换操作。在使用ImageSwitcher切换图片时，定义的Activity类必须实现ViewSwitcher.ViewFactory接口（视图切换工厂），并通过makeView()方法来创建用于显示图片的ImageView。在使用ImageSwitcher切换图片时，可以通过Animation类指定切换图片时的动画显示效果。要想使用Animation类（动画类），还需使用AnimationUtils类完成。,项目十,高级用户
29、界面设计,图像切换器ImageSwitcher类常用的操作方法如下： （1）ImageSwitcher(Context Context)：创建ImageSwitcher对象。 （2）setFactory(ViewSwitcher. ViewFactory factory)：设置ViewFactory对象，用于完成两个图片切换时ViewSwitcher的转换操作。 （3）setImageRecource(int resid)：设置显示的图片资源ID。,项目十,高级用户界面设计,项目十,高级用户界面设计,下面实现一个简单图片切换器，程序如下：,1）布局文件activity_main.xml,项目十
30、,高级用户界面设计,2）主活动文件MainActivity.Java（见书中详细代码）,实现效果如图10-6所示。,项目十,高级用户界面设计,图10-6 简单图片切换器效果图,项目十,高级用户界面设计,07,画廊视图Gallery,画廊Gallery能够水平方向显示内容，并且可用手指直接拖动图片移动，一般用来浏览图片，被选中的选项位于中间，并且可用影响事件显示信息。在使用画廊视图时，首先在屏幕上添加Gallery组件。使用画廊视图，也需要使用Adapter提供显示的数据。通常使用BaseAdapter类为Gallery组件提供数据。,项目十,高级用户界面设计,表10-4 Gallery支持的X
31、ML属性,画廊支持的XML属性如表10-4所示。,项目十,高级用户界面设计,下图是一个用于浏览图片的画廊，程序如下：,/设置列表项间的间距 ,1）布局文件activity_main.xml,项目十,高级用户界面设计,2）属性资源文件attrs.xml,3）主活动文件MainActivity.Java（见书中详细代码）,画廊的实现效果如图10-7所示。,项目十,高级用户界面设计,图10-7 画廊,项目十,高级用户界面设计,08,消息提示框Toast,在Android系统中经常会给用户显示一些提示信息，消息提示框被Android定义为Toast，通常用于显示一些快速提示信息。Toast类用于在屏幕
32、中显示一个消息提示框，该消息提示框没有任何控制按钮，并且不会获得焦点，经过一段时间后自动消失。,项目十,高级用户界面设计,使用消息提示框Toast类的步骤如下：,1）创建Toast类对象,创建Toast类对象的方法有两种，分别是： 使用构造方法（Toast toast=new Toast(this);）。 调用makeText()方法创建一个名为toast的Toast对象，例如：Toast toast= Toast. makeText(this,“要显示的内容“,TOAST.LENGTH_SHORT)，其中在参数中，this表示在当前Activity类中被使用，TOAST.LENGTH_SHO
33、RT代表短时显示。,项目十,高级用户界面设计,2）调用Toast类提供的方法,经常使用的方法如表10-5所示。,表10-5 Toast支持的XML属性,项目十,高级用户界面设计,3）调用Toast类的show()方法,显示消息提示框。需要注意的是必须调用该方法，否则设置的消息提示框不显示。下面实现一个消息提示框，程序如下：,Toast.makeText(this, “我是通过makeText()方法创建的消息显示框！“, 1).show();,消息框的效果如图10-8所示。,图10-8 消息框的效果图,项目十,高级用户界面设计,下面我们就通过做一个实现仿Windows 7图片预览窗格效果的项目
34、，来对Android中高级组件进行综合的应用。,创建名为AndroidCode10的Android工程，包结“com.xdxy.ui”，如图10-9所示。,图10-9 创建工程,项目十,高级用户界面设计,界面的设计效果如图10-10所示。,图10-10 项目效果图,项目十,高级用户界面设计,下面编辑布局文件activity_main.xml，布局为LinearLayout，方向为水平方向，并在其中添加，GridView和ImageSwitcher两个组件。,GridViewandroid:id=“+id/gridView“android:layout_width=“640px“,项目十,高级用
35、户界面设计,android:layout_width=“640px“android:layout_height=“match_parent“android:layout_marginTop=“10px“android:horizontalSpacing=“3px“android:numColumns=“4“android:verticalSpacing=“3px“ /,项目十,高级用户界面设计,（1）编辑主活动文件MainActivity.Java，实现GridView和ImageSwitcher。（见书中详细代码）,（2）程序编写好后，将其运行到Android开发终端上进行测试。,项目十,高级用户界面设计,01,实现如图10-11所示效果，拖动星级能够改变图片的透明度。,图10-11 拖动星级能够改变图片的透明度,项目十,高级用户界面设计,02,实现如图10-12所示幻灯片式图片浏览器程序的开发。,图10-12 幻灯片式图片浏览器,
