Android 滑動效果入門篇（二）—— Gallery

Gallery 是Android官方提供的一個View容器類，繼承於AbsSpinner類，用於實現頁面滑動效果。

從上面的繼承關係可以看出，AbsSpinner類繼承自AdapterView，因此我們可以自定義實現Adapter，來填充Gallery容器的數據。

本示例通過自己實現一個Adapter，來填充Gallery容器的圖片數據，首先看效果：

Activity

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.Toast;
public class GalleryActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery gallery = (Gallery) findViewById(R.id.gallery);
gallery.setAdapter(new ImageAdapter(this)); // gallery添加ImageAdapter圖片資源
gallery.setOnItemClickListener(listener); // gallery設置點擊圖片資源的事件
}
AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(GalleryActivity.this, "圖片 " + (position + 1), Toast.LENGTH_SHORT).show();
}
};
}

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

public class GalleryActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Gallery gallery = (Gallery) findViewById(R.id.gallery);
		gallery.setAdapter(new ImageAdapter(this)); 		// gallery添加ImageAdapter圖片資源
		gallery.setOnItemClickListener(listener); 			// gallery設置點擊圖片資源的事件
	}
	
	AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
			Toast.makeText(GalleryActivity.this, "圖片 " + (position + 1), Toast.LENGTH_SHORT).show();
		}
	};
}

ImageAdapter.java

[java] view plain copy print ?

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// 圖片數組源
private Integer[] imgs = { R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4, R.drawable.img5,
R.drawable.img6, R.drawable.img7};
public ImageAdapter(Context c) {
mContext = c;
}
@Override
public int getCount() {
return imgs.length;
}
// 獲取圖片位置
@Override
public Object getItem(int position) {
return imgs[position];
}
// 獲取圖片ID
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageview = new ImageView(mContext);
imageview.setImageResource(imgs[position]);
imageview.setLayoutParams(new Gallery.LayoutParams(240, 120)); // 設置佈局圖片120×120顯示
imageview.setScaleType(ImageView.ScaleType.CENTER); // 設置顯示比例類型（不縮放）
return imageview;
}
}

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

public class ImageAdapter extends BaseAdapter {
	private Context mContext;
	
	//  圖片數組源
	private Integer[] imgs = { R.drawable.img1, R.drawable.img2,
			R.drawable.img3, R.drawable.img4, R.drawable.img5,
			R.drawable.img6, R.drawable.img7};

	public ImageAdapter(Context c) {
		mContext = c;
	}

	@Override
	public int getCount() {
		return imgs.length;
	}

	// 獲取圖片位置
	@Override
	public Object getItem(int position) {
		return imgs[position];
	}

	// 獲取圖片ID
	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageview = new ImageView(mContext);

		imageview.setImageResource(imgs[position]);
		imageview.setLayoutParams(new Gallery.LayoutParams(240, 120));		// 設置佈局 圖片120×120顯示
		imageview.setScaleType(ImageView.ScaleType.CENTER);				// 設置顯示比例類型（不縮放）
		return imageview;
	}
}

main.xml

[html] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="50dip"
android:textColor="#ffff0000"
android:textSize="30sp"
android:text="Gallery Test"/>
<Gallery
android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_below="@id/tv" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <!-- 文字居中顯示  android:gravity -->
    <!-- 控件居中顯示  android:layout_gravity -->
    
    <TextView 
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"                
        android:layout_gravity="center"         
        android:layout_marginTop="50dip"
        android:textColor="#ffff0000"
        android:textSize="30sp"
        android:text="Gallery Test"/>
    
    <Gallery 
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:layout_below="@id/tv" />
    
</RelativeLayout>

源碼下載

示例分析：

1、ImageAdapter中，是繼承BaseAdapter自定義實現的，重載了BaseAdapter的幾個虛方法，其中重要的有兩個

getCount() ：返回資源的大小（總長度）

getView(int position, View convertView, ViewGroup parent) ：返回當前顯示的資源（獲取焦點）

2、GalleryActivity中，通過gallery.setAdapter(imgAdapter); 設置資源，然後設置gallery的點擊監聽事件。

3、main.xml中，是佈局文件，顯示一個TextView和Gallery，RelativeLayout是相對佈局

總體來說，Gallery 上述的示例很簡單，結構比較清晰，能夠滿足基本的應用。

Gallery 高級應用

上面的示例，僅僅是最簡單的Gallery應用，如果我們想做的更酷、更炫的效果：

1、Gallery 圖片顯示能夠循環播放，即向右滑到左側第一張圖片後，需要接着顯示最後一張圖片；向左滑到最後一張圖片後，需要接着顯示第一張圖片，往復不間斷顯示的循環效果。

2、選中圖片高亮，未選中圖片陰影，更加突出當前獲取焦點的選中圖片

3、區分“點擊”與“選中”圖片事件的區別和適用場景

效果1 —— 高亮顯示

沒有選中，在GalleryActivity中，設置gallery.setUnselectedAlpha(0.3f); 透明度爲0.3

選中，在ImageAdapter的getView(int position, View convertView, ViewGroup parent)中，設置imageview.setBackgroundColor(Color.alpha(1)); 背景色爲1

效果2 —— 循環播放

原理：Gallery循環播放的原理，跟循環鏈表的思想一樣，首尾item連接都是通過“取餘”實現

修改1、ImageAdapter中的getCount() 方法中，修改返回值爲無窮大 return Integer.MAX_VALUE;

修改2、ImageAdapter中的getView(int position, View convertView, ViewGroup parent)方法中，設置imageview.setImageResource(imgs[position % imgs.length]); 取餘

修改3、GalleryActivity中，設置gallery.setSelection(imgAdapter.imgs.length * 100); 使gallery顯示圖片的位置從中間開始顯示（即imgAdapter.imgs.length * 100）

修改解釋：

修改1，主要是爲了是循環接近無限往復循環，使position無限大，循環在實踐應用上不容易結束（理論上會結束，即2^31-1約20億次循環後）

修改2，通過取餘，使圖片能夠重複利用並顯示

修改3，由於起始位置如果是0，則向右滑動左側將無法循環（此時左側將爲-1，超出了imgs[]數組的下邊界），因此開始應設置起始位置爲imgAdapter.imgs.length的整數倍

效果3 —— “點擊”和“選中”事件

1、點擊事件OnItemClickListener，是需要用手點擊才觸發，滑動時不觸發

2、選中事件OnItemSelectedListener，是當圖片滑到屏幕正中，則視爲自動選中，在滑動的過程中會觸發

適用場景：

1、點擊事件OnItemClickListener，是在確定要選中該項時，才點擊進行邏輯處理

2、選中事件OnItemSelectedListener，可以用來提醒用戶，當前獲取焦點的項，如果確認爲該項則需要點擊OnItemClickListener後，進行下一步的邏輯處理

高級應用完整代碼：

Activity

[java] view plain copy print ?

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.Toast;
public class GalleryActivity extends Activity {
private ImageAdapter imgAdapter = null; // 聲明圖片資源對象
private Gallery gallery = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gallery = (Gallery) findViewById(R.id.gallery);
imgAdapter = new ImageAdapter(this);
gallery.setAdapter(imgAdapter); // 設置圖片資源
gallery.setGravity(Gravity.CENTER_HORIZONTAL); // 設置水平居中顯示
gallery.setSelection(imgAdapter.imgs.length * 100); // 設置起始圖片顯示位置（可以用來製作gallery循環顯示效果）
gallery.setOnItemClickListener(clickListener); // 設置點擊圖片的監聽事件（需要用手點擊才觸發，滑動時不觸發）
gallery.setOnItemSelectedListener(selectedListener); // 設置選中圖片的監聽事件（當圖片滑到屏幕正中，則視爲自動選中）
gallery.setUnselectedAlpha(0.3f); // 設置未選中圖片的透明度
gallery.setSpacing(40); // 設置圖片之間的間距
}
// 點擊圖片的監聽事件
AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(GalleryActivity.this, "點擊圖片 " + (position + 1), 100).show();
}
};
// 選中圖片的監聽事件
AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(GalleryActivity.this, "選中圖片 " + (position + 1), 20).show();
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
}
};
}

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.Toast;

public class GalleryActivity extends Activity {
	
	private ImageAdapter imgAdapter = null;			// 聲明圖片資源對象
	private Gallery gallery = null;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		gallery = (Gallery) findViewById(R.id.gallery);
		imgAdapter = new ImageAdapter(this);
		gallery.setAdapter(imgAdapter); 					// 設置圖片資源
		gallery.setGravity(Gravity.CENTER_HORIZONTAL);		// 設置水平居中顯示
		gallery.setSelection(imgAdapter.imgs.length * 100);		// 設置起始圖片顯示位置（可以用來製作gallery循環顯示效果）
		
		gallery.setOnItemClickListener(clickListener); 			// 設置點擊圖片的監聽事件（需要用手點擊才觸發，滑動時不觸發）
		gallery.setOnItemSelectedListener(selectedListener);		// 設置選中圖片的監聽事件（當圖片滑到屏幕正中，則視爲自動選中）
		gallery.setUnselectedAlpha(0.3f);					// 設置未選中圖片的透明度
		gallery.setSpacing(40);							// 設置圖片之間的間距
	}
	
	// 點擊圖片的監聽事件
	AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() {
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
			Toast.makeText(GalleryActivity.this, "點擊圖片 " + (position + 1), 100).show();
		}
	};
	
	// 選中圖片的監聽事件
	AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() {
		@Override
		public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
			Toast.makeText(GalleryActivity.this, "選中圖片 " + (position + 1), 20).show();
		}

		@Override
		public void onNothingSelected(AdapterView<?> arg0) {
			
		}
	};
}

ImageAdapter.java

[java] view plain copy print ?

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// 圖片數組源
public Integer[] imgs = { R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4, R.drawable.img5,
R.drawable.img6, R.drawable.img7};
public ImageAdapter(Context c) {
mContext = c;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
// 獲取圖片位置
@Override
public Object getItem(int position) {
return imgs[position];
}
// 獲取圖片ID
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageview = new ImageView(mContext);
imageview.setImageResource(imgs[position % imgs.length]);
imageview.setLayoutParams(new Gallery.LayoutParams(200, 94)); // 設置佈局圖片120×120顯示
imageview.setScaleType(ImageView.ScaleType.CENTER); // 設置顯示比例類型
imageview.setBackgroundColor(Color.alpha(1));
return imageview;
}
}

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

public class ImageAdapter extends BaseAdapter {
	private Context mContext;
	
	//  圖片數組源
	public Integer[] imgs = { R.drawable.img1, R.drawable.img2,
			R.drawable.img3, R.drawable.img4, R.drawable.img5,
			R.drawable.img6, R.drawable.img7};

	public ImageAdapter(Context c) {
		mContext = c;
	}

	@Override
	public int getCount() {
		return Integer.MAX_VALUE;
	}

	// 獲取圖片位置
	@Override
	public Object getItem(int position) {
		return imgs[position];
	}

	// 獲取圖片ID
	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageview = new ImageView(mContext);

		imageview.setImageResource(imgs[position % imgs.length]);
		imageview.setLayoutParams(new Gallery.LayoutParams(200, 94));		// 設置佈局 圖片120×120顯示
		imageview.setScaleType(ImageView.ScaleType.CENTER);				// 設置顯示比例類型
		imageview.setBackgroundColor(Color.alpha(1));
		return imageview;
	}
}

源碼下載

參考推薦：

Gallery

Gallery tutorial