淺析在iPhone下實現(xiàn)UIScrollView圖片瀏覽器功能
iPhone下UIScrollView圖片瀏覽器是本文要介紹的內(nèi)容,今天看書中介紹了從圖片庫中調(diào)用圖片的例子,一時性起打算做一個簡單的圖片瀏覽器。
功能很簡單,從圖片庫中載入圖片,然后放到view下,并支持放大,縮小,平移。
由于對控件庫不了解,一開始的方案是這樣的:
前面的框架都一樣:
用toolbar做按鈕條,里面有個按鍵,觸發(fā)從按鍵。
按鍵action調(diào)用圖片庫,之后圖片庫發(fā)消息到delegate(我這里協(xié)議掛在了主UIViewController上面,后面其他的delegate也一樣)。
如果正確得到了圖片 UIImagePickerControllerDelegate的imagePickerController:didFinishPickingMediaWithInfo:的第二個參數(shù)可以得到一個包含選定圖片的Dictionary。
OK,演出開始了。后面的方案是這樣。
1、搞了個UIImageView作為圖片載體,撲滿整個屏幕,然后將Mode設(shè)置為Center,圖片設(shè)置后可以居中顯示。
然后利用UIPinchGestureRecognizer做手勢,手勢觸發(fā)后會回調(diào)響應(yīng)方法。在方法中設(shè)置UIImageView的bounds和center保證其居中顯示。過程中從網(wǎng)絡(luò)上搜索了一個擴(kuò)展UIImage的類型,可以進(jìn)行縮放圖片。源碼:(注意,這個函數(shù)由于用到了UIGraphicsXXXX函數(shù),要求只能再主線程中調(diào)用)
- //
- // UIImage_Extra.h
- // Camera
- //
- // Created by 李 擇一 on 11-4-22.
- // Copyright 2011 __MyCompanyName__. All rights reserved.
- //
- #import <Foundation/Foundation.h>
- @interface UIImage (Extra)
- - (UIImage*) imageByScalingAndCroppingForSize: (CGSize)targetSize;
- @end
- //
- // UIImage_Extra.m
- // Camera
- //
- // Created by 李 擇一 on 11-4-22.
- // Copyright 2011 __MyCompanyName__. All rights reserved.
- //
- #import "UIImage_Extra.h"
- @implementation UIImage (Extra)
- - (UIImage*)imageByScalingAndCroppingForSize: (CGSize)targetSize
- {
- UIImage *sourceImage = self;
- UIImage *newImage = nil;
- CGSize imageSize = sourceImage.size;
- CGFloat width = imageSize.width;
- CGFloat height = imageSize.height;
- CGFloat targetWidth = targetSize.width;
- CGFloat targetHeight = targetSize.height;
- CGFloat scaleFactor = 0.0;
- CGFloat scaledWidth = targetWidth;
- CGFloat scaledHeight = targetHeight;
- CGPoint thumbnailPoint = CGPointMake(0.0,0.0);
- if (CGSizeEqualToSize(imageSize, targetSize) == NO)
- {
- CGFloat widthFactor = targetWidth / width;
- CGFloat heightFactor = targetHeight / height;
- if (widthFactor > heightFactor)
- scaleFactor = widthFactor; // scale to fit height
- else
- scaleFactor = heightFactor; // scale to fit width
- scaledWidth = width * scaleFactor;
- scaledHeight = height * scaleFactor;
- // center the image
- if (widthFactor > heightFactor)
- {
- thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
- }
- else
- if (widthFactor < heightFactor)
- {
- thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
- }
- }
- UIGraphicsBeginImageContext(targetSize); // this will crop
- CGRect thumbnailRect = CGRectZero;
- thumbnailRect.origin = thumbnailPoint;
- thumbnailRect.size.width = scaledWidth;
- thumbnailRect.size.height = scaledHeight;
- [sourceImage drawInRect:thumbnailRect];
- newImage = UIGraphicsGetImageFromCurrentImageContext();
- if(newImage == nil)
- NSLog(@"could not scale image");
- //pop the context to get back to the default
- UIGraphicsEndImageContext();
- return newImage;
- }
- @end
再往下做平移的時候出現(xiàn)了問題,雖然可以重載touchesBegan和touchesMove移動UIImageView,可是就失去了iOS特效了,并且當(dāng)圖片移到屏幕邊緣再進(jìn)行放大,縮小,UIImageView就不一定飛到那里去了,還需要繼續(xù)增加判斷條件。所以此方法不可取。
現(xiàn)在發(fā)現(xiàn)了新的api可以解決拉伸的問題。在UIImage 中有個函數(shù)叫stretchableImageWithLeftCapWidth:topCapHeight:的,可以返回一個新的UIImage,這個UIImage是可以拉伸的。具體用法請參閱apple的Sample Code.
2、到網(wǎng)上查了可以利用UIScrollView做平移處理,在其中嵌入一個UIImageView,手勢用來管理圖片放大縮小,這樣就可以一邊吃火鍋,一邊唱歌了。
這個方案要考慮的事情有幾個,一個是UIScrollView的contentSize的要考慮UIImageView的大小,在放大或者縮小圖片以后要調(diào)整contentSize的大小。
還有一個就是在縮放的時候要考慮到,縮放的中心位置問題。比如,現(xiàn)在圖片上有個人臉,然后手勢是以人臉鼻子為中心放大的,在放大結(jié)束后,可能手勢的中心就跑偏了,因此要在縮放時修改UIImageView的center,這個計算還是挺復(fù)雜的。
3、為了解決這個問題繼續(xù)搜索文檔,發(fā)現(xiàn)在UIScrollView里面有zoom這個東東,可以通過delegate的viewForZoomingInScrollView:方法指定UIScrollView中的某個view放大,還可以設(shè)定放大的最大倍數(shù)和最小倍數(shù)。這個nb了,一個UIScrollView類全都搞定了平移縮放??岚。?!
但是這個也有要注意的問題。由于UIScrollView里面可能要主動調(diào)用他所包含subView的屬性,因此在縮放過程中,不要修改subview的屬性。
另外,縮放平移全都人家搞了,在給UIImageView中換圖片之前一定要注意先將UIScrollView的zoomScale,contentSize,contentOffset全都設(shè)置成初始值。設(shè)想這樣一個情況,在UIScrollView里面將圖片放大,contentSize,contentOffset,zoomScale全變了,而你這時候找了個特小的圖片放進(jìn)來,如果不設(shè)置那三個屬性的初值,或者只設(shè)置了一個,這樣必然會造成混亂。
三種方法里還是第三種最簡單啊。
總結(jié):我忘了那本書里面說過,Apple公司為在Mac上面的工作做了20年,如果你需要用很多代碼實現(xiàn)一個很簡單的功能,肯定是方法不對。
今天的探索印證了這句話。還有,現(xiàn)在市面上所有的iOS開發(fā)書籍里都沒有原理層面的講解開發(fā)的。所以搜索引擎,加上瀏覽各種網(wǎng)站論壇成為解決問題的快捷途徑。
小結(jié):淺析在iPhone下實現(xiàn)ScrollView圖片瀏覽器功能的內(nèi)容介紹完了,希望本文對你有所幫助。