关于ios抽屉式导航的一些研究

编者按(推荐):
每个时期总有那么一些人做出一些很炫的应用,而这些应用总会被人们争相模仿,抽屉式导航,往小了说它只是应用的一种操作方式而已,往大了说它现在已经开辟了应用的一个新方向,在我看来,抽屉式效果之所以流行开来,是因为用户体验感强,它不再是由过去传统的按钮触控,它所带来的是用户操控感更强更流畅,所以说,不仅是现在,可能在将来还能引起ios界的抽屉风格浪潮,小编也是初入ios界,以上言论也是个人拙见,如您认同,不甚荣幸.如不认同,您也只当看个笑话.

今天也是初探抽屉式导航,拿来与各位小伙伴分享,供大家交流.
首先

话不多说, 请看效果图.

                                     
                                     (customView的视图)                                                                                                    (imageleft)

感觉怎么样,可能初学者会和我一样不知到先做哪,没关系,思考一下你可能就会有了自己的框架思路,为了使读者花最少的时间学到知识,在这里我先简化了截图中的内容.什么意思呢?读者可以想象一下,上述界面只是由两张图片构成了.哈哈哈,是不是顿时觉得好简单呢?的确,就单从实现思路上来说抽屉式导航并不难,但是在这里小编要提醒读者,抽屉式导航是个细活儿,可能一个很小的技术点,就会让你做出的东西非常难看.在这里小编会带大家一下攻克这些细微的技术点,现在让我们一起来学习吧,lets go!!!

其次:
第一步:大体思路解析
正如我们看到的,细心的读者可能会发现,我在每张图片下面都注释了,没错.我们整个工程只需要一个视图控制器,一个UIView和一个UIImageView,我们把两个view都添加到我们的视图控制器中,然后我们通过操控最上层的view是不是就可以实现我们我们想要达到的效果呢?如果你是这样想的,那么恭喜你,你的思路是对的,这里还有其他方法,小编就不一一阐述.

第二步:具体实现
请大家仔细看,否则你的效果可能会不一样
我们需要新建一个视图控制器
1.先添加一个imageView(imageleft图)到视图控制器上
2.再添加一个view(customView图) 到视图控制器上(小编温馨提示:1,2步骤不可颠倒,基本常识小编不在赘述).
3.做完了这些,真正考验你的来了,读者不禁会问,我们到底滑不滑了?呵呵,我们等下再滑.我们转到我们新建的customview上,我们自定义一个初始化方法
(- (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview)
这个方法作用在于程序在加载视图控制器的时候,cunstomview会初始化传入两个视图;这样我们在实现的时候方便我们操控视图.这个初始化的方法很重要,因为程序在加载视图控制器的时候cunstomView初始化必须传入两个视图,并在最上层的视图上添加拖动手势和点击手势.

再次:
攻克细节和难点.
拖动手势:
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
点击手势
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
注意添加到相应的view上.
我们需要获取手指在屏幕拖动的距离,以此来控制视图.系统为我们提供了这些:
CGPoint translation = [recognizer translationInView:self];
NSLog(@"translation x:%f",translation.x);
这个方法什么意思呢?小编的理解是在view上面挪动的距离,大家可以去查阅相关的资料.但是有一点必须清楚它的原理.就这样我们现在控制台打印一下,加深一下理解.
在这里小编用的是ios6.0 3.5inch的模拟器哦,在拖动方法实现时,我们需要判断一下先定义一个float x,这个x用来判断和最后定位当前view的坐标,如下
float x = self.center.x + translation.x;
NSLog(@"x=%f",x);
打印出来你一定明白了,接着
if (x < 160) {
x = 160;
}
self.center = CGPointMake(x, 230);
结合上一行代码意思就是说,如果拖动距离为0的话视中心点坐标不做改变.
当前视图中心坐标最大为380.当拖动最大值的时候是不是就是我们看到的抽屉了,哈哈,还没完,这个效果体验不太好,我们需要完善.当手势结束时我们需要添加一个动画.
if (recognizer.state == UIGestureRecognizerStateEnded) {
[UIView animateWithDuration:0.75 delay:0.01 options:UIViewAnimationCurveEaseInOut animations:^{
//x>380-70
if (x > openPointCenter.x - 70.0) {
self.center = openPointCenter;
}else{
self.center = CGPointMake(openPointCenter.x - 220.0, 230);
}
} completion:^(BOOL finished) {

}];
}
这个openPointCenter.x大家可以理解为380.这个动画有两个判断条件,如果x大于380,就把当前视图中心坐标置于380.其他的都归于原位.

最后:
我们需要在侧滑视图上添加一个点击事件,增加用户体验.
//添加一个点击手势到customView上
-(void)handleTap:(UITapGestureRecognizer *)recognizer
{
if (self.center.x == openPointCenter.x) {
[UIView animateWithDuration:0.75 delay:0.01 options:UIViewAnimationCurveEaseInOut animations:^{
self.center = CGPointMake(openPointCenter.x - 220.0, 230);
} completion:^(BOOL finished) {

}];
}
}
当cunstomView置于最右边的时候,我们动画事件就启动并把customView至于视图中心.

本博是小编第一篇博客,小编尽量讲的详细,奈何能力有限,上述不足之处,还望各位读者积极斧正.

代码下载处:http://download.csdn.net/detail/u010869099/7939055