ImageSwitcher&Gallery组件和GridView组件的使用

第一、切换图片（ImageSwitcher&Gallery）组件的使用，最终实现在屏幕上方展示一个大图，在屏幕下方是一组可以滚动的图片。

第二、网格试图（GridView）的使用，最终实现上面显示图片和图片名称，下面显示网格图的大图，（点击各网格图实现查看大图）。

项目列表图图如下：

下面让我们来看一下上述功能的具体实现：

首先是程序入口MainActivity相关文件，然后将要要实现的功能添加到activity_main.xml文件中，使用按钮单击事件来实现相应的功能。

下面展示的是MainActivity.java文件代码以及与之相对应的activity_main.xml文件

public class MainActivity extends Activity {                                                                                  Button button1,button2;       @Override       public void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           setContentView(R.layout.activity_main);           button1=(Button) findViewById(R.id.button1);           button2=(Button) findViewById(R.id.button2);           //imageSwitcher&Gallery组件单击事件           button1.setOnClickListener(new View.OnClickListener() {               @Override               public void onClick(View v) {                   Intent intent1=new Intent(MainActivity.this,ImageSwitcherActivity.class);                   startActivity(intent1);               }           });           //GridView组件单击事件           button2.setOnClickListener(new View.OnClickListener() {               @Override               public void onClick(View v) {                   Intent intent2=new Intent();                   intent2.setClass(MainActivity.this,GridViewActivity.class);                   startActivity(intent2);               }           });       }                                                                                  @Override       public boolean onCreateOptionsMenu(Menu menu) {           getMenuInflater().inflate(R.menu.activity_main, menu);           return true;       }   }

布局文件此处就省略了。（因为很简单）

然后创建所需要的Android  Activity文件，这里我们定义为ImageSwitcherActivity.java文件，与之相关联的布局文件是activity_image_switcher.xml文件

ImageSwitcherActivity.java文件

public class ImageSwitcherActivity extends Activity implements ViewFactory, OnItemSelectedListener {                                                                   ImageSwitcher imgswitcher;       @Override       public void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           //requestWindowFeature(Window.FEATURE_NO_TITLE);           setContentView(R.layout.activity_image_switcher);           setTitle("ImageSwitcher");           imgswitcher=(ImageSwitcher) findViewById(R.id.imageswitcher);           imgswitcher.setFactory(this);           imgswitcher.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.fade_in));           imgswitcher.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.fade_out));                                                                               Gallery gallery=(Gallery) findViewById(R.id.gallery);           gallery.setAdapter(new ImageAdapter(ImageSwitcherActivity.this));//设置图片适配器           gallery.setOnItemSelectedListener(this);//设置监听器       }                                                                   @Override       public boolean onCreateOptionsMenu(Menu menu) {           getMenuInflater().inflate(R.menu.activity_image_switcher, menu);           return true;       }                                                                   @Override       public View makeView() {           ImageView imgview=new ImageView(this);           imgview.setBackgroundColor(0xFF000000);           //控制为了使图片适合 ImageView 的大小，按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间           imgview.setScaleType(ImageView.ScaleType.FIT_CENTER);           imgview.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));           return imgview;       }                                                                   @Override       public void onItemSelected(AdapterView<?> arg0, View arg1, int position,               long arg3) {           imgswitcher.setImageResource(new ImageAdapter().image[position]);       }                                                                   @Override       public void onNothingSelected(AdapterView<?> arg0) {       }   }

与之相关联的布局文件，还有抽出来的类的文件分别如下所示：

<RelativeLayout 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" >       <ImageSwitcher        android:id="@+id/imageswitcher"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        />       <Gallery        android:id="@+id/gallery"        android:background="#55000000"        android:layout_width="fill_parent"        android:layout_height="60dp"        android:gravity="center_vertical"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:spacing="16dp"        />                                                          </RelativeLayout>

public class ImageAdapter extends BaseAdapter {                                                                 public ImageAdapter(){}       private Context context;       public ImageAdapter(Context c)       {           context=c;       }       @Override       public int getCount() {           return image.length;       }                                                             @Override       public Object getItem(int position) {           return position;       }                                                             @Override       public long getItemId(int position) {           return position;       }                                                             @Override       public View getView(int position, View convertView, ViewGroup parent) {           ImageView imgview=new ImageView(context);           //通过资源ID设置该 ImageView 显示的内容           imgview.setImageResource(image[position]);           ///设置该属性为真可以在 ImageView 调整边界时保持图片的纵横比例           imgview.setAdjustViewBounds(true);           imgview.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));           return imgview;       }       //图片资源数组       public Integer[] image=           {               R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f           };   }

GridView 组件的使用与之相似，GridViewActivity.java文件：

public class GridViewActivity extends Activity {                                                  private GridView gridview;       private ImageView imageshow;       int[] images;       int[] textviews;       @Override       public void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           setContentView(R.layout.activity_grid_view);           setTitle("GridView");           gridview=(GridView) findViewById(R.id.gridview);           imageshow=(ImageView) findViewById(R.id.imageshow);           images=new GridViewAdapter().image;           List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();           for(int i=0;i<images.length;i++)           {               Map<String,Object> map=new HashMap<String,Object>();               map.put("Image",images[i]);               map.put("text","图片"+String.valueOf(i));               list.add(map);           }           SimpleAdapter adapter=new SimpleAdapter(this,list, R.layout.gridview_item,new String[]{"Image","text"},new int[]{R.id.image,R.id.textview});           gridview.setAdapter(adapter);//为GridView设置数据配置器           imageshow.setImageResource(images[0]);           gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {               @Override               public void onItemClick(AdapterView<?> adapter, View view, int position,                       long arg3) {                   Map<String,Object> item=(HashMap<String,Object>) adapter.getItemAtPosition(position);                   setTitle((String) item.get("text"));                   imageshow.setImageResource(images[position]);               }           });       }                                              

activity_grid_view.xml布局文件还有一个资源文件grid_item.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    >                                                 <GridView        android:id="@+id/gridview"        android:numColumns="3"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:verticalSpacing="10dp"        android:horizontalSpacing="20dp"        >       </GridView>        <ImageView        android:id="@+id/imageshow"        android:layout_marginTop="20dp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:adjustViewBounds="true"        />   </LinearLayout><?xml version="1.0" encoding="utf-8"?>   <LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >                                              <ImageView        android:id="@+id/image"        android:layout_width="80dp"                                  />                                          <TextView        android:id="@+id/textview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="TextView"        android:gravity="center"        />   </LinearLayout>

这里我按文中写了一个GridView的例子：http://download.csdn.net/detail/kluing/7620473

我还写了一个比较简单的没有text的例题这个不用积分哦：http://download.csdn.net/detail/kluing/7620711