9Android基本组件之常用widget组件介绍图片视图,图片按钮,切换图片,网格视图

2006, ZTE Corporation. All rights reserved.,Confidential,Confidential,*,Confidential,9 Android,基本组件之常用,widget,组件介绍,(,图片视图，图片按钮，切换图片，网格视图,),学习目标, 掌握,Android,中常用的,widget,组件, 应用,widget,组件制作自己的,UI,应用, 图片视图（,ImageView,）介绍与应用, 图片按钮（,ImageButton,）介绍与应用, 切换图片（,ImageDwitcher&Gallery,）介绍与应用, 网格视图（,GridView,）介绍与应用,图片视图（,ImageView,）介绍与应用,ImageView,组件，主要作用是展示图片。,这里同样先在,main.xml,文件中添加一个按钮，用以打开演示,ImageView,组件的界面，实现代码如下：,设定完按钮后，编写响应代码：,Button image_view_button = (Button) findViewById(R.id.,image_view_button,);,image_view_button.setOnClickListener(,image_view_button_listener,);,private,Button.OnClickListener,image_view_button_listener,=,new,Button.OnClickListener() ,public,void,onClick(View v) ,Intent intent =,new,Intent();,intent.setClass(MainActivity.,this, ImageViewActivity.,class,);,startActivity(intent);,;,图片视图（,ImageView,）介绍与应用,在单击按钮后，会启动一个新的,ImageViewActivity,所以这里我们应该创建一个新的,ImageViewActivity,.java,文件。实现代码如下：,public,void,onCreate(Bundle savedInstanceState) ,super,.onCreate(savedInstanceState);,setTitle(,是办正事，还是找乐子,);,setContentView(R.layout.,image_view,);,在上面代码我们可以看到，调用了一个,image_view.xml,的文件，所以，我们要设计一下显示的多选框的样式，对应设计代码如下：,图片视图（,ImageView,）介绍与应用,图片视图（,ImageView,）,图片视图（,ImageView,）介绍与应用,图片按钮（,ImageButton,）介绍与应用,ImageButton,是可以提供一个图片按钮。,这里现在,main.xml,中添加一个按钮，单击按钮会启动这个,ImageButtonActivity,，添加,Button,的代码如下：,定义一个,id,为,“,image_button_button,”,的按钮，并设定其宽度和高度都是和内容自适应，并设定其显示文字为,“,哥显示的是图片按钮,”,。,其对应的响应代码如下：,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_listener,=,new,Button.OnClickListener() ,public,void,onClick(View v) ,Intent intent =,new,Intent();,intent.setClass(MainActivity.,this, ImageButtonActivity.,class,);,startActivity(intent);,;,这里创建了一个新的,Activity,，,名字叫,ImageButtonActivity,。,同时创建,image_button.xml,的界面,UI,文件，代码见,image_button.xml,下面我们来看下,ImageButtonActivity.java,中的代码：,图片按钮（,ImageButton,）介绍与应用,public,void,onCreate(Bundle savedInstanceState) ,super,.onCreate(savedInstanceState);,setTitle(,哥显示的是图片按钮,);,setContentView(R.layout.,image_button,);,接着在,AndroidManifest.xml,中添加如下代码：,下面是项目效果图：,图片按钮（,ImageButton,）介绍与应用,图片按钮（,ImageButton,）,图片按钮（,ImageButton,）介绍与应用,切换图片（,ImageSwitcher&Gallery,）介绍与应用,这里介绍的是,ImageSwitcher,和,Gallery,这两组件，下面的例子用来介绍这两个组件。这个例子相对比较复杂，其最终需要实现的是在屏幕的上方展示一个大图，下方是一组可以滚动的图片，其中用到了一些比较复杂的东西。和前面一样，现在,main.xml,中创建一个入口按钮，实现代码如下：,程序运行后,单击跳转到,ImageShowActivity,，该,Acvitity,用来演示,ImageSwitcher&Gallery,。首先指定其需要绑定的模板文件是,image_show.xml,，在其中添加,ImageSwitcher&Gallery,。实现代码如下：,切换图片（,ImageSwitcher&Gallery,）介绍与应用,然后看下,ImageShowActivity.java,的代码，首先看下它的,onCreate,方法，实现代码如下：,public,void,onCreate(Bundle savedInstanceState) ,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,(,this,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&Gallery,）介绍与应用,getView,实现代码如下：,public,View getView(,int,position, View convertView, ViewGroup parent) ,ImageView i =,new,ImageView(,mContext,);,i.setImageResource(,mThumbIds,position);,i.setAdjustViewBounds(,true,);,i.setLayoutParams(,new,Gallery.LayoutParams(,LayoutParams.,WRAP_CONTENT, LayoutParams.,WRAP_CONTENT,);,i.setBackgroundResource(R.drawable.,picture_frame,);,return,i;,切换图片（,ImageSwitcher&Gallery,）介绍与应用,public,View makeView() ,ImageView i =,new,ImageView(,this,);,i.setBackgroundColor(0xFF000000);,i.setScaleType(ImageView.ScaleType.,FIT_CENTER,);,i.setLayoutParams(,new,ImageSwitcher.LayoutParams(LayoutParams.,FILL_PARENT,LayoutParams.,FILL_PARENT,);,return,i;,这个方法为,ImageSwitcher,返回了一个,View,。,ImageSwitcher,调用过程是这样的，首先要有一个,Factory,为它提供一个,View,，然后,ImageSwitcher,就可以初始化各种资源。,切换图片（,ImageSwitcher&Gallery,）介绍与应用,使用,ImageSwitcher,的注意点,注意！,在使用一个,ImageSwitcher,之前，一定要调用,setFactory,方法，否则，,setImageResource,这个方法会出现空指针异常。,ImageSwitcher,的切换效果就是由这两句实现：,g.setAdapter(,new,ImageAdapter(,this,);,g.setOnItemSelectedListener(,this,);,这里的,setInAnimation,是资源被读入到这个,ImageSwitcher,中时实现的动画效果，,setOutAnimation,是资源文件从这个,ImageSwitcher,里消失的时候要实现的动画效果，这里所有的动画都是从,Android.R,系统文件里读取的。,接着在,AndroidManifest.xml,中添加如下代码：,切换图片演示 切换图片演示,切换图片（,ImageSwitcher&Gallery,）演示效果,GridView,是格子视图，可以将很多图片以一定的大小显示出来，在做类似相册、图片浏览等应用时非常有用。实现的操作步骤和前面讲解的其他组件实现一样，首先在,main.xml,文件中添加一个“哥显示的是网格按钮”，实现代码如下：,其响应代码为：,private,Button.OnClickListener,grid_view_button_listener,=,new,Button.OnClickListener() ,public,void,onClick(View v) ,Intent intent =,new,Intent();,intent.setClass(MainActivity.,this, GridViewActivity.,class,);,startActivity(intent);,;,网格视图（,GridView,）介绍与应用,紧接着需要了解的是,ImageAdapter,是如何实现的，实现代码如下：,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,View 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,);,imageView.setPadding(8, 8, 8, 8);,else,imageView = (ImageView) convertView;,imageView.setImageResource(,mThumbIds,position);,return,imageView;,网格视图（,GridView,）介绍与应用,图片的引用代码为：,/ references to our images,private,Integer,mThumbIds,= ,R.drawable.,grid_mybaby_02,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.,mybaby_2, R.drawable.,mybaby_3,R.drawable.,mybaby_4, R.drawable.,mybaby_5,R.drawable.,mybaby_6, R.drawable.,mybaby_7,;,接着在,AndroidManifest.xml,中添加如下代码：,网格视图（,GridView,）介绍与应用,网格视图界面展示,网格视图（,GridView,）界面展示,Tab,组件可以实现多个标签栏样式的效果，单击每个标签，打开其对应的内容界面。这里先在,main.xml,里添加一个按钮“哥显示的是标签”，实现代码如下：,其单击响应实现的代码为：,private,Button.OnClickListener,tab_demo_button_listener,=,new,Button.OnClickListener() ,public,void,onClick(View v) ,Intent intent =,new,Intent();,intent.setClass(MainActivity.,this, TabDemoActivity.,class,);,startActivity(intent);,;,标签,（,T,ab,）介绍与应用,接着完成,TabDemoActivity,的实现，需要集成自,TabActivity,，其实现代码如下：,public,void,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.addTab(tabHost.newTabSpec(,MC,老,9,).setIndicator(,MC,老,9,),.setContent(R.id.,view2,);,tabHost.addTab(tabHost.newTabSpec(,地精,).setIndicator(,地精,),.setContent(R.id.,view3,);,标签,（,T,ab,）介绍与应用,接下来实现模板文件,tab_demo.xml,，实现代码如下：,标签,（,T,ab,）介绍与应用,本章小结,至此我们已经将,Android,中比较常用的,widget,组件全部讲完了。通过这四章的学习，学员应该对,widget,组件有了一个直观感受，也了解了其各自的表现形式和基本的使用方法。这里只是比较简单直观的介绍，没有深入研究每个组件的详细用法，但是当掌握了这里介绍的基础后，再去看,SDK,文档或者查,API,的时候会更有效果。,谢谢！,