登录界面轮子loginViewController

# 个人原创轮子,如需转载请注明出处。

受实习僧和今日头条的登录界面的启发,自己砸包拿图结合两者的亮点做了这个框架(来回变换颜色的背景和父视图的景深效果),同时加入了自己做项目的特点,整合了不同状态下的登录界面,满足不同情况下的需求。因为GIF较大,不方便嵌入,暂给一个静态图,详细效果请看GitHub:https://github.com/lly4155/loginViewController

亮点:

1、缓慢平移的背景图,给人一种渐变色变幻的视觉效果,纯色也能玩出高大上。

2、父视图的景深动画配合登录界面的卡片式弹出动画,让界面都动起来~

3、确认按钮的定制动画让登录注册也非常好玩。(用到了Google的Spinner动画)

4、应用logo的透明闪烁,结合不断变换的背景色,相互衬托,突出一个精致。(使用了Facebook的shimmer动画)

5、细节方面,使用XIB布局,高度已经制定好,避免了正常高度的键盘遮挡输入框问题,但5S屏幕较小,牺牲了下方label提示效果,5S之前的没有适配测试;采用大量圆角透明效果,让界面更加简洁。

6、做好了第三方登录的入口,只需要将自己相关的社会化组件方法填入即可。

----------------------------------------------------------分割线--------------------------------------

usage:

1、在需要登录功能的控制器中导入  #import "loginViewController.h"

2、在需要弹出登录界面的地方调用 [[loginViewController sharedLoginViewWithModel:你想显示的模式]showInWindowViewNeedAnimated:YES needSuperController:self];

3、大功告成,所有内部操作都不要外界关心,内部的逻辑大部分也写好了,例如手机号的正则检测,发送验证码的倒计时效果,不同状态下同一个textfield的键盘类型,输入文字是否加密,placeHolder,内容清除type等繁琐步骤都设置好了,如果有遗漏欢迎指出。

----------------------------------------------------------分割线--------------------------------------

补充:

1、登录视图采用单例模式,方便在任何地方唤出,也保证了出现时的动画流畅不卡顿,同时单例模式也防止了发送验证码的一个小问题,大部分登录界面在发送验证码后退出视图重进其按钮又被重置了,在这里会一直倒计时直至结束

2、使用本地沙盒保存了第一次登录成功后的账号,方便下次登录直接输入密码,如果还需要自动填充密码的话,可以自行设置。

3、因为模块功能的原因,内部很多需要与自己后台交互的地方需要根据自己的业务去做,我在需要自己写功能的地方给出了warning标注,可能也有不全的地方,还需自己体验,同时第三方的功能和第三方短信验证等业务,也需要自己去做响应修改调整,以及本地的个人信息存储。

4、因个人项目没有用到其他方式注册或登录,比如邮箱注册等,还会涉及到邮箱发确认邮件等功能,所以有需要的还是要自己做修改。

^. ^ 觉得好用就给个星星吧,哪里不好用也麻烦给我issue,欢迎大牛指点

----------------------------------------------------------v1.1更新--------------------------------------

主要修复了在第一次动画未执行完的时候退出视图,然后第二次唤出界面的时候,背景直接跳到最后结果,并且等待定时器倒计时结束后才继续平移的bug。

解决方案:我在viewdidappear中重置了背景视图的offset以及移动方向和重新生成定时器,确保每次出现都是最开始的样子,同时在返回到主视图的方法backToSuperVC中注销了定时器。

----------------------------------------------------------v1.2更新--------------------------------------

主要修复了在无网络或者网络较差的时候出现的崩溃,但是这些代码主要是网络拉取数据为空的时候崩溃,需要根据不同的业务来嵌入代码,在demo里我给出了需要加代码的warning标注。


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值