UI控件之 Gallery 画廊控件的使用

    Gallery控件一般是用于显示图像列表，因此也称为是画廊控件， Gallery只能水平显示一行，而且支持水平滑动效果。也就是说，单击、选中或者拖动Gallery中的图像， Gallery图像中的列表会根据不同的情况向左向右移动，直到显示到最后的一个图像为止。

    1. 在学习Gallery控件之前，我们需要掌握一些准备知识

1) Adapter (适配器)

查看这个 Adapter 的 Android 官方API文档：适配器对象作为AdapterView 和这个视图下数据的桥梁，它提供了返回数据选项的权利，当然它还可以在这些数据集合中添加数据元素。

它是一个接口，可以看出有很多实现这个接口的子类的适配器，为什么Android中的Adapter会有这么多适配器呢？主要是因为android中的UI展示的控件不一样，所以要用到这些不同的适配器来填充数据。如下图所示：


    当我们手机的屏幕想要显示一些数据的时候，它不是直接来源与数据源，而是先从适配器中去取出数据，数据源中的数据则需要填充到适配中，这样Android在展示某些数据就可以用不同的方式来展示，同时也需要不同的适配器来装载这些数据来填充的手机的UI控件中，这个类似于生活中的笔记本电脑。

2) 创建一个类继承 BaseAdapter

了解上面的知识框架之后，我们必须自己创建一个适配器类来继承 BaseAdapter，注意的是我们在声明一个类去继承这个适的时候，一般都不会直接去用这个类去实现Adapter接口，我们一般是去继承BaseAdapter这个抽象类，它是所有适配器中可以自定义的适配器，它里面所填充的格式或者内容都是用户可以自己去定义的。

 

[java] view plain copy
 
  1. public class ImageAdapter extends BaseAdapter  
而后，我们必须实现下面这四个方法

1) getCount() 表示在适配器中有多少个数据选项

2) getItem(int position) 表示根据position位置来得到数据选项的值

3) getItemId(int position)  根据position位置得到所在选项的Id

4) getView(int position, View convertView, ViewGroup parent)【重要】表示在数据集合中指定一个位置得到一个视图来显示数据。更多内容，查看API文档中的这个方法定义。

由于在这里我们设计的是一个自定义的适配器，所以需要用自定义的布局来显示。这种情况下通常Android的通用布局是不能满足需求的，所以可以手工创建一个View视图，也可以用一个inflate来加载一个XML文件，然后从数据中根据position获得每一个Item的值，加载到指定的XML布局中，参数说明如下：

int position：     表示需要显示视图的适配器中选项的位置信息

View convertView： 参数表示一个旧的布局，如果没有新的布局加载的时候，将使用旧的布局

ViewGroup parent： 当前这个填充的布局，会被追加到父布局中。

2. Gallery画廊案例的实现

1) 布局文件

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <Gallery android:id="@+id/gallery"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_marginTop="30dp"/>  
  11.   
  12. </LinearLayout>  

2) attrs.xml,在values文件下，这个文件主要添加一些属性的信息，替我们找到gallery的设计风格

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <declare-styleable name="Gallery">  
  4.         <attr name="android:galleryItemBackground"></attr>  
  5.           
  6.     </declare-styleable>     
  7. </resources>  

 

3) 主程序代码

 

[java] view plain copy
 
  1. public class GalleryDemo extends Activity {  
  2.   
  3.     private Gallery gallery;  
  4.     private ImageAdapter imageAdapter;  
  5.   
  6.     // 声明图片的数组  
  7.     private int[] resIds = {  
  8.             R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4,  
  9.             R.drawable.item5, R.drawable.item6, R.drawable.item7, R.drawable.item8,  
  10.             R.drawable.item9, R.drawable.item10, R.drawable.item11, R.drawable.item12,  
  11.             R.drawable.item13, R.drawable.item14, R.drawable.item15,  
  12.     };  
  13.   
  14.     /** Called when the activity is first created. */  
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);  
  19.         gallery = (Gallery) findViewById(R.id.gallery);  
  20.         imageAdapter = new ImageAdapter(this);  
  21.         gallery.setAdapter(imageAdapter);  
  22.     }  
  23.   
  24.     public class ImageAdapter extends BaseAdapter {  
  25.   
  26.         private Context context;  
  27.   
  28.         int mGralleryItemBackground; // 使用简单的计数器，主要是完成往每一个Item中去填充背景的图片  
  29.   
  30.         public ImageAdapter(Context context) {  
  31.             this.context = context;  
  32.             // 使用类型数组来读取属性  
  33.             TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);  
  34.             mGralleryItemBackground = typedArray.getResourceId(  
  35.                     R.styleable.Gallery_android_galleryItemBackground, 0);  
  36.   
  37.         }  
  38.   
  39.         @Override  
  40.         public int getCount() {  
  41.             // TODO Auto-generated method stub  
  42.             return Integer.MAX_VALUE; // 返回当前适配器最大值，是整数类型的。  
  43.         }  
  44.   
  45.         @Override  
  46.         public Object getItem(int position) {  
  47.             // TODO Auto-generated method stub  
  48.             return resIds[position]; // 返回数组resIds[]的位置信息  
  49.         }  
  50.   
  51.         @Override  
  52.         public long getItemId(int position) {  
  53.             // TODO Auto-generated method stub  
  54.             return position;  
  55.         }  
  56.   
  57.         @Override  
  58.         public View getView(int position, View convertView, ViewGroup parent) {  
  59.   
  60.             ImageView imageView = new ImageView(context);  
  61.             // 表示往imageView中填充图片的信息，填充的时候传递是resIds[]的下标  
  62.             imageView.setImageResource(resIds[position % resIds.length]);  
  63.             // 表示当前ImageView 把图片 不按比例扩大/缩小到View的大小显示  
  64.             imageView.setScaleType(ImageView.ScaleType.FIT_XY);  
  65.             // 设置ImageView的大小  
  66.             imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));  
  67.             // 设置ImageView的背景  
  68.             imageView.setBackgroundResource(mGralleryItemBackground);  
  69.             // TODO Auto-generated method stub  
  70.             return imageView;  
  71.         }  
  72.   
  73.     }  
  74. }  

3. 程序执行结果

 

源码下载地址：http://download.csdn.NET/detail/xukunhui2/5527233

 

posted @ 2016-11-27 15:44  天涯海角路  阅读(123)  评论(0)    收藏  举报