畫廊(Gallery), 及有一點動畫效果的圖像切換器(ImageSwitcher)

延續先前的另一篇文章"畫廊(Gallery), 實現OnItemSelectedListener把圖形顯示在圖像視圖(ImageView)上"; 文章中使用ImageView把圖像顯示. 今次使用圖像切換器(ImageSwitcher), 它繼承自視圖切換器(ViewSwitcher), 在兩個圖像之間切換, 它有一個創建視圖的工廠類(Factory).



如果你只看上面的屏幕圖像, 可能是看不出差別; 祗要真的運行應用程序, 可以發現圖像與圖像之間的切換是有淡入(fade-in)/淡出(fade-out)的動畫效果.

修改main.xml, 把ImageView改為ImageSwitcher.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Gallery
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:spacing="10dp"
    />
<ImageSwitcher
    android:id="@+id/imageswitcher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />
</LinearLayout>

使用圖像切換器(ImageSwitcher), 需要實現ViewFactory, 並重寫makeView()方法, 而淡入(fade-in)/淡出(fade-out)的動畫效果就由ImageSwitcher.setInAnimation()及ImageSwitcher.setInAnimation()設定.

package com.AndroidGallery;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ViewSwitcher.ViewFactory;


public class AndroidGallery extends Activity implements ViewFactory{

 private ImageSwitcher myImageSwitcher;

 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        myImageSwitcher = (ImageSwitcher)findViewById(R.id.imageswitcher);
        myImageSwitcher.setFactory(this);
        myImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        myImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        
        Gallery myGallery = (Gallery)findViewById(R.id.gallery);
        myGallery.setAdapter(new ImageAdapter(this));
        myGallery.setOnItemSelectedListener(myGalleryOnItemSelectedListener);
    }
    
    private OnItemSelectedListener myGalleryOnItemSelectedListener
     = new OnItemSelectedListener(){

   @Override
   public void onItemSelected(AdapterView<?> arg0, View arg1,
     int arg2, long arg3) {
    // TODO Auto-generated method stub
    myImageSwitcher.setImageResource(mThumbIds[arg2]);
   }

   @Override
   public void onNothingSelected(AdapterView<?> arg0) {
    // TODO Auto-generated method stub
    
   }
     
    };
    
    private Integer[] mThumbIds = {
            R.drawable.a01,
            R.drawable.a02,
            R.drawable.a03,
            R.drawable.a04,
            R.drawable.a05,
            R.drawable.a06,
            R.drawable.a07,
            R.drawable.a08,
            R.drawable.a09,
            R.drawable.a10,
            R.drawable.a11,
            R.drawable.a12,
            R.drawable.a13,
            R.drawable.a14,
            R.drawable.a15,
          };
    
    public class ImageAdapter extends BaseAdapter{
     private Context context;
     
     public ImageAdapter(Context c){
      context = c;
     }
     
     @Override
     public int getCount() {
      // TODO Auto-generated method stub
      return mThumbIds.length;
     }

     @Override
     public Object getItem(int position) {
      // TODO Auto-generated method stub
      return mThumbIds[position];
     }

     @Override
     public long getItemId(int position) {
      // TODO Auto-generated method stub
      return position;
     }

     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
      // TODO Auto-generated method stub
      ImageView imageView;
      if (convertView == null) {
       // if it's not recycled, initialize some attributes
       imageView = new ImageView(context);
       imageView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
       imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
       imageView.setPadding(8, 8, 8, 8);
      } else {
             imageView = (ImageView) convertView;
      }

      imageView.setImageResource(mThumbIds[position]);
      return imageView;
     }
    }

 @Override
 public View makeView() {
  // TODO Auto-generated method stub
  ImageView i = new ImageView(this);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        return i;
 }
}