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(); } }; } 

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>

源碼下載

示例分析：

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

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

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

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

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

整體來講，Gallery 上述的示例很簡單，結構比較清晰，可以知足基本的應用。

Gallery 高級應用

上面的示例，僅僅是最簡單的Gallery應用，若是咱們想作的更酷、更炫的效果：

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

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

三、區分「點擊」與「選中」圖片事件的區別和適用場景

效果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鏈接都是經過「取餘」實現

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

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

修改三、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 —— 「點擊」和「選中」事件

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

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

適用場景：

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

二、選中事件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