android之Gallery

Gallery:就是畫廊，在android手機上我們經常會看到有個圖片畫廊，當我們點擊後就會將我們點擊的圖片設置爲手機的背景。今天我們就來實現這麼有個功能，在這個工程中只設了點擊事件，還沒設置劃屏功能（劃屏之後會跟進），在程序中我們設置當我們點擊了圖片之後，我們將點擊的圖片設成背景圖片，並且實現了畫廊圖片能夠循環滾動的效果。

先看效果：

程序開始，未點擊時的效果：

 

當點擊畫廊上的圖片後，我們將點擊的圖片設置成背景圖片，並且用一個Toast將點擊的圖片的id顯示出來

 

 

 

在這個程序裏我是放了6張圖片，先將這六張圖片放到上圖上方的Gallery中，當點擊後，就顯示點擊的圖片，並且將Gallery中的圖片不斷循環。

首先，要建個GalleryProject工程，在工程的res/drawable下面放入你作爲顯示的圖片，我這裏是放了6張圖片。

layout中xml文件：

在文件中設置了一個ImageView，這個是拿來顯示你點擊的圖片後的大圖的，還設置了一個Gallery，這是個畫廊，是用來顯示你放在res/drawable中的小圖片的。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >

    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/image_1">

    </ImageView>

   <Gallery
       android:id="@+id/gallery"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       //這裏是設置在Gallery中每張圖片之間的間隔的
       android:spacing="5dp" >

   </Gallery>

</FrameLayout>

 

 

在values文件中添加attrs.xml文件

attrs.xml文件：

下面的代碼就是設置Gallery的背景風格

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MainActivity">
        <attr name="android:galleryItemBackground">

        </attr>
    </declare-styleable>
</resources>

再來看看Activaty.java 文件：

 

package com.cheng.gallerytest;


import java.lang.System;
import android.os.Bundle;
import android.R.integer;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;


public class MainActivity extends Activity {

    //定義一個Gallery和一個Imageview
    private Gallery mGallery;
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);

        //通過程序獲得我們在xml文件中定義的Gallery和ImageView
        mImageView = (ImageView)findViewById(R.id.myImageView);
        mGallery = (Gallery)findViewById(R.id.gallery);
        //給Gallery設置一個圖片適配器，通過適配器去找到我們點擊的圖片
        mGallery.setAdapter(new ImageAdapter(this));
        //設置點擊事件監聽
        OnItemClickListener oicl = new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position,
                    long id) {
                // TODO Auto-generated method stub
                //當點擊時將被點擊的圖片作爲背景顯示出來
                mImageView.setImageResource(((ImageView)view).getId());
                Toast.makeText(getApplicationContext(), "getId:"+((ImageView)view).getId() +"當前圖片:"+ position, Toast.LENGTH_LONG).show();



            }
        };
        //將監聽事件綁定到我們的Gallery上面
        mGallery.setOnItemClickListener(oicl);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    //這是自己實現的圖片適配器，它是繼承BaseAdapter
    public class ImageAdapter extends BaseAdapter
    {
        int mGalleryItemBackground;  //Item的修飾背景
        private Context mContext;    //上下文對象
        private int[] mImage ={     //圖片數組
                R.drawable.image_1,
                R.drawable.image_2,
                R.drawable.image_3,
                R.drawable.image_4,
                R.drawable.image_5,
                R.drawable.image_6
        };
        public ImageAdapter(Context c)
        {
            mContext = c;
            //通過我們定義的背景風格設置Gallery背景風格
            TypedArray a = obtainStyledAttributes(R.styleable.MainActivity);
            mGalleryItemBackground = a.getResourceId(R.styleable.MainActivity_android_galleryItemBackground, 0);
            a.recycle();
        }
        @Override
        public int getCount() {
            // TODO Auto-generated method stub

            return Integer.MAX_VALUE;  //爲了實現圖片的循環，將總數設置的很大，position的值是不斷加的，通過position%mImage.length的方式得到圖片的位置
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return 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 i = new ImageView(mContext);
            //設置ImageView
            i.setImageResource(mImage[position%mImage.length]);
            //設置id
            i.setId(mImage[position%mImage.length]);
            i.setScaleType(ImageView.ScaleType.FIT_XY);
            //設置Gallery的佈局
            i.setLayoutParams(new Gallery.LayoutParams(240, 320));
            //設置背景風格
            i.setBackgroundResource(mGalleryItemBackground);

            return i;
        }
    }
}

      在ImageAdapter類中有兩個非常重要的方法：getCount和getView。其中getCount方法用於返回圖像總數，要注意的是這個總數是不能大於圖像的實際數（可以小於圖像的實際數），否則會有越界異常。當Gallery組件要顯示某一個圖像時，就會調用getView方法，並將當前的圖像索引（position）傳入該方法。一般getview方法用於返回每一個顯示圖像的組件，由此可以看出，Gallery組件是及時顯示圖像的，而不是一下將所有的圖像都顯示出來。在getView方法中除了創建了ImageView對象，還用從mImage數組中獲得了相應的圖像資源ID來設置在ImageView中顯示的圖像。最後設置了Gallery組件的背景顯示風格。在這裏爲了能讓我們的Gallery能夠循環的顯示，我們將GetCount方法中的return返回的值設置了一個很大的整數，但是position是不斷的向上加的，所以我將position%mImage.length作爲我們圖片的position，這樣我們的Gallery就可以循環的顯示了。

 

ok，睡覺了。

工程下載地址：

http://down.51cto.com/data/672711