在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的,因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放。
如果你还没有看过Android瀑布流照片墙实现体验不规则排列的美感这篇文章,请尽量先去阅读完再来看本篇文章,因为这次的代码完全是在上次的基础上进行开发的。
那我们现在就开始动手吧,首先打开上次的PhotoWallFallsDemo项目,在里面加入一个ZoomImageView类,这个类就是用于进行大图展示和多点触控缩放的,代码如下所示:
公开课ZoomImageView扩展视图{/* *
*初始化状态常量
*/公共静态最终int STATUS_INIT=1;/* *
*图片放大状态常量
*/公共静态最终int STATUS_ZOOM_OUT=2;/* *
*图片缩小状态常量
*/公共静态最终int STATUS_ZOOM_IN=3;/* *
*图片拖动状态常量
*/公共静态最终int STATUS_MOVE=4;/* *
*用于对图片进行移动和缩放变换的矩阵
*/私人矩阵矩阵=new矩阵();/* *
*待展示的位图对象
*/私人位图sourceBitmap;/* *
*记录当前操作的状态,可选值为STATUS_INIT, STATUS_ZOOM_OUT, STATUS_ZOOM_IN和STATUS_MOVE
*/私人int currentStatus;/* *
* ZoomImageView控件的宽度
*/私人int宽度;/* *
* ZoomImageView控件的高度
*/私人int高度;/* *
*记录两指同时放在屏幕上时,中心点的横坐标值
*/私人centerPointX浮动;/* *
*记录两指同时放在屏幕上时,中心点的纵坐标值
*/私人centerPointY浮动;/* *
*记录当前图片的宽度,图片被缩放时,这个值会一起变动
*/私人currentBitmapWidth浮动;/* *
*记录当前图片的高度,图片被缩放时,这个值会一起变动
*/私人currentBitmapHeight浮动;/* *
*记录上次手指移动时的横坐标
*/私人浮动lastXMove=1;/* *
*记录上次手指移动时的纵坐标
*/私人浮动lastYMove=1;/* *
*记录手指在横坐标方向上的移动距离
*/私人movedDistanceX浮动;/* *
*记录手指在纵坐标方向上的移动距离
*/私人movedDistanceY浮动;/* *
*记录图片在矩阵上的横向偏移值
*/私人totalTranslateX浮动;/* *
*记录图片在矩阵上的纵向偏移值
*/私人totalTranslateY浮动;/* *
*记录图片在矩阵上的总缩放比例
*/私人totalRatio浮动;/* *
*记录手指移动的距离所造成的缩放比例
*/私人scaledRatio浮动;/* *
*记录图片初始化时的缩放比例
*/私人initRatio浮动;/* *
*记录上次两指之间的距离
*/私人双lastFingerDis;/* *
* ZoomImageView构造函数,将当前操作状态设为STATUS_INIT。
*
* @param上下文
* @param attrs
*/公共ZoomImageView(上下文语境,AttributeSet attrs) {
超级(上下文,attrs);
currentStatus=STATUS_INIT;
}/* *
*将待展示的图片设置进来。
*
* @param位图
*待展示的位图对象
*/公共空间setImageBitmap(位图的位图){
sourceBitmap=位图;
无效();
}
@Override
保护空白>
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt; com.example.photowallfallsdemo。ZoomImageView xmlns: android=" http://schemas.android.com/apk/res/android "
android: id=癅 + id/zoom_image_view”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android:背景=" # 000000 "比;
& lt;/com.example.photowallfallsdemo.ZoomImageView>
之前
接着创建一个活动,在这个活动中来加载image_details布局。新建ImageDetailsActivity,代码如下所示:
公开课ImageDetailsActivity延伸活动{
私人ZoomImageView ZoomImageView;
@Override
保护空白>
私人空间addImage(位图的位图,int imageWidth int imageHeight) {
LinearLayout。LayoutParams params=new LinearLayout.LayoutParams (imageWidth
imageHeight);
如果(mImageView !=null) {
mImageView.setImageBitmap(位图);
其他}{
ImageView ImageView=new ImageView (getContext ());
imageView.setLayoutParams (params);
imageView.setImageBitmap(位图);
imageView.setScaleType (ScaleType.FIT_XY);
imageView。setPadding (5 5 5 5);
imageView.setTag (R.string。image_url mImageUrl);
imageView.setOnClickListener (new>
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;清单xmlns: android=" http://schemas.android.com/apk/res/android "
包=" com.example.photowallfallsdemo "
android: versionCode=" 1 "
android: versionName=" 1.0 "比;
& lt; uses-sdk
android: minSdkVersion=" 14 "
android: targetSdkVersion=?7”/比;
& lt; uses-permission android: name=" android.permission。WRITE_EXTERNAL_STORAGE”/比;
& lt; uses-permission android: name=" android.permission。互联网”/比;
& lt;应用程序
android: allowBackup=" true "
android:图标=" @drawable/ic_launcher”
android: label=" @string/app_name”
android:主题=癅style/AppTheme”比;
& lt;活动
android: name=" com.example.photowallfallsdemo.MainActivity "
android: label=" @string/app_name”比;
& lt; intent-filter>
& lt;行动android: name=" android.intent.action.MAIN "/比;
& lt;类别android: name=" android.intent.category.LAUNCHER "/比;
& lt;/intent-filter>
& lt;/activity>
& lt;活动android: name=" com.example.photowallfallsdemo。祝辞ImageDetailsActivity”;
& lt;/activity>
& lt;/application>
& lt;/manifest>
