画廊Gallery控件的使用

画廊Gallery控件的使用

博客分类： android

 

Gallery为一个画廊控件，只能显示一行，并支持左右滑动的效果。如下：

 

 

 

如上效果的实现包括了Gallery组件和ImageSwitcher组建的使用，完成的效果是点击图片则显示其大图片，程序说话：

Java代码  

1. package mobile.android.ch05.gallery;   
2.   
3. import android.app.Activity;   
4. import android.content.Context;   
5. import android.content.res.TypedArray;   
6. import android.os.Bundle;   
7. import android.view.View;   
8. import android.view.ViewGroup;   
9. import android.view.ViewGroup.LayoutParams;   
10. import android.view.animation.AnimationUtils;   
11. import android.widget.AdapterView;   
12. import android.widget.AdapterView.OnItemClickListener;   
13. import android.widget.BaseAdapter;   
14. import android.widget.Gallery;   
15. import android.widget.ImageSwitcher;   
16. import android.widget.ImageView;   
17. import android.widget.ViewSwitcher.ViewFactory;   
18.   
19. public class Main extends Activity implements ViewFactory {   
20.     private Gallery gallery;   
21.     private ImageSwitcher imageSwitcher;   
22.     private ImageAdapter imageAdapter;   
23.   
24.     private int[] resIds = new int[] { R.drawable.item1, R.drawable.item2,   
25.             R.drawable.item3, R.drawable.item4, R.drawable.item5,   
26.             R.drawable.item6, R.drawable.item7, R.drawable.item8,   
27.             R.drawable.item9, R.drawable.item10, R.drawable.item11,   
28.             R.drawable.item12, R.drawable.item13, R.drawable.item14,   
29.             R.drawable.item15 };   
30.   
31.     //设置适配器类   
32.     public class ImageAdapter extends BaseAdapter {   
33.         int mGalleryItemBackground;   
34.         private Context mContext;   
35.   
36.         public ImageAdapter(Context context) {   
37.             mContext = context;   
38.             TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);   
39.             // 获取背景资源ID   
40.             mGalleryItemBackground = typedArray.getResourceId(   
41.                     R.styleable.Gallery_android_galleryItemBackground, 0);   
42.         }   
43.   
44.         // 返回传入的图片ID数组的长度，也就是图片的总数。既然是数组，那么一定要注意越界问题。   
45.         public int getCount() {   
46.             return Integer.MAX_VALUE;   
47.         }   
48.   
49.         // 返回position所对应的图片对象   
50.         public Object getItem(int position) {   
51.             return position;   
52.         }   
53.   
54.         // 取得列表中与指定位置的行关联的ID.   
55.         public long getItemId(int position) {   
56.             return position;   
57.         }   
58.   
59.         /**  
60.          * 设置图像的显示风格图像资源  
61.          */  
62.         public View getView(int position, View convertView, ViewGroup parent) {   
63.             ImageView imageView = new ImageView(mContext);   
64.   
65.             //设置imageView的源，并循环显示   
66.             imageView.setImageResource(resIds[position % resIds.length]);   
67.             // 设置图片的显示方式   
68.             imageView.setScaleType(ImageView.ScaleType.FIT_XY);   
69.             // 将图片缩小设置   
70.             imageView.setLayoutParams(new Gallery.LayoutParams(136,88));   
71.             //设置imageView的图像资源   
72.             imageView.setBackgroundResource(mGalleryItemBackground);   
73.             return imageView;   
74.         }   
75.     }   
76.   
77.        
78.   
79.     // 返回一个视图，这个视图用来填充imageSwitcher，此为重写 的ViewFactory接口中的类,相当与getView().   
80.     public View makeView() {   
81.         ImageView imageView = new ImageView(this);   
82.         // 设置背景色    
83.         imageView.setBackgroundColor(0xFF000000);     
84.         // 设置图片显示的缩放方式    
85.          imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);    
86.         // 设置显示的图片对相对容器的填充方式   
87.          imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));   
88.         return imageView;   
89.     }   
90.        
91.        
92.     @Override  
93.     public void onCreate(Bundle savedInstanceState) {   
94.         super.onCreate(savedInstanceState);   
95.         setContentView(R.layout.main);   
96.         gallery = (Gallery) findViewById(R.id.gallery);   
97.         imageAdapter = new ImageAdapter(this);   
98.         gallery.setAdapter(imageAdapter);   
99.            
100. //       gallery.setUnselectedAlpha(0.5f);                   // 设置未选中图片的透明度      
101. //       gallery.setSpacing(0);                         // 设置图片之间的间距     
102.   
103.         imageSwitcher = (ImageSwitcher) this.findViewById(R.id.imageswithcher);   
104.        
105.         imageSwitcher.setFactory(this);   
106.   
107.         //设置淡入淡出效果   
108.         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,   
109.                 android.R.anim.fade_in));   
110.         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,   
111.                 android.R.anim.fade_out));   
112.            
113. //      //为ImageSwitcher组建设置其图片源，是当图片滑到屏幕正中，则视为自动选中，在滑动的过程中会触发   
114. //      gallery.setOnItemSelectedListener(new OnItemSelectedListener() {   
115. //   
116. //          public void onItemSelected(AdapterView<?> arg0, View arg1,   
117. //                  int arg2, long arg3) {   
118. //              imageSwitcher.setImageResource(resIds[arg2%resIds.length]);   
119. //                 
120. //          }   
121. //   
122. //          public void onNothingSelected(AdapterView<?> arg0) {   
123. //              // TODO Auto-generated method stub   
124. //                 
125. //          }   
126. //             
127. //      });   
128.            
129.         //是需要用手点击才触发，滑动时不触发   
130.         gallery.setOnItemClickListener(new OnItemClickListener() {   
131.   
132.             @Override  
133.             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,   
134.                     long arg3) {   
135.                 // TODO Auto-generated method stub   
136.                 imageSwitcher.setImageResource(resIds[arg2 % resIds.length]);   
137.                    
138.             }   
139.                
140.         });   
141.   
142.     }   
143. }  

package mobile.android.ch05.gallery;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class Main extends Activity implements ViewFactory {
	private Gallery gallery;
	private ImageSwitcher imageSwitcher;
	private ImageAdapter imageAdapter;

	private int[] resIds = new int[] { R.drawable.item1, R.drawable.item2,
			R.drawable.item3, R.drawable.item4, R.drawable.item5,
			R.drawable.item6, R.drawable.item7, R.drawable.item8,
			R.drawable.item9, R.drawable.item10, R.drawable.item11,
			R.drawable.item12, R.drawable.item13, R.drawable.item14,
			R.drawable.item15 };

	//设置适配器类
	public class ImageAdapter extends BaseAdapter {
		int mGalleryItemBackground;
		private Context mContext;

		public ImageAdapter(Context context) {
			mContext = context;
			TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
			// 获取背景资源ID
			mGalleryItemBackground = typedArray.getResourceId(
					R.styleable.Gallery_android_galleryItemBackground, 0);
		}

		// 返回传入的图片ID数组的长度，也就是图片的总数。既然是数组，那么一定要注意越界问题。
		public int getCount() {
			return Integer.MAX_VALUE;
		}

		// 返回position所对应的图片对象
		public Object getItem(int position) {
			return position;
		}

		// 取得列表中与指定位置的行关联的ID.
		public long getItemId(int position) {
			return position;
		}

		/**
		 * 设置图像的显示风格图像资源
		 */
		public View getView(int position, View convertView, ViewGroup parent) {
			ImageView imageView = new ImageView(mContext);

			//设置imageView的源，并循环显示
			imageView.setImageResource(resIds[position % resIds.length]);
			// 设置图片的显示方式
			imageView.setScaleType(ImageView.ScaleType.FIT_XY);
			// 将图片缩小设置
			imageView.setLayoutParams(new Gallery.LayoutParams(136,88));
			//设置imageView的图像资源
			imageView.setBackgroundResource(mGalleryItemBackground);
			return imageView;
		}
	}

	

	// 返回一个视图，这个视图用来填充imageSwitcher，此为重写 的ViewFactory接口中的类,相当与getView().
	public View makeView() {
		ImageView imageView = new ImageView(this);
		// 设置背景色 
		imageView.setBackgroundColor(0xFF000000);  
		// 设置图片显示的缩放方式 
		 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); 
		// 设置显示的图片对相对容器的填充方式
		 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		return imageView;
	}
	
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		gallery = (Gallery) findViewById(R.id.gallery);
		imageAdapter = new ImageAdapter(this);
		gallery.setAdapter(imageAdapter);
		
//		 gallery.setUnselectedAlpha(0.5f);                   // 设置未选中图片的透明度   
//		 gallery.setSpacing(0);                         // 设置图片之间的间距  

		imageSwitcher = (ImageSwitcher) this.findViewById(R.id.imageswithcher);
	
		imageSwitcher.setFactory(this);

		//设置淡入淡出效果
		imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));
		
//		//为ImageSwitcher组建设置其图片源，是当图片滑到屏幕正中，则视为自动选中，在滑动的过程中会触发
//		gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
//
//			public void onItemSelected(AdapterView<?> arg0, View arg1,
//					int arg2, long arg3) {
//				imageSwitcher.setImageResource(resIds[arg2%resIds.length]);
//				
//			}
//
//			public void onNothingSelected(AdapterView<?> arg0) {
//				// TODO Auto-generated method stub
//				
//			}
//			
//		});
		
		//是需要用手点击才触发，滑动时不触发
		gallery.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				// TODO Auto-generated method stub
				imageSwitcher.setImageResource(resIds[arg2 % resIds.length]);
				
			}
			
		});

	}
}

 

 

 

Gallery的使用主要包括如下几个步骤：

1 资源文件，复制进res/drawable文件夹中
2 定义Gallery 组件的背景样式文件
3 含有Gallery组件和ImageSwitcher组件的main.xml文件
4 BaseAdapter类，并实现其中的方法
5 Gllery组件绑定Adapter
6 Gallery组件的onItemSelected方法，为ImageSwitcher组件设置其图片源
7 ImageSwitcher中的ImageView控件

 

附录：

** TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);R.styleable.Gallery

 

** 对于BaseAdapter类中getView()方法的解析：

 

  public abstract View getView (int position, View convertView, ViewGroup parent)  此为抽象方法，一般与ListView这个组件一起使用。

  三个参数的意义：POSITION就是LISTVIEW中的位置，如果你对LIST几个特殊位置的VIEW要改变，比如TITLE要改变，那么就是加判断
if(position == 0){
     //加入自己的view
     return view;
}
convertView是系统的，如果你在重写的时候没有绑定自己的VIEW就调用这个。

 

最后，关于Gallery的响应事件：

 

1、点击事件OnItemClickListener，是需要用手点击才触发，滑动时不触发

2、选中事件OnItemSelectedListener，是当图片滑到屏幕正中，则视为自动选中，在滑动的过程中会触发

适用场景：

1、点击事件OnItemClickListener，是在确定要选中该项时，才点击进行逻辑处理

2、选中事件OnItemSelectedListener，可以用来提醒用户，当前获取焦点的项，如果确认为该项则需要点击      OnItemClickListener后，进行下一步的逻辑处理。