需求:界面部分区域展示全景图片,支持拖拽,支持陀螺仪。
效果:如下图
实现步骤:
一 、工具
① 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 找到方法
四、总结
需求不易,且行且珍惜。
网友评论