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/p_w_picpath_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.p_w_picpath_1,
- R.drawable.p_w_picpath_2,
- R.drawable.p_w_picpath_3,
- R.drawable.p_w_picpath_4,
- R.drawable.p_w_picpath_5,
- R.drawable.p_w_picpath_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,睡覺了。
工程下載地址: