您好!欢迎来到源码码网

Android图片切换器控件ImageSwitcher和图库控件Gallery使用

  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2021-01-12 20:19
  • 阅读:607

在使用 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:

<activity android:name=".GalleryActivity"/>

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

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. <ImageSwitcher

  7. android:id="@+id/switcher"

  8. android:layout_width="match_parent"

  9. android:layout_height="match_parent"

  10. android:layout_alignParentLeft="true"

  11. android:layout_alignParentTop="true" />


  12. <Gallery

  13. android:id="@+id/gallery"

  14. android:layout_width="fill_parent"

  15. android:layout_height="60dp"

  16. android:layout_alignParentBottom="true"

  17. android:layout_alignParentLeft="true"

  18. android:background="#333333"

  19. android:gravity="center_vertical"

  20. android:spacing="16dp" />


  21. </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. import android.app.Activity;

  3. import android.content.Context;

  4. import android.os.Bundle;

  5. import android.view.View;

  6. import android.view.ViewGroup;

  7. import android.view.ViewGroup.LayoutParams;

  8. import android.view.animation.AnimationUtils;

  9. import android.widget.AdapterView;

  10. import android.widget.AdapterView.OnItemSelectedListener;

  11. import android.widget.BaseAdapter;

  12. import android.widget.Gallery;

  13. import android.widget.ImageSwitcher;

  14. import android.widget.ImageView;

  15. import android.widget.ViewSwitcher.ViewFactory;


  16. public class GalleryActivity extends Activity {

  17. private Gallery gallery;

  18. private ImageSwitcher imageSwitcher;

  19. private int[] resids = new int[]{

  20. R.drawable.img_1, R.drawable.bbb,

  21. R.drawable.img_2, R.drawable.img_5,

  22. R.drawable.img_3, R.drawable.img_6,

  23. R.drawable.img_4, R.drawable.img_7};


  24. @Override

  25. public void onCreate(Bundle savedInstanceState) {

  26. super.onCreate(savedInstanceState);

  27. setContentView(R.layout.gallery);

  28. /* 加载Gallery和ImageSwitcher */

  29. gallery = (Gallery) findViewById(R.id.gallery);


  30. imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher);

  31. /*创建用于描述图像数据的ImageAdapter对象*/

  32. ImageAdapter imageAdapter = new ImageAdapter(this);

  33. /*设置Gallery组件的Adapter对象*/

  34. gallery.setAdapter(imageAdapter);

  35. /*添加Gallery监听器*/

  36. gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

  37. @Override

  38. public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

  39. // TODO Auto-generated method stub

  40. //当选取Grallery上的图片时,在ImageSwitcher组件中显示该图像

  41. imageSwitcher.setImageResource(resids[position]);

  42. }


  43. @Override

  44. public void onNothingSelected(AdapterView<?> argO) {

  45. // TODO Auto-generated method stub

  46. }

  47. });


  48. /* 设置ImageSwitcher组件的工厂对象*/

  49. imageSwitcher.setFactory(new ViewFactory() {

  50. /* ImageSwitcher用这个方法来创建一个View对象去显示图片*/

  51. @Override

  52. public View makeView() {

  53. // TODO Auto-generated method stub

  54. ImageView imageView = new ImageView(GalleryActivity.this);

  55. /* setScaleType 可以设置当图片大小和容器大小不匹配时的剪辑模式*/

  56. imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

  57. imageView.setLayoutParams(new ImageSwitcher.LayoutParams(

  58. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

  59. return imageView;

  60. }


  61. });


  62. /* 设置ImageSwitcher组件显示图像的动画效果 */

  63. imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));

  64. imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));


  65. }


  66. public class ImageAdapter extends BaseAdapter {

  67. /* 定义Context */

  68. private Context mContext;


  69. /*声明ImageAdapter */

  70. public ImageAdapter(Context context) {

  71. mContext = context;

  72. }


  73. @Override

  74. /*获取图片的个数*/

  75. public int getCount() {

  76. // TODO Auto-generated method stub

  77. return resids.length;

  78. }


  79. /*获取图片在库中的位置 */

  80. @Override

  81. public Object getItem(int position) {

  82. // TODO Auto-generated method stub

  83. return position;

  84. }


  85. /*获取图片ID */

  86. @Override

  87. public long getItemId(int position) {

  88. // TODO Auto-generated method stub

  89. return position;

  90. }


  91. /* 返回具体位置的ImageView对象 */

  92. @Override

  93. public View getView(int position, View convertView, ViewGroup parent) {

  94. ImageView imageview = new ImageView(mContext);

  95. /*给ImageView设置资源*/

  96. imageview.setImageResource(resids[position]);

  97. /*设置图片布局大小为100*100 */

  98. imageview.setLayoutParams(new Gallery.LayoutParams(100, 100));

  99. /* 设置显示比例类型*/

  100. imageview.setScaleType(ImageView.ScaleType.FIT_XY);

  101. return imageview;

  102. }

  103. }

  104. }


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 组件图片切换时的渐入和渐出效果。

特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《源码码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • 陀螺匠OA办公系统源码 PHP + Vue 前后端分离 完整可商用
  • 陀螺匠OA办公系统源码 PHP + Vue 前后端分离 完整可商用
  • 项目介绍《陀螺匠》是一套采用Laravel9框架结合Swoole高性能框架与Vue.js前端技术栈构建的AI+低代码双引擎智能办公系统。陀螺匠深度融合了AI智能体以及低代码开发平台,系统简约,易于功能扩展,方便二次开发。旨在为企业提供一站式、数智化转型的全方位解决方案,助力企业高效运营与智能决策。源码说明源码说明:项目代码100%开源,基于AGPL-3.0,支持免费商用!技术栈:系统基于Laravel9+Swoole+Vue.
  • 软件教程
  • 来源:CRMEB
  • 编辑:CRMEB
  • 时间:2026-03-27 15:33
  • 阅读:393
  • open claw最近很火,如何理性看待?
  • open claw最近很火,如何理性看待?
  • openclaw是2026年初科技圈最火爆的现象级话题。它不仅仅是又一个AI产品,更被百川智能的王小川誉为与ChatGPT诞生同等重要的里程碑——标志着AI从”只会说”的对话者,进化到了”能够做”的行动者。对于这股全民”养虾”热潮,我的观察是:它代表了一次人机关系的革命性跃迁,但同时也是一场充满风险与泡沫的狂欢,其真正的价值需要在喧嚣褪去、安全与成本的挑战被克服后才能显现。下
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2026-03-17 11:06
  • 阅读:435
  • 原生小程序和封装的小程序有什么区别
  • 原生小程序和封装的小程序有什么区别
  • 原生小程序和封装的小程序是两种不同的开发模式,主要区别在于开发方式、性能表现、代码维护以及跨平台能力。为了让你更清晰地理解,我们可以把“原生”比作用钢筋水泥直接盖楼,而“封装”则是用预制板或套件来组装楼。以下是详细的对比分析:1.定义与本质原生小程序:定义: 直接使用微信官方提供的开发工具、语法和API进行开发。语言: 使用微信自己定义的一套技术栈(WXML(微信标记语言)做结构、WXSS(微信样式表)做样式、JS
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2026-03-06 11:54
  • 阅读:669
  • 基于NetCore(Razor Page)开发的Cms建站系统MIT协议
  • 基于NetCore(Razor Page)开发的Cms建站系统MIT协议
  • FytSoaCms一款基于NetCore2.2/3.1(RazorPage)功能强大的Cms建站系统,支持前后端分离。简介:模块化:全新的架构和模块化的开发机制,便于灵活扩展和二次开发。模型/栏目/分类信息体系:通过栏目和模型绑定,以及不同的模型类型,不同栏目可以实现差异化的功能,轻松实现诸如资讯、下载、讨论和图片等功能。通过分类信息和栏目绑定,可以自动建立索引表,轻松实现复杂的信息检索。FytSoa是一套基于NetCore+SqlS
  • 开发工具
  • 来源:gitee
  • 编辑:源码码网
  • 时间:2026-01-24 22:21
  • 阅读:596
  • 基于JAVA开发的企业级平台微信公众号管理系统SmartWx
  • 基于JAVA开发的企业级平台微信公众号管理系统SmartWx
  • SmartWx微信公众号管理系统是一个完整的微信公众号web操作版,直接编译即可运行。让用户不再用关心微信的底层接口,直接使用页面进行操作,简单方便。包括服务器绑定、文本管理、图文管理、菜单管理、粉丝管理、群发消息等。技术框架开发语言:JAVA数据库:MYSQLJAVA开发框架:SpringMVC+Spring+Mybatis缓存框架:j2cache前端开发框架:Layui+JQuery+html前台模板引擎:art-templat
  • 源码教程
  • 来源:gitee
  • 编辑:源码码网
  • 时间:2026-01-24 21:53
  • 阅读:602
联系客服
源码代售 源码咨询 技术开发 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部