第6讲 高级用户界面设计_视图组件view_other

1、 Data WarehouseAndroid平台手机嵌入式开发平台手机嵌入式开发第6讲 高级用户界面设计-视图组件Views.1 主要内容：主要内容：u视图组件视图组件u小部件（小部件（WidgetsWidgets）u菜单菜单u对话框对话框u消息提示条消息提示条2 4.1：视图组件（：视图组件（Views）2 2、常见视图组件：、常见视图组件：u扩展列表视图扩展列表视图(Expandable ListView) (Expandable ListView) Ch06_ExpandableListViewDemoCh06_ExpandableListViewDemo扩展列表视图是在列表视图的基础上

2、进行了扩展，其组织形式要比列表视图更加多样化。如图所示：列表项中又嵌套了列表3 4.1：视图组件（：视图组件（Views）u扩展列表视图扩展列表视图(Expandable ListView)(Expandable ListView)lXml定义如下所示：定义如下所示：ExpandableListView 标记使用：标记使用： 来定义来定义注意：该注意：该idid的定义，和的定义，和ListViewListView组件一样，也必须引用系统资源中组件一样，也必须引用系统资源中IDID为为listlist组件，否则会报错：组件，否则会报错：4 4.1：视图组件（：视图组件（Views）u扩展列表视图

3、扩展列表视图(Expandable ListView)(Expandable ListView)l相应的相应的ExpandableListActivity组件：组件：同列表视图必须和列表同列表视图必须和列表Activity配套使用一样，扩展列表视图组件也配套使用一样，扩展列表视图组件也必须和扩展列表必须和扩展列表Activity组件组件ExpandableListActivity配套使用配套使用。开发者可以直接继承开发者可以直接继承ExpandableListActivity ，然后在该子类中通过，然后在该子类中通过列表适配器进行列表视图与数据的绑定列表适配器进行列表视图与数据的绑定。publ

4、ic class ExpandableListViewDemoAct extends ExpandableListActivity /设置数据适配器，绑定数据setListAdapter(adapter); 5 4.1：视图组件（：视图组件（Views）u扩展列表视图扩展列表视图(Expandable ListView)(Expandable ListView)lAdapter适配器：提供数据给列表视图进行显示适配器：提供数据给列表视图进行显示可以从ExpandableListAdapter类继承ExpandableListAdapter adapter = new SimpleExpanda

5、bleListAdapter(this,mGroups,R.layout.group_view,new String Group.KEY1,new int R.id.TXT_GROUP_ITEM , mPeople,R.layout.child_view,new String People.KEY1,People.KEY2,People.KEY3,People.KEY4,People.KEY5,mDetailViewsId);參考參考列表视图的適配器的定義規範列表视图的適配器的定義規範6 4.1：视图组件（：视图组件（Views）u扩展列表视图扩展列表视图(Expandable ListVie

6、w)(Expandable ListView)l点选事件响应点选事件响应通过重载onChildClick ()方法进行回调;要获取所点击的条目内容，需要通过组位置和子位置联合确定：要获取所点击的条目内容，需要通过组位置和子位置联合确定：public boolean onChildClick(ExpandableListView parent, View v,int groupPosition, int childPosition, long id) People people = new People(mPeople.get(groupPosition).get(childPosition);

7、Toast.makeText(this, people.toString(), Toast.LENGTH_LONG).show();7 4.1：视图组件（：视图组件（Views）u下拉列表组件下拉列表组件(Spinner)(Spinner)SpinnerSpinner组件用于下拉列表，用法和组件用于下拉列表，用法和ListViewListView相似，装载数据也需要相似，装载数据也需要AdapterAdapter对象对象8 4.1：视图组件（：视图组件（Views）u下拉列表组件下拉列表组件(Spinner)(Spinner)lXml定义如下所示：定义如下所示：Spinner 标记使用：标记使

8、用： 来定义来定义9 4.1：视图组件（：视图组件（Views）u下拉列表组件下拉列表组件(Spinner)(Spinner)lActivity定义：定义：ArrayAdapter aaAdapter = new ArrayAdapter(this,android.R.layout.simple_spinner_itemandroid.R.layout.simple_spinner_item, applicationNames);SimpleAdapter simpleAdapter = new SimpleAdapter(this, items,R.layout.itemR.layout.i

9、tem, new String ivLogo, tvApplicationName , new int R.id.ivLogo, R.id.tvApplicationName );spinner2.setAdapter(simpleAdapter);spinner2.setAdapter(simpleAdapter);10 4.1：视图组件（：视图组件（Views）u垂直滚动视图垂直滚动视图(Scroll View)(Scroll View)： Ch06_ScrollViewDemoCh06_ScrollViewDemo、 Ch06_ScrollViewCh06_ScrollView11 4.

10、1：视图组件（：视图组件（Views）u滚动视图滚动视图(Scroll(Scroll View)View)lXml定义如下所示：定义如下所示：ScrollView 标记使用：标记使用： 来定义来定义注意：滚动视图可以作为布局的根组件注意：滚动视图可以作为布局的根组件当标签中组件所占的总高度超过屏幕的高度，在屏幕右侧出现滚动条当标签中组件所占的总高度超过屏幕的高度，在屏幕右侧出现滚动条12 4.1：视图组件（：视图组件（Views）u滚动视图滚动视图(Scroll(Scroll View)View)l实现机制实现机制滚动视图是框架布局的子类，因此具有框架布局的特点；ScrollView只支持垂直

11、滚动，而且只能包含一个组件，一般是定义只支持垂直滚动，而且只能包含一个组件，一般是定义LinearLayout，并将LinearLayout的orientation设置为vertical， LinearLayout中可以放置多个组件；当组件的所占的高度超过屏幕高度，在屏幕的右侧出现一个滚动条。l相应的相应的Activity组件：组件：没有特别之处，只是继承Activity即可public class ScrollViewDemoAct extends Activity13 4.1：视图组件（：视图组件（Views）u滚动视图滚动视图(Scroll(Scroll View)View)l滚动视图的

12、滚动视图的“滚动滚动”方式方式有两种滚动方式：绝对滚动绝对滚动和相对滚动相对滚动绝对滚动：即直接跳转到视图的头部或者尾部的滚动绝对滚动：即直接跳转到视图的头部或者尾部的滚动mMainView.fullScroll(ScrollView.FOCUS_UP);mMainView.fullScroll(ScrollView.FOCUS_DOWN);相对滚动：即相对于视图顶部位置或者相对于当前页的滚动相对滚动：即相对于视图顶部位置或者相对于当前页的滚动mMainView.scrollTo(0, mCurPos);pageScroll（）方法（）方法14 4.1：视图组件（：视图组件（Views）u水平

13、滚动视图水平滚动视图(HorizontalScrollView)(HorizontalScrollView)： ch06_horizontalscrollviewch06_horizontalscrollview和和ScrollViewScrollView相似；相似；15 4.1：视图组件（：视图组件（Views）u水平滚动视图水平滚动视图(HorizontalScrollView) (HorizontalScrollView) lXml定义如下所示：定义如下所示：HorizontalScrollView HorizontalScrollView xmlns:android=http:/ Li

14、nearLayout android:orientation=horizontal“标记使用：标记使用： 来定义来定义注意：滚动视图可以作为布局的根组件注意：滚动视图可以作为布局的根组件当标签中组件所占的总宽度超过屏幕的宽度，在屏幕下面出现滚动条当标签中组件所占的总宽度超过屏幕的宽度，在屏幕下面出现滚动条16 4.1：视图组件（：视图组件（Views）u可垂直和水平滚动视图可垂直和水平滚动视图 ch06_bothscrollviewch06_bothscrollview可以将可以将ScrollViewScrollView和和HorizontalScrollView HorizontalScro

15、llView 组件结合使用，可以实现垂直和水组件结合使用，可以实现垂直和水平滚动效果平滚动效果；即相互嵌套；即相互嵌套17 4.1：视图组件（：视图组件（Views）u网格视图组件网格视图组件(GridView) (GridView) ch06_gridviewch06_gridviewGridViewGridView组件用于显示一个表格，以二维表的方式显示列表项，即单元格组件用于显示一个表格，以二维表的方式显示列表项，即单元格。每一个单元格是一个。每一个单元格是一个viewview对象，在单元格上可以放置任一组件对象，在单元格上可以放置任一组件18 4.1：视图组件（：视图组件（Views）

16、u网格视图组件网格视图组件(GridView)(GridView)ch06_gridviewch06_gridviewlXml定义如下所示：定义如下所示：GridView 标记使用：标记使用： GridView 来定义来定义列数的设定：列数的设定： android:numColumns=5“android:numColumns=5“行数的设定：无需设定行数，组件会自动折行显示行数的设定：无需设定行数，组件会自动折行显示19 4.1：视图组件（：视图组件（Views）u网格视图组件网格视图组件(GridView)(GridView)lActivity定义：定义：该组件也需要定义该组件也需要定义A

17、dapterAdapter，通过，通过AdapterAdapter进行数据显示和加载进行数据显示和加载SimpleAdapter simpleAdapter = new SimpleAdapter(this, cells,SimpleAdapter simpleAdapter = new SimpleAdapter(this, cells,R.layout.cell, new StringR.layout.cell, new String imageview , new int imageview , new int R.id.imageview ); R.id.imageview );gri

18、dView.setAdapter(simpleAdapter);gridView.setAdapter(simpleAdapter);20 4.1：视图组件（：视图组件（Views）u画廊（相册）组件画廊（相册）组件(Gallery)(Gallery) Gallery Gallery组件用于显示图像列表，只能水平显示一行，而且支持水平滑动组件用于显示图像列表，只能水平显示一行，而且支持水平滑动效果效果21 4.1：视图组件（：视图组件（Views）u画廊（相册）组件画廊（相册）组件(Gallery)(Gallery)lXml定义如下所示：定义如下所示：Gallery android:id=+i

19、d/gallery android:layout_marginTop=30dp /标记使用：标记使用： Gallery 来定义来定义22 4.1：视图组件（：视图组件（Views）u画廊（相册）组件画廊（相册）组件(Gallery) (Gallery) lActivity定义：定义：该组件也需要定义该组件也需要定义AdapterAdapter，通过，通过AdapterAdapter进行数据显示和加载进行数据显示和加载imageAdapter = new ImageAdapter(this);imageAdapter = new ImageAdapter(this);gallery.setAda

20、pter(imageAdapter);gallery.setAdapter(imageAdapter);23 4.1：视图组件（：视图组件（Views）u图片切换器图片切换器 ImageSwitcherImageSwitcher： ImageView ImageView的选择器的选择器ImageSwitcher的原理：的原理：ImageSwitcher有两个子View：ImageView，当左右滑动的时候，就在这两个在这两个ImageView之间来回切换来之间来回切换来显示图片l继承关系：继承关系：继承于ViewSwitcher，说明具备了切换功能切换功能继承于ViewAnimator，说明具

21、备了动画功能动画功能24 4.1：视图组件（：视图组件（Views）u图片切换器图片切换器 ImageSwitcher ImageSwitcherl定义：定义：25 4.1：视图组件（：视图组件（Views）u图片切换器图片切换器 ImageSwitcher ImageSwitcherl实例化：由实例化：由ViewFactory工厂类进行创建；通过工厂类进行创建；通过makeView()方法创建方法创建View，然后把，然后把创建出来的创建出来的View添加到添加到ImageSwitcher上。上。第一步：第一步：is = (ImageSwitcher) findViewById(R.id.s

22、witcher);is.setFactory(ViewFactory);第二步：第二步：重写重写ViewFactory类的类的makeView()方法方法Overridepublic View makeView() ImageView imageView = new ImageView(this); imageView.setImageResource(arrayPicturespictureIndex); return imageView;26 4.1：视图组件（：视图组件（Views）u图片切换器图片切换器 ImageSwitcher ImageSwitcherl重要方法：重要方法：set

23、ImageURI(Uri uri)：设置图片地址设置图片地址setImageResource(int resid)：设置图片资源库设置图片资源库setImageDrawable(Drawable drawable)：绘制图片绘制图片设置动画效果：设置动画效果： setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in); setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out);27 4.1：视图组件（：视图组件（Views）u标签组件标签组件(TabHost) (TabHost) ch06_tabch06_tab使用标签组件可以对屏幕进行分页。使用标签组件可以