美文网首页
侧滑栏的实现

侧滑栏的实现

作者: 真的很菜 | 来源:发表于2017-06-02 13:54 被阅读0次
效果图

现在这些框架很多第三方资源,但是想自己写一个。侧滑实现比较简单,根据自己需求去扩展界面。

创建一个类MenuViewController作为Navigation的rootVC

新建一个UIView(MenuView)作为左侧漏出来的一部分,新建一个ContentViewController作为右侧可拖动的部分。将两个分别添加到MenuViewController上给ContentViewController的view加上拖拽的手势。

实现手势的事件方法,侧滑效果就完成了。

- (void)panGesture:(UIPanGestureRecognizer *)recognizer {

CGPoint point = [recognizer translationInView:self.contenViewController.view];

recognizer.view.center = CGPointMake(recognizer.view.center.x + point.x, recognizer.view.center.y);

CGFloat viewX = recognizer.view.frame.origin.x;

CGFloat viewY = recognizer.view.frame.origin.y;

if (viewX < 0) {

recognizer.view.frame = CGRectMake(0, viewY, recognizer.view.frame.size.width, recognizer.view.frame.size.height);

} else if (viewX >= self.view.frame.size.width * 0.8) {

recognizer.view.frame = CGRectMake(self.view.frame.size.width * 0.8, viewY, recognizer.view.frame.size.width, recognizer.view.frame.size.height);

} else {

recognizer.view.frame = CGRectMake(viewX + point.x, viewY, recognizer.view.frame.size.width, recognizer.view.frame.size.height);

}

if (recognizer.state == UIGestureRecognizerStateEnded) {

if (viewX < 120) {

[UIView animateWithDuration:0.5 animations:^{

recognizer.view.frame = CGRectMake(0, viewY, recognizer.view.frame.size.width, recognizer.view.frame.size.height);

}];

}

if (viewX > 120) {

[UIView animateWithDuration:0.5 animations:^{

recognizer.view.frame = CGRectMake(self.view.frame.size.width * 0.8, viewY, recognizer.view.frame.size.width, recognizer.view.frame.size.height);

}];

}

}

[recognizer setTranslation:CGPointZero inView:self.contenViewController.view];

}


demo下载

相关文章

  • 史上最简单的侧滑栏菜单

    对于侧滑栏,相信很多人都用过,下面我将用最简单的方法实现一下,侧滑栏菜单: 已经创建好了一个侧滑栏菜单,如图: 并...

  • DrawerNavigator嵌套stackNavigator嵌

    DrawerNavigator嵌套stackNavigator嵌套BottomTabNavigator,实现侧滑栏...

  • 侧滑栏的实现

    现在这些框架很多第三方资源,但是想自己写一个。侧滑实现比较简单,根据自己需求去扩展界面。 创建一个类MenuVie...

  • QQ音乐侧滑栏的实现

    对于现有的实现侧滑栏的方式,主要有两种,一种是将侧滑栏作为视图控制器,用视图控制器控制侧滑栏,这个网上有很多写好的...

  • Android侧滑栏的实现【高度撑满屏幕】

    使用ToolBar,DrawerLayout,NavigationView实现侧滑栏 如果不能使用DrawerLa...

  • Flutter drawer侧滑栏实现

    概述 侧滑栏对于大部分App来说都是经常用到的,接下来我们来一步步的实现flutter的侧滑栏效果。这里需要使用f...

  • 解决react native react-navigation

    一般情况下如果app中实现了侧滑菜单功能,产品需求基本上都会要求只在首页侧滑的时候才能唤出侧边栏菜单,其他界面侧滑...

  • ios导航栏-侧滑

    参考:iOS导航栏使用总结 一、实现侧滑 直接上代码即可 @interface BaseViewControlle...

  • 导航控制器切换效果

    自定义侧滑效果,侧滑返回时界面整体滑动。 相关文章: 【iOS】让我们一次性解决导航栏的所有问题 如何实现类似网易...

  • iOS 解决自定义导航栏不能侧滑返回

    iOS中,导航栏默认是可以侧滑,但是自定义导航之后,侧滑返回失效。 解决办法:在自定义导航栏中增加侧滑手势判断,代...

网友评论

      本文标题:侧滑栏的实现

      本文链接:https://www.haomeiwen.com/subject/vwzyfxtx.html