Android 高级UI设计笔记11：Gallery（画廊控件）之Gallery基本使用

1. 这里要向大家介绍Android控件Gallery（画廊控件）

　　Gallery控件主要用于横向显示图像列表，不过按常规做法。Gallery组件只能有限地显示指定的图像。也就是说，如果为Gallery组件指定了10张图像，那么当Gallery组件显示到第10张时，就不会再继续显示了。

2. Gallery基本用法：

步骤如下：

（1）首先我们新建一个Android工程，工程目录如下：

（2）activity_main.xml（主布局文件），如下：

在activity_main.xml添加ImageView、Gallery控件

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     tools:context="com.himi.gallerydemo.MainActivity" >

     <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="5dp"
         android:gravity="center_horizontal"
         android:text="战斗机美图："
         android:textSize="40sp"
         android:textStyle="bold" />

     <ImageView
         android:id="@+id/imageView"
         android:layout_width="match_parent"
         android:layout_height="400dp"
         android:scaleType="fitCenter"
         android:src="@drawable/ic_launcher" />

     <!-- android:spacing 设置图片之间的间距 -->

     <Gallery
         android:id="@+id/gallery"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="5dp"
         android:spacing="2dp" />

 </LinearLayout>

（3）如果我们想要加载的图片数据到Gallery，我们需要适配器，但是Android没有匹配Gallery的适配器，这里需要自定义适配器，如下：

 package com.himi.gallerydemo;

 import android.content.Context;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.Gallery;
 import android.widget.ImageView;
 import android.widget.LinearLayout;

 /**
  *
  * 自定义ImageAdapter适配器
  * 要实现Gallery画廊控件功能，需要一个容器来存放Gallery显示的图片。
  * 我们可以使用一个继承自BaseAdapter类的派生类ImageAdapter来装这些图片。
  * @author hebao
  *
  */
 public class ImageAdapter extends BaseAdapter {
     //上下文对象，提供给外界实例化ImageAdapter
     private Context mContext;

     //待加载到Gallery之中的图片id数组
     public static int images[] = {
             R.drawable.img1,
             R.drawable.img2,
             R.drawable.img3,
             R.drawable.img4,
             R.drawable.img5,
             R.drawable.img6,
             R.drawable.img7,
             R.drawable.img8
     };

     //ImageAdapter构造方法
     public ImageAdapter(Context mContext) {
         this.mContext = mContext;
     }

     //获得图片的个数
     @Override
     public int getCount() {

         return images.length;
     }

     //获取对应索引上的图片
     @Override
     public Object getItem(int position) {
         // TODO Auto-generated method stub
         return images[position];
     }
     //获取对应图片的索引id
     @Override
     public long getItemId(int position) {
         // TODO Auto-generated method stub
         return position;
     }

     //获取适配器中指定位置的视图对象
     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
         ImageView iv = new ImageView(mContext);
         iv.setImageResource(images[position % images.length]);
         iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
         iv.setLayoutParams(new Gallery.LayoutParams(77, 77));
         return iv;
     }

 }

（4）若想要实现Gallery图片选中，显示详细图片，触发的事件setOnItemSelectedListener，核心代码如下：

来到MainActivity，如下：

 package com.himi.gallerydemo;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.view.Window;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.Gallery;
 import android.widget.ImageView;
 import android.widget.Toast;

 public class MainActivity extends Activity {
     private Gallery gallery;
     private ImageView iv;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         iv = (ImageView) findViewById(R.id.imageView);
         iv.setImageResource(ImageAdapter.images[0]);

         gallery = (Gallery) findViewById(R.id.gallery);
         gallery.setAdapter(new ImageAdapter(this));
         gallery.setOnItemClickListener(new OnItemClickListener() {

             @Override
             public void onItemClick(AdapterView<?> parent,
                     View view, int position, long id) {
                 iv.setImageResource(ImageAdapter.images[position]);
                 Toast.makeText(MainActivity.this, "点击是图片"+(position+1), 0).show();

             }
         });
     }

 }

运行效果如下：

• 刚刚打开应用程序效果如下：

• 点击第6张图片效果，如下：