Android ImageSwitcher和Gallery：图片切换器和图库

小咪咪 2021-12-09 23:21 218阅读 0赞

在使用 [Android][] 手机设置壁纸的时候，会看到屏幕底部有很多可以滚动的图片，当单击某一图片时，在其上面的空间会显示当前选中的图片，此时我们用到的就是 Gallery（图库）和 ImageSwitcher（图片切换器）。  
  
Gallery 组件用于横向显示图像列表，并且自动将当前图像放置到中间位置。  
  
ImageSwitcher 则像是图片浏览器，可以切换图片，通过它可以制作简单的幻灯片等。通常将这两个类结合在一起使用，可以制作有一定效果的相册。  
  
下面通过一个实例来了解一下这两个组件的使用方法。  
  
在工程 WidgetDemo 的布局文件 main.xml 中添加一个名为 GalleryDemo 的 Button，用以启动 GalleryActivity。在 main.xml 中添加代码如下：

1.  <Button
2.  android:id="@+id/button11"
3.  android:layout\_width="wrap\_content"
4.  android:layout\_height="wrap\_content"
5.  android:text="GalleryDemo"/>

单击 Button 并启动 GalleryActivity 的代码如下：

1.  Button gallerybtn = (Button)this.findViewById(R.id.button11);
2.  gallerybtn.setOnClickListener(new View.OnClickListener()\{
3.  @Override
4.  public void onClick(View v)\{
5.  Intent intent;
6.  intent = new Intent(MainActivity.this, GalleryActivity.class);
7.  startActivity(intent);
8.  \}
9.  \});

同时在 AndroidManifest.xml 文件中声明该 Activity：

GalleryActivity 的运行效果如图 1 所示。

![GalleryActivity的运行效果][GalleryActivity]  
图 1 GalleryActivity 的运行效果

GalleryActivity 使用的布局文件为 gallery.xml，内容如下：

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  android:orientation="vertical">
6.  
7.  <ImageSwitcher
8.  android:id="@+id/switcher"
9.  android:layout\_width="match\_parent"
10. android:layout\_height="match\_parent"
11. android:layout\_alignParentLeft="true"
12. android:layout\_alignParentTop="true" />
13. 
14. <Gallery
15. android:id="@+id/gallery"
16. android:layout\_width="fill\_parent"
17. android:layout\_height="60dp"
18. android:layout\_alignParentBottom="true"
19. android:layout\_alignParentLeft="true"
20. android:background="\#333333"
21. android:gravity="center\_vertical"
22. android:spacing="16dp" />
23. 
24. </RelativeLayout>

该布局文件使用的是相对布局。  
1）通过 android:layout\_alignParentTop="true" 属性将 ImageSwitcher 放置于视图的顶端，其顶部与其父组件的顶部对齐。  
2）通过 android: layout\_alignParentLeft="true" 属性使 ImageSwitcher 的左边缘与其父组件的左边缘对齐。  
  
在设置 Gallery 组件时，将其与屏幕的左下角对其，android:layout\_alignParentBottom="true" 是将该组件的底部与其父组件的底部对齐，并且使用 android:spacing="16dp" 属性设置图片之间的间距。  
  
GalleryActivity.java 的代码如下：

1.  package introduction.android.widgetdemo;
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.ViewGroup.LayoutParams;
9.  import android.view.animation.AnimationUtils;
10. import android.widget.AdapterView;
11. import android.widget.AdapterView.OnItemSelectedListener;
12. import android.widget.BaseAdapter;
13. import android.widget.Gallery;
14. import android.widget.ImageSwitcher;
15. import android.widget.ImageView;
16. import android.widget.ViewSwitcher.ViewFactory;
17. 
18. public class GalleryActivity extends Activity \{
19. private Gallery gallery;
20. private ImageSwitcher imageSwitcher;
21. private int\[\] resids = new int\[\]\{
22. R.drawable.img\_1, R.drawable.bbb,
23. R.drawable.img\_2, R.drawable.img\_5,
24. R.drawable.img\_3, R.drawable.img\_6,
25. R.drawable.img\_4, R.drawable.img\_7\};
26. 
27. @Override
28. public void onCreate(Bundle savedInstanceState) \{
29. super.onCreate(savedInstanceState);
30. setContentView(R.layout.gallery);
31. /\* 加载Gallery和ImageSwitcher \*/
32. gallery = (Gallery) findViewById(R.id.gallery);
33. 
34. imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
35. /\*创建用于描述图像数据的ImageAdapter对象\*/
36. ImageAdapter imageAdapter = new ImageAdapter(this);
37. /\*设置Gallery组件的Adapter对象\*/
38. gallery.setAdapter(imageAdapter);
39. /\*添加Gallery监听器\*/
40. gallery.setOnItemSelectedListener(new OnItemSelectedListener() \{
41. @Override
42. public void onItemSelected(AdapterView<?> parent, View view, int position, long id) \{
43. // TODO Auto-generated method stub
44. //当选取Grallery上的图片时，在ImageSwitcher组件中显示该图像
45. imageSwitcher.setImageResource(resids\[position\]);
46. \}
47. 
48. @Override
49. public void onNothingSelected(AdapterView<?> argO) \{
50. // TODO Auto-generated method stub
51. \}
52. \});
53. 
54. /\* 设置ImageSwitcher组件的工厂对象\*/
55. imageSwitcher.setFactory(new ViewFactory() \{
56. /\* ImageSwitcher用这个方法来创建一个View对象去显示图片\*/
57. @Override
58. public View makeView() \{
59. // TODO Auto-generated method stub
60. ImageView imageView = new ImageView(GalleryActivity.this);
61. /\* setScaleType 可以设置当图片大小和容器大小不匹配时的剪辑模式\*/
62. imageView.setScaleType(ImageView.ScaleType.FIT\_CENTER);
63. imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
64. LayoutParams.FILL\_PARENT, LayoutParams.FILL\_PARENT));
65. return imageView;
66. \}
67. 
68. \});
69. 
70. /\* 设置ImageSwitcher组件显示图像的动画效果 \*/
71. imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade\_in));
72. imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade\_out));
73. 
74. \}
75. 
76. public class ImageAdapter extends BaseAdapter \{
77. /\* 定义Context \*/
78. private Context mContext;
79. 
80. /\*声明ImageAdapter \*/
81. public ImageAdapter(Context context) \{
82. mContext = context;
83. \}
84. 
85. @Override
86. /\*获取图片的个数\*/
87. public int getCount() \{
88. // TODO Auto-generated method stub
89. return resids.length;
90. \}
91. 
92. /\*获取图片在库中的位置 \*/
93. @Override
94. public Object getItem(int position) \{
95. // TODO Auto-generated method stub
96. return position;
97. \}
98. 
99. /\*获取图片ID \*/
100. @Override
101. public long getItemId(int position) \{
102. // TODO Auto-generated method stub
103. return position;
104. \}
105. 
106. /\* 返回具体位置的ImageView对象 \*/
107. @Override
108. public View getView(int position, View convertView, ViewGroup parent) \{
109. ImageView imageview = new ImageView(mContext);
110. /\*给ImageView设置资源\*/
111. imageview.setImageResource(resids\[position\]);
112. /\*设置图片布局大小为100\*100 \*/
113. imageview.setLayoutParams(new Gallery.LayoutParams(100, 100));
114. /\* 设置显示比例类型\*/
115. imageview.setScaleType(ImageView.ScaleType.FIT\_XY);
116. return imageview;
117. \}
118. \}
119. \}

Gallery 要显示的图片来自资源文件。把需要显示的图片放在 /res/drawable 目录下后，将这些图片的 ID 保存在一个 int 数组中以备使用。相关代码如下：

1.  private int\[\] resids = new int\[\]\{
2.  R.drawable.img\_1, R.drawable.bbb,
3.  R.drawable.img\_2, R.drawable.img\_5,
4.  R.drawable.img\_3, R.drawable.img\_6,
5.  R.drawable.img\_4, R.drawable.img\_7\};

Gallery 通过 setAdapter（imageAdapter）方法将组件和要显示的图片关联起来。  
  
本实例中为 Gallery 设定的适配器为 ImageAdapter，主要用于描述图像信息，其为 android.widget.BaseAdapter 的子类。  
  
在 ImageAdapter 类中有两个方法值得我们注意：  
1）getCount() 方法：用于返回图片的总数，通常使用获取存放图片数组长度的方法获取图片总数，也可以规定具体的返回数，但不能超过实际图片数量。  
2）getView() 方法：是当 Gallery 需要显示某一个图像时，将当前图片的索引，也就是 position 的值传入，从 resids 数组中获得相应的图片的 ID。  
  
GalleryActivity 为添加 Gallery 监听器，处理了用户单击 Gallery 中图片的事件，并设置了 ImageSwitcher 相关属性。其代码如下：

1.  imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade\_in));
2.  imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade\_out));

设置了 ImageSwitcher 组件图片切换时的渐入和渐出效果。

[Android]: http://c.biancheng.net/android/
[GalleryActivity]: /images/20211209/828a88b9d6394eb3a8386186f19c84a8.png