http://marshal.easymorse.com/archives/3760
翻頁(yè)效果,類(lèi)似下面的樣子:
在電子書(shū)應(yīng)用中會(huì)很常見(jiàn)。這里需要兩個(gè)要點(diǎn):
- 翻頁(yè)動(dòng)畫(huà)
- 手勢(shì)上下輕掃(swipe)的處理
先說(shuō)一下輕掃(swipe)的實(shí)現(xiàn),可以參考 編寫(xiě)簡(jiǎn)單的手勢(shì)示例:Tap 了解手勢(shì)種類(lèi)。
在viewDidLoad方法中注冊(cè)了對(duì)上、下、左、右四個(gè)方向輕松的處理方法:
- (void)viewDidLoad {
UISwipeGestureRecognizer *recognizer;
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];
[recognizer setDirection:(UISwipeGestureRecognizerDirectionRight)];
[[self view] addGestureRecognizer:recognizer];
[recognizer release];
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];
[recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];
[[self view] addGestureRecognizer:recognizer];
[recognizer release];
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];
[recognizer setDirection:(UISwipeGestureRecognizerDirectionDown)];
[[self view] addGestureRecognizer:recognizer];
[recognizer release];
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];
[recognizer setDirection:(UISwipeGestureRecognizerDirectionLeft)];
[[self view] addGestureRecognizer:recognizer];
[recognizer release];
[super viewDidLoad];
可以看到,都是同一個(gè)方法,handleSwipeFrom。
在該方法中,再識(shí)別具體是哪個(gè)方向的輕掃手勢(shì),比如判斷是向下的輕掃:
-(void)handleSwipeFrom:(UISwipeGestureRecognizer *)recognizer {
NSLog(@"Swipe received.");
if (recognizer.direction==UISwipeGestureRecognizerDirectionDown) {
NSLog(@"swipe down");
判斷是向上的輕掃:
if (recognizer.direction==UISwipeGestureRecognizerDirectionUp) {
NSLog(@"swipe up");
有關(guān)動(dòng)畫(huà)的處理,比如向下(往回)翻頁(yè),類(lèi)似這樣:
[UIView beginAnimations:@"animationID" context:nil];
[UIView setAnimationDuration:0.7f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];[currentView removeFromSuperview];
[self.view addSubview:contentView];[UIView commitAnimations];
向上(向前)翻頁(yè),只需改為:
[UIView beginAnimations:@"animationID" context:nil];
[UIView setAnimationDuration:0.7f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:self.view cache:YES];[currentView removeFromSuperview];
[self.view addSubview:contentView];[UIView commitAnimations];
如果是電子書(shū),還需要考慮一個(gè)問(wèn)題,就是有多個(gè)頁(yè)面(圖形),比如50頁(yè)。那么需要有一個(gè)數(shù)據(jù)結(jié)構(gòu)來(lái)保存這些頁(yè)面的圖片路徑:
- objc數(shù)據(jù)結(jié)構(gòu),比如數(shù)組
- sqlite數(shù)據(jù)庫(kù)表
這樣,寫(xiě)一套翻頁(yè)代碼和加載什么圖形之間就可以解耦。
本文示例使用的是數(shù)組,類(lèi)似這樣:
pages=[[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",
nil];
圖片保存在resources下。
為了能讓上頁(yè)下頁(yè)翻頁(yè)的時(shí)候找到關(guān)聯(lián)的頁(yè)面,采用了如下機(jī)制:
- 將圖片封裝為UIImageView顯示
- 可以為UIImageView設(shè)置一個(gè)tag值,值為數(shù)組下標(biāo)+1
- 這樣,上級(jí)view有方法能根據(jù)tag查詢(xún)到UIImageView,比如:UIView *currentView=[self.view viewWithTag:currentTag];
- 設(shè)置一個(gè)成員變量currentTag保存當(dāng)前的tag值
比如這樣,當(dāng)應(yīng)用加載的時(shí)候顯示第一頁(yè):
currentTag=1;
NSString *path = [[NSBundle mainBundle] pathForResource:@"pageflip1" ofType:@"mp3"];
player=[[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:path] error:NULL];
//[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide];
UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]];
[contentView setUserInteractionEnabled:YES];
contentView.tag=currentTag;
在翻頁(yè)時(shí)的處理:
if (currentTag<[pages count]) {
UIView *currentView=[self.view viewWithTag:currentTag];
currentTag++;
UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]];
[contentView setUserInteractionEnabled:YES];
contentView.tag=currentTag;
[UIView beginAnimations:@"animationID" context:nil];
[UIView setAnimationDuration:0.7f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
[currentView removeFromSuperview];
[self.view addSubview:contentView];
[UIView commitAnimations];
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元

