请问这个界面是怎么实现的?类似于QQ的账号登陆

iOS 码拜 7年前 (2015-05-01) 681次浏览 0个评论
 

如图所示,在主界面手指往右面滑动:
请问这个界面是怎么实现的?类似于QQ的账号登陆

请问这个界面是怎么实现的?类似于QQ的账号登陆
往右拉出来的是一个DrawerLayout,上面在放按钮,按钮关联QQ登录的授权。
请问这个界面是怎么实现的?类似于QQ的账号登陆
抽屉效果的组件其实是一个自定义的ViewController的容器控件。 我们一般看到的可以向左滑向右滑显示不同的控制器,像这种在设计时默认包含三个控制器,leftViewController, centerViewController, rightViewcontroller 。在容器控制器内开放一些交互的行为。类似的第三方组件有不少,可以参见:https://github.com/JVillella/JVFloatingDrawer
请问这个界面是怎么实现的?类似于QQ的账号登陆
引用 2 楼 zhanglei5415 的回复:

抽屉效果的组件其实是一个自定义的ViewController的容器控件。 我们一般看到的可以向左滑向右滑显示不同的控制器,像这种在设计时默认包含三个控制器,leftViewController, centerViewController, rightViewcontroller 。在容器控制器内开放一些交互的行为。类似的第三方组件有不少,可以参见:https://github.com/JVillella/JVFloatingDrawer

请问一下版主,能不能详细的说一下它们的原理

请问这个界面是怎么实现的?类似于QQ的账号登陆
引用 3 楼 lluoyulin 的回复:
Quote: 引用 2 楼 zhanglei5415 的回复:

抽屉效果的组件其实是一个自定义的ViewController的容器控件。 我们一般看到的可以向左滑向右滑显示不同的控制器,像这种在设计时默认包含三个控制器,leftViewController, centerViewController, rightViewcontroller 。在容器控制器内开放一些交互的行为。类似的第三方组件有不少,可以参见:https://github.com/JVillella/JVFloatingDrawer

请问一下版主,能不能详细的说一下它们的原理

设计一个抽屉组件时,首先我们要了解抽屉实现的需求。如需要可以左滑显示右侧的,可以右滑显示左侧的,默认显示中间的。左侧与右侧的是如何与中间的进行交互的? 跟着这些需求,你可以定义出你这个组件需要对外公开的属性与行为。
组件可能涉及到的知识点:
1, 作为一个容器控制器,需要管理(添加,替换)各子控制器。 可以使用addChildViewController:添加一个子控制器并建立控制器之间的父子关系
2, 手势。我们需要中间的控制器可以响应我们的左右滑手势。配合动画效果实现视图间的交互。 
3,动画。 如果需要实现不同的动画效果,就需要抽象动画的行为。

请问这个界面是怎么实现的?类似于QQ的账号登陆
100分
它这个抽屉有些不一样,你截的图里面显示不是在主界面,这种情况下有两种实现:
首先手势不一定要用PanGesture,因为它在页面的任何位置下都有可能触发,这不好,你应该用UIScreenEdgePanGestureRecognizer(检测屏幕边缘的手势),而且手势可以有两个被添加的地方:
1. 加在KeyWindow上,因为如果你加在主Controller上(rootViewController),如UINavigationController、UITabBarController,识别手势后,你移动的是NavigationController的view,或者是TabBarController的view,这样一来,当你抽屉已经出来,再想响应手势的区域会变小,如果加在Window上,你只用插入一个LeftController(controller本身被add到rootViewController上,controller.view被add到window上)就行了,层次结构与主Controller的平级的。
2. 加在rootViewController上,但是rootController不用UINavigationController或UITabBarController,用自定义的包装Controller,在设计上可以加两个属性:leftController、contentController,contentController当主界面来用,leftController当抽屉,两者平级并且插入到自定义的Controller的view上。

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明请问这个界面是怎么实现的?类似于QQ的账号登陆
喜欢 (0)
[1034331897@qq.com]
分享 (0)

文章评论已关闭!