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 ImageAdapter.java
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
<?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
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
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
再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow
Android 滑動效果入門篇（二）—— Gallery