【Android 应用开发】AndroidUI设计 之 图片浏览器

图片浏览器效果图 : 

源码下载地址 : 

-- CSDN : http://download.csdn.net/detail/han1202012/6875083

-- GitHub : https://github.com/han1202012/AndroidPictureViewer.git

.

作者 :万境绝尘 

转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835

.

一. 图片浏览器显示界面ImageView介绍

1. ImageView的上下继承结构

下面是API中的结构: 

java.lang.Object   ↳android.view.View  android.widget.ImageView Known Direct Subclasses Known Indirect Subclasses

绘制成UML图 : 

通过上面的分析 : ImageView有两个子类 ImageButton 和 QuickContactBadge, ImageButton还有一个子类是 ZoomButton;

2. XML文件属性

调整边界, 保持长宽比 :android:adjustViewBounds, setAdjustViewBounds(boolean), 是否调整自己的边界, 用来保持图片的长宽比例, 该属性与 android:maxHeight 和 android:maxWidth 属性一起使用才有效果, 单独使用没有效果;

设置最大宽度, 高度 :android:maxWidth(android:maxHeight), setMaxWidth(int)[setMaxHeight(int)], 该属性需要与android:adjustViewBounds属性一起使用,单独使用无效果; 

-- 设置图片固定大小, 同时保持长宽比 : a. 设置android:adjustViewBounds 为 true; b. 设置最大宽度, 高度; c. 设置android:layout_width 与 android:layout_height 值为 warp_content;

裁剪保留空白 :android:cropToPadding, setCropToPadding(boolean), 是否裁剪, 用来保留ImageView的padding, 该属性与android:scrollY 属性一起使用的时候才有用, 单独使用没有效果; 即 在滚动的时候, 滚动到边界, 边界的padding空白是否显示;

填充方式 :android:scaleType, setScaleType(ImageView.ScaleType), 设置图片缩放类型以适配ImageView大小, 即填充方式;

可能的取值 : matrix, fitXY, fitStart, fitCenter, fitEnd, center, centerCrop, centerInside;

-- matrix : 方法中的常量值为 ImageView.ScaleType.MATRIX, 使用矩阵来进行绘图;

-- fitXY : 方法中的常量值为 ImageView.ScaleType.FIT_XY, 在x y 两个方向上缩放, 使图片完全填充整个ImageView 不按照长宽比例缩放;

-- fitStart : 方法中的常量值为 ImageView.ScaleType.FIT_START, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片在左上角;

-- fitCenter : 方法中的常量值为 ImageView.ScaleType.FIT_CENTER, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片位于中央;

-- fitEnd : 方法中的常量值为 ImageView.ScaleType.FIT_END, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片位于右下角;

-- center : 方法中的常量值为 ImageView.ScaleType.CENTER, 将图片放在ImageView的中央, 不进行缩放;

-- centerCrop : 方法中的常量值为 ImageView.ScaleType.CENTER_CROP, 保持长宽比缩放, 使图片完全覆盖ImageView;

-- centerInside : 方法中的常量值为 ImageView.ScaleType.CENTER_INSIDE, 保持长宽比缩放, 是的ImageView完全显示图片;

实例 : 

XML文件 : 

修改其中的 android:scaleType属性值, 查看其中的差异 : 

原图 : 

android:scaleType 默认情况下 : 

android:scaleType = "matrix" : 由下图可以看出, ImageView中的图片宽度与原图一样, 该属性不进行任何缩放,直接将图片放在左上角;

android:scaleType = "fixXY" : 长宽不按比例拉伸, 图片明显变形 : 

android:scaleType = "fitStart" , 图片按比例缩放, 宽先达到边界, 图片位于上边; 如果高先达到边界, 图片位于左边;

android:scaleType = "fieCenter" ,长宽按照比例缩放, 宽度先达到边界, 上下有空白; 如果高度先达到边界, 那么左右有空白;

android:scaleType = "fitEnd" , 长宽等比例缩放, 宽度先达到边界, 位于下边; 如果高度先达到边界, 位于右边;

android:scaleType = "center" ,长宽不进行缩放, 图片的中心 与 ImageView 的中心重合;

android:scaleType = "centerCrop" ,长宽等比例缩放, 使图片完全覆盖ImageView, 图片中心与ImageView中心重合, 使图片最短的边能覆盖ImageView边界;

android:scaleType = "centerInside" ,长宽等比例缩放, 如果图片宽高小于等于ImageView宽高, 那么就按照原图大小显示; 如果图片大于ImageView, 那么按照等比例缩小直到能完全显示为止;

3. ImageView常用方法

设置图片 : 

-- 设置位图 : setImageBitmap(bitmap), 为ImageView设置Bitmap位图显示;

-- 设置Drawable : setImageDrawable(drawable), 为ImageView设置Drawable显示;

-- 设置资源 : setImageResource(int), 为ImageView设置资源图片;

-- 设置路径 : setImageUri(uri), 为ImageView设置图片路径, 显示该路径的图片;

二. 图片浏览器操作介绍

1. 实现左右循环切换图片

图片数组 : 将图片放在数组中, ImageView显示数组中的图片;

当前显示图片下标索引 : 设置一个int值, 用来表示当前显示图片数组中的图片, 这个值不是int下标, 这个值设置很大设置成Integer.MAXVALUE / 2, 该值与图片数组的长度进行取模运算结果就是当前显示的图片数组下标值;

翻页操作 : 上一页操作就将当前显示索引自减1, 然后模上 图片数组大小; 下一页就将当前索引自增1, 然后模上 图片数组大小;

代码示例 : 

		//设置一个很大的值, 保证前后翻页不会出现异常
		currentImage = Integer.MAX_VALUE / 2; 
		//为了保证图片能够循环, 这里模运算是关键, 显示图片的下标始终是长度的模
		image_all.setImageResource(images[ ++currentImage % images.length ]);
		image_all.setImageResource(images[ --currentImage % images.length ]);

2. 透明度改变

设置当前透明度 : 设置一个当前透明度值, 初始值为255, 255是不透明, 0为完全透明;

透明度改变 : 当点击透明度增加按钮的时候, 透明度自增20, 如果结果透明度大于255, 那么改透明度强制设置为255; 当点击透明度见效按钮的时候, 透明度自减20, 当透明度小于0的时候, 透明度强制设置为0;

代码示例 : 

		//透明度初始值
		alpha = 255;
		//透明度增加
		alpha += 20;
		if(alpha >= 255)
			alpha = 255;
		image_all.setAlpha(alpha);
		//透明度减小
		alpha -= 20;
		if(alpha