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>   

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.small.photos"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:label="@string/app_name">
        <activity android:name=".ImageShowActivity"
                  android:label="@string/app_name">
            
        </activity>

    <activity android:name="MainActivity"><intent-filter><action android:name="android.intent.action.MAIN"></action>
<category android:name="android.intent.category.LAUNCHER"></category>
</intent-filter>
</activity>
</application>


</manifest> 

 

 然后运行就行了！