1、9 Android9 Android基本组件之常用基本组件之常用widgetwidget组件介绍组件介绍(图片图片视图，图片按钮，切换图片，网格视图视图，图片按钮，切换图片，网格视图)程浩程浩 2006,ZTE Corporation.All rights reserved.学习目标学习目标 掌握掌握AndroidAndroid中常用的中常用的widgetwidget组件组件 应用应用widgetwidget组件制作自己的组件制作自己的UIUI应用应用 图片视图（图片视图（ImageViewImageView）介绍与应用）介绍与应用 图片按钮（图片按钮（ImageButtonImageButt
2、on）介绍与应用）介绍与应用 切换图片（切换图片（ImageDwitcher&GalleryImageDwitcher&Gallery）介绍与应用）介绍与应用 网格视图（网格视图（GridViewGridView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.图片视图（图片视图（ImageViewImageView）介绍与应用）介绍与应用 ImageViewImageView组件，主要作用是展示图片。组件，主要作用是展示图片。这里同样先在这里同样先在main.xmlmain.xml文件中添加一个按钮，用以打开演示文件中添加一个按钮，用
3、以打开演示ImageViewImageView组件的界面，实现代码如下：组件的界面，实现代码如下：设定完按钮后，编写响应代码：设定完按钮后，编写响应代码：2006,ZTE Corporation.All rights reserved.Button image_view_button=(Button)findViewById(R.id.image_view_button);image_view_button.setOnClickListener(image_view_button_listener);private Button.OnClickListener image_view_butto
4、n_listener=new Button.OnClickListener()public void onClick(View v)Intent intent=new Intent();intent.setClass(MainActivity.this,ImageViewActivity.class);startActivity(intent);图片视图（图片视图（ImageViewImageView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.在单击按钮后，会启动一个新的在单击按钮后，会启动一个新的ImageViewActivit
5、yImageViewActivity,所以这里我们所以这里我们应该创建一个新的应该创建一个新的ImageViewActivityImageViewActivity.java.java文件。实现代码如下：文件。实现代码如下：public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);setTitle(是办正事，还是找乐子是办正事，还是找乐子);setContentView(R.layout.image_view);在上面代码我们可以看到，调用了一个在上面代码我们可以看到，调用了一个image_
6、view.xmlimage_view.xml的文件，所以，我的文件，所以，我们要设计一下显示的多选框的样式，对应设计代码如下：们要设计一下显示的多选框的样式，对应设计代码如下：图片视图（图片视图（ImageViewImageView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.图片视图（图片视图（ImageViewImageView）图片视图（图片视图（ImageViewImageView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.图片按钮（图片按钮（ImageButt
7、onImageButton）介绍与应用）介绍与应用 ImageButton ImageButton是可以提供一个图片按钮。是可以提供一个图片按钮。这里现在这里现在main.xmlmain.xml中添加一个按钮，单击按钮会启动这个中添加一个按钮，单击按钮会启动这个ImageButtonActivityImageButtonActivity，添加，添加ButtonButton的代码如下：的代码如下：定义一个定义一个idid为为“image_button_buttonimage_button_button”的按钮，并设定其宽度和高度都的按钮，并设定其宽度和高度都是和内容自适应，并设定其显示文字为是和
8、内容自适应，并设定其显示文字为“哥显示的是图片按钮哥显示的是图片按钮”。其对应的响应代码如下：其对应的响应代码如下：2006,ZTE Corporation.All rights reserved.Button image_button_button=(Button)findViewById(R.id.image_button_button);image_button_button.setOnClickListener(image_button_button_listener);private Button.OnClickListener image_button_button_listene
9、r=new Button.OnClickListener()public void onClick(View v)Intent intent=new Intent();intent.setClass(MainActivity.this,ImageButtonActivity.class);startActivity(intent);这里创建了一个新的这里创建了一个新的Activity，名字叫名字叫ImageButtonActivityImageButtonActivity。同时创建同时创建image_button.xmlimage_button.xml的界面的界面UIUI文件，代码见文件，代码
10、见image_button.xmlimage_button.xml下面我们来看下下面我们来看下ImageButtonActivity.javaImageButtonActivity.java中的代码：中的代码：图片按钮（图片按钮（ImageButtonImageButton）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);setTitle(哥显示的是图片按钮);setCont
11、entView(R.layout.image_button);接着在接着在AndroidManifest.xmlAndroidManifest.xml中添加如下代码：中添加如下代码：下面是项目效果图：下面是项目效果图：图片按钮（图片按钮（ImageButtonImageButton）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.图片按钮（图片按钮（ImageButtonImageButton）图片按钮（图片按钮（ImageButtonImageButton）介绍与应用）介绍与应用 2006,ZTE Corporation.All ri
12、ghts reserved.切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）介绍与应用）介绍与应用 这里介绍的是这里介绍的是ImageSwitcherImageSwitcher和和GalleryGallery这两组件，下面的例子用来这两组件，下面的例子用来介绍这两个组件。这个例子相对比较复杂，其最终需要实现的是在屏幕介绍这两个组件。这个例子相对比较复杂，其最终需要实现的是在屏幕的上方展示一个大图，下方是一组可以滚动的图片，其中用到了一些比的上方展示一个大图，下方是一组可以滚动的图片，其中用到了一些比较复杂的东西。和前面一样，现在较复杂的
13、东西。和前面一样，现在main.xmlmain.xml中创建一个入口按钮，实现中创建一个入口按钮，实现代码如下：代码如下：程序运行后程序运行后,单击跳转到单击跳转到ImageShowActivityImageShowActivity，该，该AcvitityAcvitity用来演示用来演示ImageSwitcher&GalleryImageSwitcher&Gallery。首先指定其需要绑定的模板文件是。首先指定其需要绑定的模板文件是image_show.xmlimage_show.xml，在其中添加，在其中添加ImageSwitcher&GalleryImageSwitcher&Gallery
14、。实现代码如下：。实现代码如下：2006,ZTE Corporation.All rights reserved.切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.然后看下然后看下ImageShowActivity.javaImageShowActivity.java的代码，首先看下它的的代码，首先看下它的onCreateonCreate方法，方法，实现代码如下：实现代码如下：public void onCreate(Bundle s
15、avedInstanceState)super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.image_show);setTitle(“多方位展示我的宝贝多方位展示我的宝贝);mSwitcher=(ImageSwitcher)findViewById(R.id.switcher);mSwitcher.setFactory(this);mSwitcher.setInAnimation(AnimationUtils.loadAnimation(t
16、his,android.R.anim.fade_in);mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out);Gallery g=(Gallery)findViewById(R.id.gallery);g.setAdapter(new ImageAdapter(this);g.setOnItemSelectedListener(this);切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）介绍与应用）介绍与应用 2006,Z
17、TE Corporation.All rights reserved.getViewgetView实现代码如下：实现代码如下：public View getView(int position,View convertView,ViewGroup parent)ImageView i=new ImageView(mContext);i.setImageResource(mThumbIdsposition);i.setAdjustViewBounds(true);i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT
18、,LayoutParams.WRAP_CONTENT);i.setBackgroundResource(R.drawable.picture_frame);return i;切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.public View makeView()ImageView i=new ImageView(this);i.setBackgroundColor(0 xFF000000);i.setScaleType(Imag
19、eView.ScaleType.FIT_CENTER);i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);return i;这个方法为这个方法为ImageSwitcherImageSwitcher返回了一个返回了一个ViewView。ImageSwitcherImageSwitcher调用过调用过程是这样的，首先要有一个程是这样的，首先要有一个FactoryFactory为它提供一个为它提供一个ViewView，然后，然后ImageSwitche
20、rImageSwitcher就可以初始化各种资源。就可以初始化各种资源。切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.使用使用ImageSwitcherImageSwitcher的注意点的注意点注意！注意！在使用一个在使用一个ImageSwitcherImageSwitcher之前，一定要调用之前，一定要调用setFactorysetFactory方法，否则，方法，否则，setImageResourcesetImageResour
21、ce这个方法会出现空指针异常。这个方法会出现空指针异常。ImageSwitcherImageSwitcher的切换的切换效果就是由这两句实现：效果就是由这两句实现：g.setAdapter(new ImageAdapter(this);g.setOnItemSelectedListener(this);这里的这里的setInAnimationsetInAnimation是资源被读入到这个是资源被读入到这个ImageSwitcherImageSwitcher中时实现的动中时实现的动画效果，画效果，setOutAnimationsetOutAnimation是资源文件从这个是资源文件从这个Imag
22、eSwitcherImageSwitcher里消失的时里消失的时候要实现的动画效果，这里所有的动画都是从候要实现的动画效果，这里所有的动画都是从Android.RAndroid.R系统文件里读系统文件里读取的。取的。接着在接着在AndroidManifest.xmlAndroidManifest.xml中添加如下代码：中添加如下代码：2006,ZTE Corporation.All rights reserved.切换图片演示切换图片演示 切换图片演示切换图片演示切换图片（切换图片（ImageSwitcher&GalleryImageSwitcher&Gallery）演示效果）演示效果 200
23、6,ZTE Corporation.All rights reserved.GridView GridView是格子视图，可以将很多图片以一定的大小显示出来，在是格子视图，可以将很多图片以一定的大小显示出来，在做类似相册、图片浏览等应用时非常有用。实现的操作步骤和前面讲解做类似相册、图片浏览等应用时非常有用。实现的操作步骤和前面讲解的其他组件实现一样，首先在的其他组件实现一样，首先在main.xmlmain.xml文件中添加一个文件中添加一个“哥显示的是网哥显示的是网格按钮格按钮”，实现代码如下：，实现代码如下：其响应代码为：其响应代码为：private Button.OnClickListe
24、ner grid_view_button_listener=new Button.OnClickListener()public void onClick(View v)Intent intent=new Intent();intent.setClass(MainActivity.this,GridViewActivity.class);startActivity(intent);网格视图（网格视图（GridViewGridView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.紧接着需要了解的是紧接着需要了解的是ImageAdapt
25、erImageAdapter是如何实现的，实现代码如下：是如何实现的，实现代码如下：public class ImageAdapter extends BaseAdapter private Context mContext;public ImageAdapter(Context c)mContext=c;public int getCount()return mThumbIds.length;public Object getItem(int position)return null;public long getItemId(int position)return 0;public Vie
26、w getView(int position,View convertView,ViewGroup parent)ImageView imageView;if(convertView=null)/if its not recycled,initialize some attributes imageView=new ImageView(mContext);imageView.setLayoutParams(new GridView.LayoutParams(85,85);imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);imageV
27、iew.setPadding(8,8,8,8);else imageView=(ImageView)convertView;imageView.setImageResource(mThumbIdsposition);return imageView;网格视图（网格视图（GridViewGridView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.图片的引用代码为：图片的引用代码为：/references to our images private Integer mThumbIds=R.drawable.grid_mybaby_02
28、,R.drawable.grid_mybaby_03,R.drawable.grid_mybaby_04,R.drawable.grid_mybaby_05,R.drawable.grid_mybaby_06,R.drawable.grid_mybaby_07,R.drawable.grid_mybaby_08,R.drawable.grid_mybaby_09,R.drawable.grid_mybaby_010,R.drawable.grid_mybaby_011,R.drawable.grid_mybaby_012,R.drawable.mybaby_1,R.drawable.mybab
29、y_2,R.drawable.mybaby_3,R.drawable.mybaby_4,R.drawable.mybaby_5,R.drawable.mybaby_6,R.drawable.mybaby_7 ;接着在接着在AndroidManifest.xmlAndroidManifest.xml中添加如下代码：中添加如下代码：网格视图（网格视图（GridViewGridView）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.网格视图界面展示网格视图界面展示网格视图（网格视图（GridViewGridView）界面展示）界面展示 20
30、06,ZTE Corporation.All rights reserved.Tab Tab组件可以实现多个标签栏样式的效果，单击每个标签，打开其组件可以实现多个标签栏样式的效果，单击每个标签，打开其对应的内容界面。这里先在对应的内容界面。这里先在main.xmlmain.xml里添加一个按钮里添加一个按钮“哥显示的是标哥显示的是标签签”，实现代码如下：，实现代码如下：其单击响应实现的代码为：其单击响应实现的代码为：private Button.OnClickListener tab_demo_button_listener=new Button.OnClickListener()public
31、 void onClick(View v)Intent intent=new Intent();intent.setClass(MainActivity.this,TabDemoActivity.class);startActivity(intent);标签标签（T Tabab）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.接着完成接着完成TabDemoActivityTabDemoActivity的实现，需要集成自的实现，需要集成自TabActivityTabActivity，其实，其实现代码如下：现代码如下：public void
32、 onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);setTitle(哥是变换的标签哥是变换的标签);TabHost tabHost=getTabHost();LayoutInflater.from(this).inflate(R.layout.tab_demo,tabHost.getTabContentView(),true);tabHost.addTab(tabHost.newTabSpec(黑妹黑妹).setIndicator(黑妹黑妹).setContent(R.id.view1);tabHost
33、.addTab(tabHost.newTabSpec(MC老老9).setIndicator(MC老老9).setContent(R.id.view2);tabHost.addTab(tabHost.newTabSpec(地精地精).setIndicator(地精地精).setContent(R.id.view3);标签标签（T Tabab）介绍与应用）介绍与应用 2006,ZTE Corporation.All rights reserved.接下来实现模板文件接下来实现模板文件tab_demo.xmltab_demo.xml，实现代码如下：，实现代码如下：标签标签（T Tabab）介绍与应
34、用）介绍与应用 2006,ZTE Corporation.All rights reserved.Tab1 Tab2 Tab3Tab1 Tab2 Tab3 标签标签（T Tabab）演示效果演示效果 2006,ZTE Corporation.All rights reserved.本章小结本章小结 至此我们已经将至此我们已经将AndroidAndroid中比较常用的中比较常用的widgetwidget组件全部讲完了。通组件全部讲完了。通过这四章的学习，学员应该对过这四章的学习，学员应该对widgetwidget组件有了一个直观感受，也了解了组件有了一个直观感受，也了解了其各自的表现形式和基本的使用方法。这里只是比较简单直观的介绍，其各自的表现形式和基本的使用方法。这里只是比较简单直观的介绍，没有深入研究每个组件的详细用法，但是当掌握了这里介绍的基础后，没有深入研究每个组件的详细用法，但是当掌握了这里介绍的基础后，再去看再去看SDKSDK文档或者查文档或者查APIAPI的时候会更有效果。的时候会更有效果。谢谢！谢谢！
