Android学习笔记26:图片切换控件ImageSwitcher的使用
在Windows操作系统中,要查看多张图片,可以通过使用“Windows照片查看器”在“上一张”和“下一张”之间切换,进行多张图片的浏览。
在Android中,可以通过使用图片切换控件ImageSwitcher来实现浏览多张图片的功能。下面我们就通过一个实际的例子来说明图片切换控件ImageSwitcher的使用方法。
1.界面布局
在xml布局文件中,我们使用LinearLayout对整个界面进行垂直布局。在界面的顶端设置了一个水平居中的ImageSwitcher控件,用来显示多张图片。在ImageSwitcher控件的下面使用LinearLayout水平布局设置四个ImageButton按钮,在点击这些按钮时分别用于实现右旋图片、显示上一张图片、显示下一张图片、左旋图片效果。整个布局文件很简单,具体源码如下:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:orientation="vertical" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" > 6 7 <ImageSwitcher 8 android:id="@+id/imageSwitcher" 9 android:layout_marginTop="5dp" 10 android:layout_gravity="center" 11 android:layout_width="wrap_content" 12 android:layout_height="wrap_content" ></ImageSwitcher> 13 14 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 15 xmlns:tools="http://schemas.android.com/tools" 16 android:orientation="horizontal" 17 android:layout_marginTop="5dp" 18 android:layout_width="match_parent" 19 android:layout_height="match_parent" > 20 21 <!-- 右旋箭头 --> 22 <ImageButton 23 android:id="@+id/rightrotatearrow" 24 android:layout_marginLeft="30dp" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:src="@drawable/rightrotatearrow" ></ImageButton> 28 29 <!-- 前一个箭头 --> 30 <ImageButton 31 android:id="@+id/forwardarrow" 32 android:layout_width="wrap_content" 33 android:layout_height="wrap_content" 34 android:src="@drawable/forwardarrow" ></ImageButton> 35 36 <!-- 下一个箭头 --> 37 <ImageButton 38 android:id="@+id/nextarrow" 39 android:layout_width="wrap_content" 40 android:layout_height="wrap_content" 41 android:src="@drawable/nextarrow" ></ImageButton> 42 43 <!-- 左旋箭头 --> 44 <ImageButton 45 android:id="@+id/liftrotatearrow" 46 android:layout_width="wrap_content" 47 android:layout_height="wrap_content" 48 android:src="@drawable/liftrotatearrow" ></ImageButton> 49 50 </LinearLayout> 51 52 </LinearLayout>
程序运行后的效果如图1所示。
图1 主界面
2.ViewFactory接口
要将图片显示在ImageSwitcher控件中,必须为ImageSwitcher类设置一个ViewFactory,用来将显示的图片和父窗口区分开来。这可以通过如下方法来实现:
mImageSwitcher.setFactory();
此外,我们还需要实现ViewSwitcher.ViewFactory接口中的makeView()抽象方法,通过该方法可以返回一个ImageView对象,所有图片都将通过该ImageView对象来进行显示。具体实现方法如下:
1 /* 2 * Function : makeView() 3 * Describe : 将所有图片通过ImageView来显示 4 * Author : 博客园-依旧淡然 5 */ 6 public View makeView() { 7 return new ImageView(this); 8 }
3.存储图片资源
在《Android学习笔记25:画廊控件Gallery的使用》(http://www.cnblogs.com/menlsh/archive/2013/02/26/2934434.html)中,我们是通过使用一个继承自BaseAdapter类的派生类ImageAdapter来存储图片资源的。
在该实例中,我们将新建一个ArrayList对象来存储图片资源,方法如下:
List<Drawable> list = new ArrayList<Drawable>();
然后,可以使用list.add()方法将图片资源加载到该ArrayList对象中,具体方法如下:
1 //将图片资源加载到ArrayList中 2 list.add(getResources().getDrawable(R.drawable.image1)); 3 list.add(getResources().getDrawable(R.drawable.image2)); 4 list.add(getResources().getDrawable(R.drawable.image3)); 5 list.add(getResources().getDrawable(R.drawable.image4));
在该实例中,我们往ArrayList中加载了4张资源图片。
4.获取图片资源
当我们点击“上一张”和“下一张”按钮时,需要获取图片资源进行显示,这该如何实现呢?
通过查看ImageSwitcher的API帮助文档(http://developer.android.com/reference/android/widget/ImageSwitcher.html),我们可以看出向ImageSwitcher加载图片有以下三种方式:
(1)public void setImageDrawable(Drawable drawable);
(2)public void setImageResource(int resid);
(3)public void setImageURI(Uri uri);
其中,setImageDrawable()方法通过Drawable对象来获取图片资源;setImageResource()方法通过图片资源Id来获取图片资源;setImageURI()方法通过图片的Uri路径来获取图片资源。
在该实例中,我们选择使用setImageDrawable()方法来获取图片资源,这也就是为什么我们往ArrayList对象中存储图片时使用Drawable对象的原因。
5.按键处理
在该实例中,我们还需要实现OnClickListener接口的onClick()方法,对四个按键进行事件监听,具体实现方法如下:
1 /* 2 * Function : 事件监听处理 3 * Author : 博客园-依旧淡然 4 */ 5 public void onClick(View v) { 6 switch (v.getId()) { 7 case R.id.forwardarrow: //向前箭头按钮按键处理 8 index--; 9 if (index < 0) { 10 index = list.size() - 1; 11 } 12 mImageSwitcher.setImageDrawable(list.get(index)); 13 break; 14 case R.id.nextarrow: //向后箭头按钮按键处理 15 index++; 16 if (index >= list.size()) { 17 index = 0; 18 } 19 mImageSwitcher.setImageDrawable(list.get(index)); 20 break; 21 case R.id.liftrotatearrow: //左旋箭头按钮按键处理 22 //TO DO 23 break; 24 case R.id.rightrotatearrow: //右旋箭头按钮按键处理 25 //TO DO 26 break; 27 } 28 }
其中,变量index用于对图片进行索引,实现图片的循环显示,即当显示到最后一张图片时,再次点击“下一张”,则将图片索引号重置为0,然后重新显示第一张图片;当显示第一张图片时,再次点击“上一张”,则将图片的索引号重置为最大,然后显示最后一张图片。
在该实例中,并未对“左旋”和“右旋”按钮进行按键处理。要实现图片的旋转效果,请见博文《Android学习笔记11:图像的平移、旋转及缩放》(http://www.cnblogs.com/menlsh/archive/2012/12/02/2798802.html)。
Android学习笔记26:图片切换控件ImageSwitcher的使用相关推荐
- Android学习笔记(一)——控件布局常用属性
LinearLayout线性布局 id:为控件指定相应的ID. width:控件的宽度. height:控件的高度. background:背景颜色. Orientation:控件的排列方向(默认是水 ...
- Python tkinter 学习笔记(2)-- 控件、组件(二)
Python tkinter 学习笔记(1)-- 第一个窗口之HelloWorld 教程 Python tkinter 学习笔记(2)-- 控件.组件(一) > 续上一章节 Python tki ...
- C# 学习笔记(8) 控件的跨线程访问
C# 学习笔记(8) 控件的跨线程访问 本文参考博客 C#多线程 https://www.cnblogs.com/dotnet261010/p/6159984.html C# 线程与进程 https: ...
- Android如何设置按钮图片(控件图片)大小自适应
Android如何设置按钮图片(控件图片)大小自适应 在你的button中放入图片:drawble属性,你可以选择它的位置上下左右, 如何让图片自适应? 把图片放入res-drawable-mipma ...
- CropImageView android上的一个图片裁剪控件
CropImageView **文前:**本文非常容易让读者看的云里雾里,建议直接看效果图,觉得有用就去看源码吧. CropImageView的原型来自Cropimage_demo,是android上 ...
- Vue学习笔记:Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择 需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择 文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
- 安卓学习笔记18:常用控件 - 按钮、图像视图和图像按钮
文章目录 零.学习目标 一.按钮控件 1.继承关系图 2.常用属性 二.图像视图 1.继承关系图 2.常用属性 三.图像按钮 1.继承关系图 2.常用属性 四.教学案例 - 通过按钮缩放图片 (一)运 ...
- 安卓开发学习笔记1:简单控件
此文章仅为本人在学习安卓开发时的一些笔记 界面显示逻辑处理 使用XML标记.描绘应用界面,使用Java书写程序逻辑 使用XML描述APP界面 使用XML文件描述APP界面 一个界面布局可以被多处代码复 ...
- 安卓学习笔记23:常用控件 - 网格视图与图像切换器
文章目录 零.学习目标 一.网格视图 (一)概述 (二)继承关系图 (三)常用属性 二.图像切换器 (一)概述 (二)继承关系图 三.案例演示 - 选择水果 (一)运行效果 (二)涉及知识点 (三)实 ...
最新文章
- 实用代码---取得当前的年月日,当前的时分秒获得,周几和星期几获得
- linux多线程编程5--信号量(semaphore)
- hdu1521 指数型母函数
- win10 VScode配置GCC(MinGW)
- codevs1040 统计单词个数
- ANDROID调用webservice带soapheader验证
- python 删除sheet_python操作excel
- 平均无故障时间100万小时_【行业动态】三菱J系列重型燃气轮机达新里程碑:100万商业运行小时数...
- (6)ISE14.7生成bit文件报错解决(FPGA不积跬步101)
- 523. 连续的子数组和
- PriorityQueue 优先队列
- 最新服务器cpu14纳米,英特尔CPU路线图 14nm活力不减 7nm不远了
- #java读书笔记#基础知识
- 模式识别类毕业论文文献都有哪些?
- webrtc服务器开发--搭建环境
- 谈谈用户留存率为何如此重要?
- python判断正数和负数教案_正数和负数教学设计
- 吃烧烤之命令模式学习笔记[C++版]
- 查看自己手机是否支持Google服务
- 亚盛医药全球总部、研发中心正式启用;强生医疗中国“智造”爱惜康新一代抗菌薇乔可吸收缝线上市 | 医药健闻...