Android画廊Gallery的使用

我们在智能手机上应该都见过可以滑动操作的图片集，在Android开发中我们是用Gallery实现这种图片滑动效果的。Gallery是一个内部元素可以水平滚动，并且可以把当前选择的子元素定位在它中心的布局组件。本文就重点讲解Gallery的使用方法。

       下面先给出一张图让大家直观的看看本文Gallery例子的运行界面效果。

Gallery的显示效果

       下面上代码，相关解释都放在代码里了。

       1、建立一个新项目HelloGallery。

       2、拷贝wallpaper_0.jpg…wallpaper_9.jpg 10个图片文件到res/drawable目录。

       3、res/layout/main.xml文件的内容如下：

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01">  
  3. <imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/ImageView01" android:src="@drawable/wallpaper_0">  
  4. </imageview>  
  5.   
  6. <gallery android:layout_height="wrap_content" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/Gallery01" android:spacing="5dp">  
  7. </gallery>  
  8. </framelayout>  

       其中我们使用FrameLayout来实现叠加效果，使用ImageView来显示大图，Gallery来展示画廊，android:spacing="5dp" 属性则是用来设置元素之间的间隔。

       4、在res/values/目录中新建一个attrs.xml内容如下：

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <resources>  
  3.         <declare -styleable="" name="HelloGallery">  
  4.                 <attr name="android:galleryItemBackground">  
  5.         </attr></declare>  
  6. </resources>  

       5、在MainHelloGallery.java中的内容如下：

Java代码
  1. package android.basic.lesson13;   
  2.   
  3. import android.app.Activity;   
  4. import android.content.Context;   
  5. import android.content.res.TypedArray;   
  6. import android.os.Bundle;   
  7. import android.view.View;   
  8. import android.view.ViewGroup;   
  9.   
  10. import android.widget.AdapterView;   
  11. import android.widget.AdapterView.OnItemClickListener;   
  12. import android.widget.BaseAdapter;   
  13. import android.widget.Gallery;   
  14. import android.widget.ImageView;   
  15. import android.widget.Toast;   
  16.   
  17. public class MainHelloGallery extends Activity {   
  18.   
  19.         /** Called when the activity is first created. */  
  20.         @Override  
  21.         public void onCreate(Bundle savedInstanceState) {   
  22.                 super.onCreate(savedInstanceState);   
  23.                 setContentView(R.layout.main);   
  24.   
  25.                 //定义UI组件   
  26.                 final ImageView iv= (ImageView)findViewById(R.id.ImageView01);   
  27.                 Gallery g = (Gallery) findViewById(R.id.Gallery01);   
  28.   
  29.                 //设置图片匹配器   
  30.                 g.setAdapter(new ImageAdapter(this));   
  31.   
  32.                 //设置AdapterView点击监听器，Gallery是AdapterView的子类   
  33.                 g.setOnItemClickListener(new OnItemClickListener() {   
  34.   
  35.                         @Override  
  36.                         public void onItemClick(AdapterView<?> parent, View view,   
  37.                                         int position, long id) {   
  38.                                 //显示点击的是第几张图片   
  39.                                 Toast.makeText(MainHelloGallery.this, "" + position,   
  40.                                                 Toast.LENGTH_LONG).show();   
  41.                                 //设置背景部分的ImageView显示当前Item的图片   
  42.                                 iv.setImageResource(((ImageView)view).getId());   
  43.                         }   
  44.                 });   
  45.         }   
  46.   
  47.         //定义继承BaseAdapter的匹配器   
  48.         public class ImageAdapter extends BaseAdapter {   
  49.   
  50.                 //Item的修饰背景   
  51.                 int mGalleryItemBackground;   
  52.   
  53.                 //上下文对象   
  54.                 private Context mContext;   
  55.   
  56.                 //图片数组   
  57.                 private Integer[] mImageIds = { R.drawable.wallpaper_0,   
  58.                                 R.drawable.wallpaper_1, R.drawable.wallpaper_2,   
  59.                                 R.drawable.wallpaper_3, R.drawable.wallpaper_4,   
  60.                                 R.drawable.wallpaper_5, R.drawable.wallpaper_6,   
  61.                                 R.drawable.wallpaper_7, R.drawable.wallpaper_8,   
  62.                                 R.drawable.wallpaper_9 };   
  63.   
  64.                 //构造方法   
  65.                 public ImageAdapter(Context c){   
  66.                         mContext = c;   
  67.                         //读取styleable资源   
  68.                 TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);   
  69.                 mGalleryItemBackground = a.getResourceId(   
  70.                         R.styleable.HelloGallery_android_galleryItemBackground, 0);   
  71.                 a.recycle();   
  72.   
  73.                 }   
  74.   
  75.                 //返回项目数量   
  76.                 @Override  
  77.                 public int getCount() {   
  78.                         return mImageIds.length;   
  79.                 }   
  80.   
  81.                 //返回项目   
  82.                 @Override  
  83.                 public Object getItem(int position) {   
  84.                         return position;   
  85.                 }   
  86.   
  87.                 //返回项目Id   
  88.                 @Override  
  89.                 public long getItemId(int position) {   
  90.                         return position;   
  91.                 }   
  92.   
  93.                 //返回视图   
  94.                 @Override  
  95.                 public View getView(int position, View convertView, ViewGroup parent) {   
  96.   
  97.                         ImageView iv = new ImageView(mContext);   
  98.                         iv.setImageResource(mImageIds[position]);   
  99.                         //给生成的ImageView设置Id，不设置的话Id都是-1   
  100.                         iv.setId(mImageIds[position]);   
  101.                         iv.setLayoutParams(new Gallery.LayoutParams(120, 160));   
  102.                         iv.setScaleType(ImageView.ScaleType.FIT_XY);   
  103.                         iv.setBackgroundResource(mGalleryItemBackground);   
  104.                         return iv;   
  105.                 }   
  106.   
  107.         }   
  108. }  

       我们点击某一张图片，会把该子元素的图片显示在放在后面一层的ImageView组件中。有兴趣的同学可以了解一下AdapterView的继承关系：

AdapterView的继承关系

       掌握了Gallery的用法后，我们也可以做出很炫的图片滑动效果了。

 

Gallery即为画廊,美术馆的意思，Android为我们开发者提供了这么一个view组件，极大的方便我们开发图片类应用，而且效果很美观，再配合上开发者独自添加进去的效果，Gallery相关的开发变得越来越吃香。

        今天walfred也来尝试一下Gallery的使用，写了一个demo。简单的讲就是使用系统的Gallery控件，再给其加上一个适配器()，当然这个适配器是继承自BaseAdapter，源码如下：

Java代码
  1. public class GalleryTestActivity extends Activity {  
  2.     private Context mContext;  
  3.     private Gallery myGallery;  
  4.       
  5.       
  6.     /** Called when the activity is first created. */  
  7.     @Override  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.main);  
  11.           
  12.         setView();  
  13.     }  
  14.       
  15.     public void setView(){  
  16.         mContext = this;  
  17.         myGallery = (Gallery) findViewById(R.id.mygallery);  
  18.         myGallery.setAdapter(new ImagAdapter());  
  19.     }  
  20.       
  21.       
  22.     public class ImagAdapter extends BaseAdapter{  
  23.         private Integer[] imgRes = {  
  24.                 R.drawable.p1,  
  25.                 R.drawable.p2,  
  26.                 R.drawable.p3  
  27.         };  
  28.   
  29.         public ImagAdapter(){  
  30.               
  31.         }  
  32.           
  33.         @Override  
  34.         public int getCount() {  
  35.             // TODO Auto-generated method stub  
  36.             return imgRes.length;  
  37.         }  
  38.   
  39.         @Override  
  40.         public Object getItem(int position) {  
  41.             // TODO Auto-generated method stub  
  42.             return imgRes[position];  
  43.         }  
  44.   
  45.         @Override  
  46.         public long getItemId(int position) {  
  47.             // TODO Auto-generated method stub  
  48.             return position;  
  49.         }  
  50.   
  51.         @Override  
  52.         public View getView(int position, View convertView, ViewGroup parent) {  
  53.             // TODO Auto-generated method stub  
  54.             ImageView img;  
  55.             if (convertView == null){  
  56.                 img = new ImageView(mContext);  
  57.                 convertView = img;  
  58.                 convertView.setTag(img);  
  59.             }else {  
  60.                 img = (ImageView) convertView.getTag();  
  61.             }  
  62.             img.setImageResource(imgRes[position]);  
  63.             img.setLayoutParams(new Gallery.LayoutParams(200, 200));  
  64.             img.setScaleType(ImageView.ScaleType.FIT_XY);  
  65.             return convertView;  
  66.         }  
  67.       

 

 

 

posted on 2013-03-07 11:48  爱哎唉  阅读(383)  评论(0)    收藏  举报