Android ImageSwitcher和Gallery 综合使用

一个简易的相册

功能描述： 点击按钮进入下一屏，在屏幕上面展示一个大图，在屏幕的下面是一组可以滚动的图片，点击滚动的图片可以显示在上面的控件中。

效果图如下：

 

 

 

 

开发环境：eclipse3.4.2  AndroidSDK2.0 ADT0.9.7

代码：

1.MainActivity 单击按钮时，跳转到 ImageShowActivity

Java代码  

1. package com.small.photos;  
2.   
3. import com.small.photos.R;  
4. import android.widget.*;  
5. import android.app.Activity;  
6. import android.content.Intent;  
7. import android.os.Bundle;  
8. import android.view.View;  
9. import android.view.View.OnClickListener;  
10.   
11. public class MainActivity extends Activity {  
12.   
13.     OnClickListener listener0 = null;  
14.     Button button0;  
15.   
16.     @Override  
17.     public void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.main);  
20.   
21.         // 单击按钮跳转到ImageShowActivity  
22.         listener0 = new OnClickListener() {  
23.             public void onClick(View v) {  
24.                 Intent intent = new Intent(MainActivity.this,  
25.                         ImageShowActivity.class);  
26.                 startActivity(intent);  
27.             }  
28.         };  
29.   
30.         button0 = (Button) findViewById(R.id.image_show_button);  
31.         button0.setOnClickListener(listener0);  
32.     }  
33.   
34. }  

package com.small.photos;

import com.small.photos.R;
import android.widget.*;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity {

	OnClickListener listener0 = null;
	Button button0;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		// 单击按钮跳转到ImageShowActivity
		listener0 = new OnClickListener() {
			public void onClick(View v) {
				Intent intent = new Intent(MainActivity.this,
						ImageShowActivity.class);
				startActivity(intent);
			}
		};

		button0 = (Button) findViewById(R.id.image_show_button);
		button0.setOnClickListener(listener0);
	}

}

 2. main.xml  定义入口按钮

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7.  <Button android:id="@+id/image_show_button"    
8.             android:text="ImageSwitcher Gallery"    
9.             android:layout_width="wrap_content"    
10.             android:layout_height="wrap_content">    
11.     </Button>    
12. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 <Button android:id="@+id/image_show_button"  
            android:text="ImageSwitcher Gallery"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content">  
    </Button>  
</LinearLayout>

 3.image_show.xml 

    ImageSwitcher是用来图片显示那块区域的控件  Gallery 是来控制底下那个图标列表索引用的

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.    xmlns:android="http://schemas.android.com/apk/res/android"  
4.    android:layout_width="fill_parent"  
5.    android:layout_height="fill_parent">  
6.     
7.   <ImageSwitcher android:id="@+id/ImageSwitcher01"  
8.      android:layout_height="fill_parent"  
9.     android:layout_width="fill_parent"  
10.     android:layout_alignParentTop="true"  
11.     android:layout_alignParentLeft="true">  
12.     </ImageSwitcher>  
13.       
14.       
15.    <Gallery   
16.      android:id="@+id/gallery"  
17.      android:background="#55000000"  
18.      android:layout_width="fill_parent"  
19.      android:layout_height="60dp"  
20.      android:layout_alignParentBottom="true"  
21.      android:layout_alignParentLeft="true"    
22.      android:gravity="center_vertical"  
23.      android:spacing="16dp" />  
24.     
25.   
26.   
27. </RelativeLayout>  

<?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="fill_parent">
  
  <ImageSwitcher android:id="@+id/ImageSwitcher01"
     android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_alignParentTop="true"
  	android:layout_alignParentLeft="true">
  	</ImageSwitcher>
  	
  	
   <Gallery 
     android:id="@+id/gallery"
     android:background="#55000000"
     android:layout_width="fill_parent"
     android:layout_height="60dp"
     android:layout_alignParentBottom="true"
     android:layout_alignParentLeft="true"	
     android:gravity="center_vertical"
     android:spacing="16dp" />
  


</RelativeLayout>

 4.ImageShowActivity

 R.drawable.sample_thumb_0 为图片的标识

图片放在res/drawable/目录下  图片名称为sample_thumb_0.gif

Java代码  

1. package com.small.photos;  
2.   
3. import android.app.Activity;  
4. import android.content.Context;  
5. import android.os.Bundle;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.view.Window;  
9. import android.view.animation.AnimationUtils;  
10. import android.widget.AdapterView;  
11. import android.widget.BaseAdapter;  
12. import android.widget.Gallery;  
13. import android.widget.ImageSwitcher;  
14. import android.widget.ImageView;  
15. import android.widget.AdapterView.OnItemSelectedListener;  
16. import android.widget.RelativeLayout.LayoutParams;  
17. import android.widget.ViewSwitcher.ViewFactory;  
18.   
19. public class ImageShowActivity extends Activity implements ViewFactory,  
20.         OnItemSelectedListener {  
21.     /** Called when the activity is first created. */  
22.     ImageSwitcher mSwitcher;  
23.     private Integer[] mThumbIds = { R.drawable.sample_thumb_0,  
24.             R.drawable.sample_thumb_1, R.drawable.sample_0, R.drawable.sample_1 };  
25.   
26.     private Integer[] mImageIds = { R.drawable.sample_thumb_0,  
27.             R.drawable.sample_thumb_1, R.drawable.sample_0, R.drawable.sample_1 };  
28.   
29.     @Override  
30.     public void onCreate(Bundle savedInstanceState) {  
31.         super.onCreate(savedInstanceState);  
32.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
33.   
34.         setContentView(R.layout.image_show);  
35.         setTitle("ImageShowActivity");  
36.   
37.         mSwitcher = (ImageSwitcher) findViewById(R.id.ImageSwitcher01);  
38.         // 系统的anim中的fade_in.xml  
39.         mSwitcher.setFactory(this);  
40.         mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,  
41.                 android.R.anim.fade_in));  
42.         mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,  
43.                 android.R.anim.fade_out));  
44.   
45.         Gallery g = (Gallery) findViewById(R.id.gallery);  
46.         // 为缩略图浏览器指定一个适配器  
47.         g.setAdapter(new ImageAdapter(this));  
48.         // 响应 在缩略图列表上选中某个缩略图后的 事件  
49.         g.setOnItemSelectedListener(this);  
50.   
51.     }  
52.   
53.     @SuppressWarnings("unchecked")  
54.     public void onItemSelected(AdapterView parent, View v, int position, long id) {  
55.         mSwitcher.setImageResource(mImageIds[position]);  
56.     }  
57.   
58.     @SuppressWarnings("unchecked")  
59.     public void onNothingSelected(AdapterView parent) {  
60.     }  
61.   
62.     @Override  
63.     public View makeView() {  
64.         ImageView i = new ImageView(this);  
65.         i.setBackgroundColor(0xFF000000);  
66.         i.setScaleType(ImageView.ScaleType.FIT_CENTER);  
67.         i.setLayoutParams(new ImageSwitcher.LayoutParams(  
68.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
69.         return i;  
70.     }  
71.   
72.     public class ImageAdapter extends BaseAdapter {  
73.         private Context mContext;  
74.   
75.         public ImageAdapter(Context c) {  
76.             mContext = c;  
77.         }  
78.   
79.         public int getCount() {  
80.             return mThumbIds.length;  
81.         }  
82.   
83.         public Object getItem(int position) {  
84.             return position;  
85.         }  
86.   
87.         public long getItemId(int position) {  
88.             return position;  
89.         }  
90.           
91.         //getView方法动态生成一个ImageView,然后利用setLayoutParams、setImageResource、  
92.         //setBackgroundResource分别设定图片大小、图片源文件和图片背景。当图片被显示到当前  
93.         //屏幕的时候，这个函数就会被自动回调来提供要显示的ImageView  
94.         public View getView(int position, View convertView, ViewGroup parent) {  
95.             ImageView i = new ImageView(mContext);  
96.   
97.             i.setImageResource(mThumbIds[position]);  
98.             i.setAdjustViewBounds(true);  
99.             i.setLayoutParams(new Gallery.LayoutParams(  
100.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
101.             i.setBackgroundResource(R.drawable.picture_frame);  
102.             return i;  
103.         }  
104.   
105.     }  
106.   
107. }  

package com.small.photos;

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

public class ImageShowActivity extends Activity implements ViewFactory,
		OnItemSelectedListener {
	/** Called when the activity is first created. */
	ImageSwitcher mSwitcher;
	private Integer[] mThumbIds = { R.drawable.sample_thumb_0,
			R.drawable.sample_thumb_1, R.drawable.sample_0, R.drawable.sample_1 };

	private Integer[] mImageIds = { R.drawable.sample_thumb_0,
			R.drawable.sample_thumb_1, R.drawable.sample_0, R.drawable.sample_1 };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);

		setContentView(R.layout.image_show);
		setTitle("ImageShowActivity");

		mSwitcher = (ImageSwitcher) findViewById(R.id.ImageSwitcher01);
		// 系统的anim中的fade_in.xml
		mSwitcher.setFactory(this);
		mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));

		Gallery g = (Gallery) findViewById(R.id.gallery);
		// 为缩略图浏览器指定一个适配器
		g.setAdapter(new ImageAdapter(this));
		// 响应 在缩略图列表上选中某个缩略图后的 事件
		g.setOnItemSelectedListener(this);

	}

	@SuppressWarnings("unchecked")
	public void onItemSelected(AdapterView parent, View v, int position, long id) {
		mSwitcher.setImageResource(mImageIds[position]);
	}

	@SuppressWarnings("unchecked")
	public void onNothingSelected(AdapterView parent) {
	}

	@Override
	public View makeView() {
		ImageView i = new ImageView(this);
		i.setBackgroundColor(0xFF000000);
		i.setScaleType(ImageView.ScaleType.FIT_CENTER);
		i.setLayoutParams(new ImageSwitcher.LayoutParams(
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		return i;
	}

	public class ImageAdapter extends BaseAdapter {
		private Context mContext;

		public ImageAdapter(Context c) {
			mContext = c;
		}

		public int getCount() {
			return mThumbIds.length;
		}

		public Object getItem(int position) {
			return position;
		}

		public long getItemId(int position) {
			return position;
		}
        
		//getView方法动态生成一个ImageView,然后利用setLayoutParams、setImageResource、
		//setBackgroundResource分别设定图片大小、图片源文件和图片背景。当图片被显示到当前
		//屏幕的时候，这个函数就会被自动回调来提供要显示的ImageView
		public View getView(int position, View convertView, ViewGroup parent) {
			ImageView i = new ImageView(mContext);

			i.setImageResource(mThumbIds[position]);
			i.setAdjustViewBounds(true);
			i.setLayoutParams(new Gallery.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			i.setBackgroundResource(R.drawable.picture_frame);
			return i;
		}

	}

}

  5.AndroidManifest.xml  标识MainActivity为一个程序的开始

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.       package="com.small.photos"  
4.       android:versionCode="1"  
5.       android:versionName="1.0">  
6.     <application android:label="@string/app_name">  
7.         <activity android:name=".ImageShowActivity"  
8.                   android:label="@string/app_name">  
9.               
10.         </activity>  
11.   
12.     <activity android:name="MainActivity"><intent-filter><action android:name="android.intent.action.MAIN"></action>  
13. <category android:name="android.intent.category.LAUNCHER"></category>  
14. </intent-filter>  
15. </activity>  
16. </application>  
17.   
18.   
19. </manifest>