Android 滑动效果入门篇（二）—— Gallery

朴灿烈づ我的快乐病毒、 2023-10-16 18:59 10阅读 0赞

[Gallery][] 是Android官方提供的一个View容器类，继承于AbsSpinner类，用于实现页面滑动效果。

![Image 1][]![1334047513_9175.png][]

从上面的继承关系可以看出，AbsSpinner类继承自AdapterView，因此我们可以自定义实现Adapter，来填充Gallery容器的数据。

**本示例通过自己实现一个Adapter，来填充Gallery容器的图片数据，首先看效果：**

![1334049396_8557.png][]

**Activity**

**\[java\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  import android.app.Activity;
2.  import android.os.Bundle;
3.  import android.view.View;
4.  import android.widget.AdapterView;
5.  import android.widget.Gallery;
6.  import android.widget.Toast;
7.  
8.  public class GalleryActivity extends Activity \{
9.  @Override
10. public void onCreate(Bundle savedInstanceState) \{
11. super.onCreate(savedInstanceState);
12. setContentView(R.layout.main);
13. 
14. Gallery gallery = (Gallery) findViewById(R.id.gallery);
15. gallery.setAdapter(new ImageAdapter(this)); // gallery添加ImageAdapter图片资源
16. gallery.setOnItemClickListener(listener); // gallery设置点击图片资源的事件
17. \}
18. 
19. AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() \{
20. @Override
21. public void onItemClick(AdapterView<?> parent, View view, int position, long id) \{
22. Toast.makeText(GalleryActivity.this, "图片 " \+ (position + 1), Toast.LENGTH\_SHORT).show();
23. \}
24. \};
25. \}

import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.Gallery;
    import android.widget.Toast;
    
    public class GalleryActivity extends Activity {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.main);
    
    		Gallery gallery = (Gallery) findViewById(R.id.gallery);
    		gallery.setAdapter(new ImageAdapter(this)); 		// gallery添加ImageAdapter图片资源
    		gallery.setOnItemClickListener(listener); 			// gallery设置点击图片资源的事件
    	}
    	
    	AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
    		@Override
    		public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    			Toast.makeText(GalleryActivity.this, "图片 " + (position + 1), Toast.LENGTH_SHORT).show();
    		}
    	};
    }

**ImageAdapter.java**

**\[java\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  import android.content.Context;
2.  import android.view.View;
3.  import android.view.ViewGroup;
4.  import android.widget.BaseAdapter;
5.  import android.widget.Gallery;
6.  import android.widget.ImageView;
7.  
8.  public class ImageAdapter extends BaseAdapter \{
9.  private Context mContext;
10. 
11. // 图片数组源
12. private Integer\[\] imgs = \{ R.drawable.img1, R.drawable.img2,
13. R.drawable.img3, R.drawable.img4, R.drawable.img5,
14. R.drawable.img6, R.drawable.img7\};
15. 
16. public ImageAdapter(Context c) \{
17. mContext = c;
18. \}
19. 
20. @Override
21. public int getCount() \{
22. return imgs.length;
23. \}
24. 
25. // 获取图片位置
26. @Override
27. public Object getItem(int position) \{
28. return imgs\[position\];
29. \}
30. 
31. // 获取图片ID
32. @Override
33. public long getItemId(int position) \{
34. return position;
35. \}
36. 
37. @Override
38. public View getView(int position, View convertView, ViewGroup parent) \{
39. ImageView imageview = new ImageView(mContext);
40. 
41. imageview.setImageResource(imgs\[position\]);
42. imageview.setLayoutParams(new Gallery.LayoutParams(240, 120)); // 设置布局 图片120×120显示
43. imageview.setScaleType(ImageView.ScaleType.CENTER); // 设置显示比例类型（不缩放）
44. return imageview;
45. \}
46. \}

import android.content.Context;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.Gallery;
    import android.widget.ImageView;
    
    public class ImageAdapter extends BaseAdapter {
    	private Context mContext;
    	
    	//  图片数组源
    	private Integer[] imgs = { R.drawable.img1, R.drawable.img2,
    			R.drawable.img3, R.drawable.img4, R.drawable.img5,
    			R.drawable.img6, R.drawable.img7};
    
    	public ImageAdapter(Context c) {
    		mContext = c;
    	}
    
    	@Override
    	public int getCount() {
    		return imgs.length;
    	}
    
    	// 获取图片位置
    	@Override
    	public Object getItem(int position) {
    		return imgs[position];
    	}
    
    	// 获取图片ID
    	@Override
    	public long getItemId(int position) {
    		return position;
    	}
    
    	@Override
    	public View getView(int position, View convertView, ViewGroup parent) {
    		ImageView imageview = new ImageView(mContext);
    
    		imageview.setImageResource(imgs[position]);
    		imageview.setLayoutParams(new Gallery.LayoutParams(240, 120));		// 设置布局 图片120×120显示
    		imageview.setScaleType(ImageView.ScaleType.CENTER);				// 设置显示比例类型（不缩放）
    		return imageview;
    	}
    }

main.xml

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="fill\_parent"
4.  android:layout\_height="wrap\_content"
5.  android:orientation="vertical">
6.  
7.  
8.  
9.  
10. <TextView
11. android:id="@+id/tv"
12. android:layout\_width="fill\_parent"
13. android:layout\_height="wrap\_content"
14. android:gravity="center"
15. android:layout\_gravity="center"
16. android:layout\_marginTop="50dip"
17. android:textColor="\#ffff0000"
18. android:textSize="30sp"
19. android:text="Gallery Test"/>
20. 
21. <Gallery
22. android:id="@+id/gallery"
23. android:layout\_width="fill\_parent"
24. android:layout\_height="wrap\_content"
25. android:layout\_marginTop="10dip"
26. android:layout\_below="@id/tv" />
27. 
28. </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="wrap_content"
        android:orientation="vertical">
        
        
        
        
        <TextView 
            android:id="@+id/tv"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"                
            android:layout_gravity="center"         
            android:layout_marginTop="50dip"
            android:textColor="#ffff0000"
            android:textSize="30sp"
            android:text="Gallery Test"/>
        
        <Gallery 
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:layout_below="@id/tv" />
        
    </RelativeLayout>

**[源码下载][Link 1]**

**示例分析：**

1、ImageAdapter中，是继承BaseAdapter自定义实现的，重载了BaseAdapter的几个虚方法，其中重要的有两个

getCount() ： 返回资源的大小（总长度）

getView(int position, View convertView, ViewGroup parent) ： 返回当前显示的资源（获取焦点）

2、GalleryActivity中，通过gallery.setAdapter(imgAdapter); 设置资源，然后设置gallery的点击监听事件。

3、main.xml中，是布局文件，显示一个TextView和Gallery，RelativeLayout是相对布局

总体来说，Gallery 上述的示例很简单，结构比较清晰，能够满足基本的应用。

**Gallery 高级应用**

上面的示例，仅仅是最简单的Gallery应用，如果我们想做的更酷、更炫的效果：

1、Gallery 图片显示能够循环播放，即向右滑到左侧第一张图片后，需要接着显示最后一张图片；向左滑到最后一张图片后，需要接着显示第一张图片，往复不间断显示的循环效果。

2、选中图片高亮，未选中图片阴影，更加突出当前获取焦点的选中图片

3、区分“点击”与“选中”图片事件的区别和适用场景

![1334059752_8512.png][]

**效果1 —— 高亮显示**

没有选中，在GalleryActivity中，设置gallery.setUnselectedAlpha(0.3f); 透明度为0.3

选中，在ImageAdapter的getView(int position, View convertView, ViewGroup parent)中，设置imageview.setBackgroundColor(Color.alpha(1)); 背景色为1

**效果2 —— 循环播放**

原理：Gallery循环播放的原理，跟循环链表的思想一样，首尾item连接都是通过“取余”实现

修改1、ImageAdapter中的getCount() 方法中，修改返回值为无穷大 return Integer.MAX\_VALUE;

修改2、ImageAdapter中的getView(int position, View convertView, ViewGroup parent)方法中，设置imageview.setImageResource(imgs\[position % imgs.length\]); 取余

修改3、GalleryActivity中，设置gallery.setSelection(imgAdapter.imgs.length \* 100); 使gallery显示图片的位置从中间开始显示（即imgAdapter.imgs.length \* 100）

修改解释：

修改1，主要是为了是循环接近无限往复循环，使position无限大，循环在实践应用上不容易结束（理论上会结束，即2^31-1约20亿次循环后）

修改2，通过取余，使图片能够重复利用并显示

修改3，由于起始位置如果是0，则向右滑动左侧将无法循环（此时左侧将为-1，超出了imgs\[\]数组的下边界），因此开始应设置起始位置为imgAdapter.imgs.length的整数倍

**效果3 —— “点击”和“选中”事件**

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

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

适用场景：

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

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

**高级应用完整代码：**

**Activity**

**\[java\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  import android.app.Activity;
2.  import android.os.Bundle;
3.  import android.view.Gravity;
4.  import android.view.View;
5.  import android.widget.AdapterView;
6.  import android.widget.Gallery;
7.  import android.widget.Toast;
8.  
9.  public class GalleryActivity extends Activity \{
10. 
11. private ImageAdapter imgAdapter = null; // 声明图片资源对象
12. private Gallery gallery = null;
13. 
14. @Override
15. public void onCreate(Bundle savedInstanceState) \{
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.main);
18. 
19. gallery = (Gallery) findViewById(R.id.gallery);
20. imgAdapter = new ImageAdapter(this);
21. gallery.setAdapter(imgAdapter); // 设置图片资源
22. gallery.setGravity(Gravity.CENTER\_HORIZONTAL); // 设置水平居中显示
23. gallery.setSelection(imgAdapter.imgs.length \* 100); // 设置起始图片显示位置（可以用来制作gallery循环显示效果）
24. 
25. gallery.setOnItemClickListener(clickListener); // 设置点击图片的监听事件（需要用手点击才触发，滑动时不触发）
26. gallery.setOnItemSelectedListener(selectedListener); // 设置选中图片的监听事件（当图片滑到屏幕正中，则视为自动选中）
27. gallery.setUnselectedAlpha(0.3f); // 设置未选中图片的透明度
28. gallery.setSpacing(40); // 设置图片之间的间距
29. \}
30. 
31. // 点击图片的监听事件
32. AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() \{
33. @Override
34. public void onItemClick(AdapterView<?> parent, View view, int position, long id) \{
35. Toast.makeText(GalleryActivity.this, "点击图片 " \+ (position + 1), 100).show();
36. \}
37. \};
38. 
39. // 选中图片的监听事件
40. AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() \{
41. @Override
42. public void onItemSelected(AdapterView<?> parent, View view, int position, long id) \{
43. Toast.makeText(GalleryActivity.this, "选中图片 " \+ (position + 1), 20).show();
44. \}
45. 
46. @Override
47. public void onNothingSelected(AdapterView<?> arg0) \{
48. 
49. \}
50. \};
51. \}

import android.app.Activity;
    import android.os.Bundle;
    import android.view.Gravity;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.Gallery;
    import android.widget.Toast;
    
    public class GalleryActivity extends Activity {
    	
    	private ImageAdapter imgAdapter = null;			// 声明图片资源对象
    	private Gallery gallery = null;
    	
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.main);
    
    		gallery = (Gallery) findViewById(R.id.gallery);
    		imgAdapter = new ImageAdapter(this);
    		gallery.setAdapter(imgAdapter); 					// 设置图片资源
    		gallery.setGravity(Gravity.CENTER_HORIZONTAL);		// 设置水平居中显示
    		gallery.setSelection(imgAdapter.imgs.length * 100);		// 设置起始图片显示位置（可以用来制作gallery循环显示效果）
    		
    		gallery.setOnItemClickListener(clickListener); 			// 设置点击图片的监听事件（需要用手点击才触发，滑动时不触发）
    		gallery.setOnItemSelectedListener(selectedListener);		// 设置选中图片的监听事件（当图片滑到屏幕正中，则视为自动选中）
    		gallery.setUnselectedAlpha(0.3f);					// 设置未选中图片的透明度
    		gallery.setSpacing(40);							// 设置图片之间的间距
    	}
    	
    	// 点击图片的监听事件
    	AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() {
    		@Override
    		public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    			Toast.makeText(GalleryActivity.this, "点击图片 " + (position + 1), 100).show();
    		}
    	};
    	
    	// 选中图片的监听事件
    	AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() {
    		@Override
    		public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
    			Toast.makeText(GalleryActivity.this, "选中图片 " + (position + 1), 20).show();
    		}
    
    		@Override
    		public void onNothingSelected(AdapterView<?> arg0) {
    			
    		}
    	};
    }

**ImageAdapter.java**

**\[java\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  import android.content.Context;
2.  import android.graphics.Color;
3.  import android.view.View;
4.  import android.view.ViewGroup;
5.  import android.widget.BaseAdapter;
6.  import android.widget.Gallery;
7.  import android.widget.ImageView;
8.  
9.  public class ImageAdapter extends BaseAdapter \{
10. private Context mContext;
11. 
12. // 图片数组源
13. public Integer\[\] imgs = \{ R.drawable.img1, R.drawable.img2,
14. R.drawable.img3, R.drawable.img4, R.drawable.img5,
15. R.drawable.img6, R.drawable.img7\};
16. 
17. public ImageAdapter(Context c) \{
18. mContext = c;
19. \}
20. 
21. @Override
22. public int getCount() \{
23. return Integer.MAX\_VALUE;
24. \}
25. 
26. // 获取图片位置
27. @Override
28. public Object getItem(int position) \{
29. return imgs\[position\];
30. \}
31. 
32. // 获取图片ID
33. @Override
34. public long getItemId(int position) \{
35. return position;
36. \}
37. 
38. @Override
39. public View getView(int position, View convertView, ViewGroup parent) \{
40. ImageView imageview = new ImageView(mContext);
41. 
42. imageview.setImageResource(imgs\[position % imgs.length\]);
43. imageview.setLayoutParams(new Gallery.LayoutParams(200, 94)); // 设置布局 图片120×120显示
44. imageview.setScaleType(ImageView.ScaleType.CENTER); // 设置显示比例类型
45. imageview.setBackgroundColor(Color.alpha(1));
46. return imageview;
47. \}
48. \}

import android.content.Context;
    import android.graphics.Color;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.Gallery;
    import android.widget.ImageView;
    
    public class ImageAdapter extends BaseAdapter {
    	private Context mContext;
    	
    	//  图片数组源
    	public Integer[] imgs = { R.drawable.img1, R.drawable.img2,
    			R.drawable.img3, R.drawable.img4, R.drawable.img5,
    			R.drawable.img6, R.drawable.img7};
    
    	public ImageAdapter(Context c) {
    		mContext = c;
    	}
    
    	@Override
    	public int getCount() {
    		return Integer.MAX_VALUE;
    	}
    
    	// 获取图片位置
    	@Override
    	public Object getItem(int position) {
    		return imgs[position];
    	}
    
    	// 获取图片ID
    	@Override
    	public long getItemId(int position) {
    		return position;
    	}
    
    	@Override
    	public View getView(int position, View convertView, ViewGroup parent) {
    		ImageView imageview = new ImageView(mContext);
    
    		imageview.setImageResource(imgs[position % imgs.length]);
    		imageview.setLayoutParams(new Gallery.LayoutParams(200, 94));		// 设置布局 图片120×120显示
    		imageview.setScaleType(ImageView.ScaleType.CENTER);				// 设置显示比例类型
    		imageview.setBackgroundColor(Color.alpha(1));
    		return imageview;
    	}
    }

**[源码下载][Link 1]**

![Image 1][]![Image 1][]

[Gallery]: http://developer.android.com/reference/android/widget/Gallery.html
[Image 1]: 
[1334047513_9175.png]: https://img-my.csdn.net/uploads/201204/10/1334047513_9175.png
[1334049396_8557.png]: https://img-my.csdn.net/uploads/201204/10/1334049396_8557.png
[view plain]: http://blog.csdn.net/ithomer/article/details/7442556#
[Link 1]: http://download.csdn.net/detail/sunboy_2050/4215046
[1334059752_8512.png]: https://img-my.csdn.net/uploads/201204/10/1334059752_8512.png