需求:界面部分區域展示全景圖片,支持拖拽,支持陀螺儀。
效果:如下圖
實現步驟:
一 、工具
① GLKViewController
② PanoramaView
選擇哪種實現方式可參考這篇文章http://www.cnblogs.com/mawenqiangios/p/5884373.html
二、思路
①GLKViewController是iOS對OpenGL提供了簡單的封裝。GLKViewController的根視圖是GLKView。就像UITableViewController的根視圖是UITableView一樣。我們知道在使用UITableViewController的時候主要是實現<UITableViewDelegate, UITableViewDataSource>,同理,GLKViewController的實現也依靠GLKView的代理方法----GLKViewDelegate。
② PanoramaView繼承自GLKView。那么我們要怎樣結合GLKViewController和PanoramaView呢?直接替換根視圖。
三、實現
①自定義控制器類繼承自GLKViewController
②初始化PanoramaView
// 設置要展現的視圖的大小
panoramaView = [[PanoramaView alloc]initWithFrame:CGRectMake(0, 0, kWidth, (kHeight-49)/2)];
// 設置全景圖片
[panoramaView setImage:image];
// 是否開啟陀螺儀
[panoramaView setOrientToDevice:YES];
// 手指拖拽
[panoramaView setTouchToPan:YES];
[panoramaView setPinchToZoom:YES];
// 手指觸控點經緯交叉點(十字交叉線)
[panoramaView setShowTouches:NO];
// 設置VR模式
[panoramaView setVRMode:NO];
③直接實現代理
有的人可能疑惑為什么不先遵守GLKViewDelegate?你見過UITableViewController手寫遵守UITableViewDelegate?
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
// panoramaView中的繪制方法
[panoramaView draw];
}
④提取方法。我們要在實現文章開頭說明的需求,那么就要開放設置全景圖片image的方法
@interface GLKVC : GLKViewController
- (void)setTitlePanoramaView:(UIImage *)image;
@end
- (void)setTitlePanoramaView:(UIImage *)image{
// 設置要展現的視圖的大小
panoramaView = [[PanoramaView alloc]initWithFrame:CGRectMake(0, 0, kWidth, (kHeight-49)/2)];
// 設置全景圖片
[panoramaView setImage:image];
// 是否開啟陀螺儀
[panoramaView setOrientToDevice:YES];
// 手指拖拽
[panoramaView setTouchToPan:YES];
[panoramaView setPinchToZoom:YES];
// 手指觸控點經緯交叉點(十字交叉線)
[panoramaView setShowTouches:NO];
// 設置VR模式
[panoramaView setVRMode:NO];
// 替換根視圖
[self setView:panoramaView];
}
⑤最終實現
將這個全景視圖設置未tableview的頭視圖。
GLKVC *vc = [[GLKVC alloc]init];
[vc setTitlePanoramaView:img];
self.listView.tableHeaderView = vc.view;
// 使用GLKViewController的GLKView
[self addChildViewController:vc];
[vc didMoveToParentViewController:self];
vc.view.frame = CGRectMake(0, 0, kWidth, (kHeight-49)/2);
在實現這一步時GLKVC的根視圖不能顯示在我要實現的控制器視圖上,最終在這個http://stackoverflow.com/questions/12100689/using-glkview-with-a-uiviewcontroller 找到方法
四、總結
需求不易,且行且珍惜。