Reader开发(二)增加PDF阅读功能
最近任务很多很忙,所以更新博客的速度很慢。
大概上周就为Reader加了一个PDF阅读的功能,但是一直没时间写上来。昨晚找一下文件发现扩展了功能的Demo居然在文件目录下看不到任何文件,但是却显示有文件大小,而且删除的时候还显示已锁定,应该不是文件被隐藏了的问题。没有办法之下,今天下午又重新把该功能在原来未修改过的Demo上写了回来,又花了一些时间。文件备份太重要了。
PDF文件和RTF,TXT这些格式的文件不同,这种文件中显示出的是图像而不是单纯的文字(就我肤浅的看法来看),这样Text Kit这个强大的文字处理引擎似乎就派不上用场了,不过可以使用官方给出的CGPDFDocumentRef和CGPDFPageRef类以及UIView的drawRect:方法来创建PDF文件和呈现PDF视图。
跟着之前Reader开发的思路,由于PDF的阅读视图是draw出来的,而RTF和TXT的阅读视图是直接使用AttributedString的,两者思路完全不同,如果将其阅读视图塞进一个ViewController中似乎会显得很乱,所以我新建了一个PDFViewController和一个PDFView类来专门管理PDF文件的阅读。
首先是在BookList表格中如果选中了PDF文件,那么跳转的目的视图控制器不是之前的ReadingViewController,而是新的PDFViewController,代码如下:
else if (indexPath.section == 2) { // pdf name = sPdfArray_[indexPath.row]; PDFViewController *pdfVC = [[PDFViewController alloc] initWithPDFName:name]; [self.navigationController pushViewController:pdfVC animated:YES]; return; }
在这里使用导航控制器push了一个PDFViewController进栈,而不是present视图控制器了。
首先给出PDFViewController的接口部分,了解一下PDFViewController的成员结构:
#import <UIKit/UIKit.h> #import "PDFView.h" @interface PDFViewController : UIViewController @property (strong, nonatomic) PDFView *curView; // 当前PDF页面视图 @property (strong, nonatomic) PDFView *addView; // 新的PDF页面视图 @property (strong, nonatomic) PDFView *backView; // 用于制造翻页效果的视图 @property (strong, nonatomic) UIScrollView *scrollView; // 滚动视图,用于显示完整的PDF页面 @property (retain, nonatomic) CAGradientLayer *shadow; // 用于制造阴影效果的Layer @property (retain, nonatomic) CAGradientLayer *margin; // 用于制造页边效果的Layer -(id)initWithPDFName:(NSString *)name; // 通过PDF文件名初始化 @end
以及匿名接口部分,里面包括一些私有的成员:
@interface PDFViewController () { BOOL next_; // 是否翻向下一页 BOOL enlarged_; // pdf视图是否被放大 NSUInteger currentPage_; // 当前页号 NSUInteger totalPages_; // 总页数 CGFloat startX_; // 翻页手势起点的x值 CGFloat curoffset_; // 翻页手势的位移值 CGFloat minoffset_; // 翻页手势有效的最小位移值 CGRect pdfRect_; // 完整的PDF页面的框架矩形 CGRect fitRect_; // 适配后的PDF页面的框架矩形 CGPDFDocumentRef pdfRef_; // pdf文件 CGPDFPageRef pdfPage_; // pdf页面 } @property (strong, nonatomic) UITapGestureRecognizer *doubleTap_; // 双击手势,用于查看完整的PDF页面 @property (strong, nonatomic) UIView *viewForPDF; // self.view中用于放置pdf阅读视图的子视图 @end
来看看PDFViewController的初始化方法:
#pragma mark - #pragma mark Initialize /* 通过PDF文件名初始化 */ -(id)initWithPDFName:(NSString *)name { self = [super init]; if (self) { /* 根据pdf文件路径初始化pdf阅读视图 */ NSString *filePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:name]; // 获取PDF文件名的完整路径 NSLog(@"filePath = %@", filePath); // 例如:filePath = /Users/one/Library/Application Support/iPhone Simulator/7.0/Applications/5815AD09-13F2-4C77-9CAE-ADD399E85A5E/PDFReader_i7_Demo.app/CGPDFDocument.pdf pdfRef_ = [self createPDFFromExistFile:filePath]; // 创建pdf文件对象 pdfPage_ = CGPDFDocumentGetPage(pdfRef_, 1); // 创建pdf首页页面 currentPage_ = 1; // 页号,从1开始 } return self; } /* 根据文件路径创建pdf文件 */ - (CGPDFDocumentRef)createPDFFromExistFile:(NSString *)aFilePath { CFStringRef path; CFURLRef url; CGPDFDocumentRef document; path = CFStringCreateWithCString(NULL, [aFilePath UTF8String], kCFStringEncodingUTF8); url = CFURLCreateWithFileSystemPath(NULL, path, kCFURLPOSIXPathStyle, NO); CFRelease(path); document = CGPDFDocumentCreateWithURL(url); CFRelease(url); totalPages_ = CGPDFDocumentGetNumberOfPages(document); // 设置PDF文件总页数 NSLog(@"totalPages = %d", totalPages_); if (totalPages_ == 0) { // 创建出错处理 NSLog(@"Create Error"); return NULL; } return document; }
其中initWithPDFName:方法通过createPDFFromeExistFile:方法初始化了CGPDFDocumentRef类的对象。PDF文件对象的创建基本完成。
由于在阅读PDF阅读时要通过手势的移动来实现翻页,所以这里我沿用了之前的Touches in view的思路和框架,在PDFViewController的self.view中动态添加PDF阅读视图来实现阅读功能,那么就涉及到了PDFView类的使用,先看看初始化方法:
/* 初始化PDFView对象 */ - (id)initWithPDFRef:(CGPDFDocumentRef)pdfr { pdfRef = pdfr; pdfPage = CGPDFDocumentGetPage(pdfRef, 1); // 创建pdf首页页面 self.pageIndex = 1; // 要展示的页面号,从1开始 CGRect mediaRect = CGPDFPageGetBoxRect(pdfPage, kCGPDFMediaBox); self = [super initWithFrame:mediaRect]; return self; }
PDFView负责呈现PDF文件中的内容,PDFViewController负责控制PDFView的显示和布局。
注意PDFView是UIView类的子类,所以该类自带了一个drawRect:方法,要描绘出PDF的阅读内容,就必须要实现该方法:
/* drawRect:方法,每个UIView的自带方法 */ - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); // 获取当前的绘图上下文 [[UIColor whiteColor] set]; CGContextFillRect(context, rect); CGContextGetCTM(context); CGContextScaleCTM(context, 1, -1); CGContextTranslateCTM(context, 0, -rect.size.height); pdfPage = CGPDFDocumentGetPage(pdfRef, self.pageIndex); CGRect mediaRect = CGPDFPageGetBoxRect(pdfPage, kCGPDFCropBox); CGContextScaleCTM(context, rect.size.width / mediaRect.size.width, rect.size.height / mediaRect.size.height); CGContextTranslateCTM(context, -mediaRect.origin.x, -mediaRect.origin.y); CGContextDrawPDFPage(context, pdfPage); // 绘制当前页面 }
另外在翻页时PDFView的内容必须作出更新,可以使用setNeedsDisplay方法来实现,而该方法必须被PDFViewController调用,所以可以将其写成一个接口供其它类使用:
/* 更新视图,例如翻页的时候需要更新 */ - (void)reloadView { [self setNeedsDisplay]; }
接口部分:
@interface PDFView : UIView { CGPDFDocumentRef pdfRef; // pdf文件 CGPDFPageRef pdfPage; // pdf页面 } @property (assign, nonatomic) NSUInteger pageIndex; // 页面号 - (id)initWithPDFRef:(CGPDFDocumentRef)pdfr; - (void)reloadView; @end
完成PDFView的任务后,我们回到PDFViewController上来,首先当然是viewDidLoad:方法了:
- (void)viewDidLoad { [super viewDidLoad]; /* 初始化参数 */ minoffset_ = self.view.frame.size.width / 5.; enlarged_ = NO; // 初始的PDF视图的放大状态为NO /* 初始化视图 */ self.navigationItem.title = [NSString stringWithFormat:@"%d / %d", currentPage_, totalPages_]; curView = [[PDFView alloc] initWithPDFRef:pdfRef_]; addView = [[PDFView alloc] initWithPDFRef:pdfRef_]; backView = [[PDFView alloc] initWithPDFRef:pdfRef_]; backView.pageIndex = 0; scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds]; viewForPDF = [[UIView alloc] initWithFrame:CGRectMake(0., 60., self.view.frame.size.width, self.view.frame.size.height - 60.0)]; /* 设置PDF阅读视图的页面布局 */ CGFloat w = curView.frame.size.width; CGFloat h = curView.frame.size.height; pdfRect_ = curView.frame; CGFloat scale = h / w; // PDF原视图高度和宽度的比例 NSLog(@"w = %f", w); NSLog(@"h = %f", h); CGFloat href = self.view.frame.size.width * scale; // 经过页面适配后的高度 CGFloat yref = (self.view.frame.size.height - 60.0 - href) / 2.; // 经过页面适配后的原点y值 NSLog(@"href = %f", href); NSLog(@"yref = %f", yref); curView.frame = CGRectMake(0., yref, self.view.frame.size.width, href); // 设置适配后PDF视图的位置和大小 fitRect_ = curView.frame; // 保存适配后的框架矩形 [self.view addSubview:viewForPDF]; [viewForPDF addSubview:curView]; // 添加页面适配后的PDF视图 /* 为视图添加双击手势 */ doubleTap_ = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(enlargePDFPage:)]; doubleTap_.numberOfTapsRequired = 2; [self.view addGestureRecognizer:doubleTap_]; }
在这里说一下设置PDF阅读视图的页面布局这一段吧,由于PDFView的drawRect:方法没有draw出最适合页面的显示,所以看到如下显示:
也就是在没有UIScrollView来呈现PDFView的情况下,我们只能看到PDF页面的部分视图(放大后的),由于我对CGContextDraw这些方法真的一点都不熟悉,所以只能通过设置PDFView的frame来解决该问题了。
首先获取初始的PDFView的视图尺寸并将其保存起来:
CGFloat w = curView.frame.size.width; CGFloat h = curView.frame.size.height; pdfRect_ = curView.frame; 2013-09-13 18:02:34.210 Reader_i7_Demo[2257:a0b] w = 612.000000 2013-09-13 18:02:34.211 Reader_i7_Demo[2257:a0b] h = 792.000000
然后通过宽高比例进行适配并将其保存起来:
CGFloat scale = h / w; // PDF原视图高度和宽度的比例 NSLog(@"w = %f", w); NSLog(@"h = %f", h); CGFloat href = 320. * scale; // 经过页面适配后的高度 CGFloat yref = (510. - href) / 2.; // 经过页面适配后的原点y值 NSLog(@"href = %f", href); NSLog(@"yref = %f", yref); curView.frame = CGRectMake(0., yref, self.view.frame.size.width, href); // 设置适配后PDF视图的位置和大小 fitRect_ = curView.frame; // 保存适配后的框架矩形
来看看适配后的页面视图:
现在另一个问题来了,文字太小,看不到完整的pdf内容(以iPhone的尺寸来看),这个时候可以在视图中添加一个双击手势来显示完整的pdf内容:
/* 为视图添加双击手势 */ doubleTap_ = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(enlargePDFPage:)]; doubleTap_.numberOfTapsRequired = 2; [self.view addGestureRecognizer:doubleTap_];
看看响应的方法:
/* 双击手势的响应方法 */ -(void)enlargePDFPage:(id)sender { if (enlarged_ == NO) { // 如果PDF页面未被放大 [curView removeFromSuperview]; //首先移除当前PDF页面 [self.view addSubview:scrollView]; // 在self.view中添加scrollView [scrollView addSubview:curView]; // 在scrollView上重新添加curView curView.frame = pdfRect_; // 设置curView的框架为原始PDF视图的框架 scrollView.contentSize = pdfRect_.size; // 设置scrollView的内容尺寸 enlarged_ = YES; // 设置放大状态 self.navigationController.navigationBarHidden = YES; // 隐藏导航条 } else { // 如果PDF页面已经被放大 [scrollView removeFromSuperview]; // 移除scrollView和curView [viewForPDF addSubview:curView]; // 在viewForPDF子视图重新添加curView curView.frame = fitRect_; enlarged_ = NO; // 取消放大状态 self.navigationController.navigationBarHidden = NO; // 显示导航条 } }
这样一来,在双击视图后,就可以查看全屏状态下的pdf视图了:
在全屏状态下再次双击视图,又看到原来的PDFView了:
最后解决一下翻页的问题,这里我沿用了之前的方法:
#pragma mark - #pragma mark Touches in view -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { //记录手势起点的x值 UITouch *touch = [touches anyObject]; startX_ = [touch locationInView:self.view].x; } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { //将视图中已经存在的渐变或页边阴影去掉 if (shadow) { [shadow removeFromSuperlayer]; } if (margin) { [margin removeFromSuperlayer]; } //获取当前手势触点的x值 UITouch *touch = [touches anyObject]; float x = [touch locationInView:self.view].x; if (x - startX_ >= 0) { curoffset_ = x - startX_; } else { curoffset_ = startX_ - x; } // 设定翻转页面的矩形范围 CGRect rect = self.view.bounds; if (x >= 160) { rect.size.width = (320 / x - 1) * 160; rect.origin.x = x - rect.size.width; } else { rect.size.width = 320 - x; rect.origin.x = x - rect.size.width; } int tempX = rect.origin.x; //保存翻转页面起点的x值 backView.frame = rect; //rect用于设定翻页时左边页面的范围 rect = self.view.bounds; rect.size.width = x; // 判断手势并设定页面,制造翻页效果 if (x - startX_ > 0) { //向右划的手势,上一页 next_ = NO; if (currentPage_ == 1) { return; // 如果是第一页则不接受手势 } else { addView.frame = rect; addView.clipsToBounds = YES; addView.pageIndex = currentPage_ - 1; [addView reloadView]; [viewForPDF insertSubview:addView aboveSubview:curView]; [viewForPDF insertSubview:backView aboveSubview:addView]; } } else { //向左划的手势,下一页 next_ = YES; if (currentPage_ == totalPages_) { return; // 如果到达最后一页则不接受手势 } else { curView.frame = rect; addView.pageIndex = currentPage_ + 1; addView.frame = fitRect_; [addView reloadView]; [viewForPDF insertSubview:addView belowSubview:curView]; [viewForPDF insertSubview:backView aboveSubview:curView]; } } //设定翻页时backPage视图两边的渐变阴影效果 shadow = [[CAGradientLayer alloc] init]; shadow.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.1].CGColor, (id)[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.2].CGColor, (id)[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.1].CGColor, nil]; rect = self.view.bounds; rect.size.width = 50; rect.origin.x = x - 25; shadow.frame = rect; shadow.startPoint = CGPointMake(0.0, 0.5); shadow.endPoint = CGPointMake(1.0, 0.5); [self.view.layer addSublayer:shadow]; margin = [[CAGradientLayer alloc] init]; margin.colors = [NSArray arrayWithObjects: (id)[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.2].CGColor, (id)[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.3].CGColor, nil]; margin.frame = CGRectMake(tempX - 35, 0, 50, self.view.bounds.size.height); margin.startPoint = CGPointMake(0.0, 0.5); margin.endPoint = CGPointMake(1.0, 0.5); [self.view.layer addSublayer:margin]; } -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { // 如果是第一页并且翻向上一页 if (currentPage_ == 1) { if (next_ == NO) { return; } } // 如果是最后一页并且翻向下一页 if (currentPage_ == totalPages_) { if (next_ == YES) { UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"注意" message:@"已经到达最后一页" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil]; [av show]; return; } } if (curoffset_ < minoffset_) { curView.frame = fitRect_; curView.pageIndex = currentPage_ ; [curView reloadView]; [addView removeFromSuperview]; [backView removeFromSuperview]; //移除阴影效果 [shadow removeFromSuperlayer]; [margin removeFromSuperlayer]; return; } if (next_ == YES) { // 下一页 currentPage_++; NSLog(@"%d / %d", currentPage_, totalPages_); curView.frame = fitRect_; curView.pageIndex = currentPage_; [curView reloadView]; self.navigationItem.title = [NSString stringWithFormat:@"%d / %d", currentPage_, totalPages_]; } else { // 上一页 currentPage_--; NSLog(@"%d / %d", currentPage_, totalPages_); curView.frame = fitRect_; curView.pageIndex = currentPage_; [curView reloadView]; self.navigationItem.title = [NSString stringWithFormat:@"%d / %d", currentPage_, totalPages_]; } [addView removeFromSuperview]; [backView removeFromSuperview]; //移除阴影效果 [shadow removeFromSuperlayer]; [margin removeFromSuperlayer]; }
原理和Reader开发(一)中的翻页效果原理是一样的,最后还是上张程序运行的图:
至此,实现PDF阅读的基本功能已经实现,不需要考虑分页的问题,对于获取PDF上面的内容可能要用到Core Text,这样可能要用另一种思维来写,暂时到此为止吧,如果对于这方面有什么新想法我会继续改进并且更新博客的。
以上关于PDF文件阅读的代码参考了网上的一些文章,大家也可以参考一下:
http://blog.csdn.net/yiyaaixuexi/article/details/7645725
http://2015.iteye.com/blog/1333272
http://www.cnblogs.com/mainPage/archive/2010/10/22/1858666.html