一 功能图和实现思路

具体功能图:

实现思路:

—-> 1 关注控制器模块搭建(xib)

—-> 2 登录和注册界面的总体模块数量(三个模块),可以用三个view来装各自的子控件

—-> 2.2 先做上面的view—>中间的view—>底部的view(顺序自定)

—-> 2.3 创建两个xib,用同一个类来管理两个xib

—-> 2.4 将中间的view的宽度改为屏幕的两倍

—-> 2.5 用拖线的方式修改约束,达到app的整体效果

二 关注控制器模块搭建

1 由整体的app效果图可以看出,直接采用xib的方式来布局

—-> 1.1 具体创建的文件

—-> 1.2 xib中在控制器中所有的子控件都处于控制器的中心

2 关注控制器的业务逻辑

—-> 2.1 通过拖线的方式,监听立即登录按钮的点击

—-> 2.2 点击完后登录和注册的控制器出现的方式是modal出来的

—-> 2.3 具体代码

- (IBAction)loginRegister
{//创建控制器XFJLoginRegisterViewController *loginRegisterVC = [[XFJLoginRegisterViewController alloc] init];loginRegisterVC.view.backgroundColor = [UIColor redColor];[self presentViewController:loginRegisterVC animated:YES completion:nil];
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

三 退出和注册(登录)

1 创建xib来加载登录和注册部分

2 创建一个登录和注册控制器来管理逻辑部分

文件图片:

3 顶部两个按钮的设置

—-> 3.1 思路: 通过顶部控制器中添加一个view的方式来装”x”和”注册账号”两个按钮,在xib中设置个子控件的状态

—-> 3.2 “x”的业务逻辑,通过连线的方式,实现对modal出来的控制器返回

代码部分:

- (IBAction)backBtnClick
{[self dismissViewControllerAnimated:YES completion:nil];
}

• 1
• 2
• 3
• 4

—-> 3.3 由于注册账号和已有账号也有业务逻辑,这里我们放到后面讲

四 注册与登录

1 创建文件

2 在xib中约束好子控件的位置,然后在该类里面创建一个同样大小的xib,将登录模块中的”忘记密码”去掉,用同一个类来管理两个xib

—-> 2.1 提供两个快速加载xib的类方法

代码:

/***  快速加载xib**  @return 返回一个登录的xib*/
+ (instancetype)loginView;
/***  快速加载xib**  @return 返回一个注册的xib*/
+ (instancetype)registerView;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

实现:

#pragma mark - 提供快速加载xib的类方法
#pragma mark - login(登录)
+ (instancetype)loginView
{return [[[NSBundle mainBundle] loadNibNamed:@"XFJloginRegisterView" owner:nil options:nil] firstObject];
}
#pragma mark - registerView(注册)
+ (instancetype)registerView
{return [[[NSBundle mainBundle] loadNibNamed:@"XFJloginRegisterView" owner:nil options:nil] lastObject];
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

—-> 2.2 对登录和注册两个按钮的背景图片的拉伸做处理

#pragma mark - 设置图片为未被拉伸的样式
- (void)awakeFromNib
{//不要调用super
//    [super awakeFromNib];//获取到当前按钮的背景图片UIImage *image = self.loginRegisterView.currentBackgroundImage;//设置拉伸的范围image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];//将拉伸的图片赋值回去[self.loginRegisterView setBackgroundImage:image forState:UIControlStateNormal];//获取当前按钮的背景图片UIImage *image1 = self.loginBtnClick.currentBackgroundImage;//设置拉伸范围image1 = [image1 stretchableImageWithLeftCapWidth:image1.size.width * 0.5 topCapHeight:image1.size.height * 0.5];//将拉伸的图片赋值回去[self.loginBtnClick setBackgroundImage:image1 forState:UIControlStateNormal];
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

五 快速登录模块

1 需要创建的文件

2 布局好的xib显示图

3 加载xib(我这里也提供一个快速加载的类方法)

+ (instancetype)fastBtnClick
{return [[[NSBundle mainBundle] loadNibNamed:@"XFJFaseView" owner:nil options:nil] firstObject];
}

• 1
• 2
• 3
• 4

六 简单业务逻辑

1 将各个模块分别加入到对应的装xib的view中

#pragma mark - 添加中间的view
- (void)setUpMiddleView
{//创建登录对象XFJloginRegisterView *loginView = [XFJloginRegisterView loginView];//加入到view中[self.middleView addSubview:loginView];//创建注册对象XFJloginRegisterView *registerView = [XFJloginRegisterView registerView];//加入到view中[self.middleView addSubview:registerView];//创建快速登录对象XFJFaseView *fast = [XFJFaseView fastBtnClick];//加入到view中[self.fastView addSubview:fast];
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

2 点击注册账号和已有账号能快速切换到对应的模块的原理:通过创建一个两倍于屏幕宽度的view来装登录和注册模块,让后将注册模块的x改为一个屏幕的宽度,通过拿到约束来控制对模块的切换.

各个模块尺寸的代码部分:

#pragma mark - 设置登录和注册的尺寸
- (void)viewDidLayoutSubviews
{//从middleView中取出第0个view---->登录XFJloginRegisterView *loginView = self.middleView.subviews[0];//设置尺寸loginView.frame = CGRectMake(0, 0, self.middleView.XFJ_Width * 0.5, self.middleView.XFJ_Height);//从midleView中取出第1个view--->注册XFJloginRegisterView *registerView = self.middleView.subviews[1];//设置尺寸registerView.frame = CGRectMake(self.middleView.XFJ_Width * 0.5, 0, self.middleView.XFJ_Width * 0.5, self.middleView.XFJ_Height);//从fastView中取出第0个view---->快速登录XFJFaseView *fastView = self.fastView.subviews[0];//设置尺寸fastView.frame = self.fastView.bounds;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

3 对注册账号和已有账号的监听(通过拖线)

—-> 代码部分一:(“x”按钮)

- (IBAction)backBtnClick
{[self dismissViewControllerAnimated:YES completion:nil];
}

• 1
• 2
• 3
• 4

—-> 代码部分二:(注册账号和已有账号)—->通过一个三目运算符来对约束的控制

- (IBAction)registerBtnClick:(UIButton *)button
{//点击后按钮状态button.selected = !button.selected;//修改宽度的约束self.widConstraint.constant = self.widConstraint.constant == 0 ? -XFJ_screenW : 0;//动画效果[UIView animateWithDuration:0.25 animations:^{[self.view layoutIfNeeded];}];
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

七 快速登录模块

1 问题一: 启动app的时候,快速登录模块中的按钮和文字摆放有问题,我们发现这种情况完全不满足需求.

不满足需求的快速登录的图片:

2 解决:自定义按钮;重写布局子控件的方法

代码部分:

#pragma mark - 重写按钮中的布局方法
- (void)layoutSubviews
{[super layoutSubviews];//修改按钮中图片的位置self.imageView.XFJ_centerX = self.XFJ_Width * 0.5;self.imageView.XFJ_Y = 0;//文字自适应[self.titleLabel sizeToFit];//修改标题的位置self.titleLabel.XFJ_centerX = self.XFJ_Width * 0.5;self.titleLabel.XFJ_Y = self.XFJ_Height - self.titleLabel.XFJ_Height;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

3 问题二:文字显示不出来(bug)

—-> 3.1 原因:label尺寸不够–> label跟文字一样

4 解决:自适应;让label的宽度和按钮的宽度一样

八 细节处理

1 问题:

1> 文本框的光标变成白色

2> 让占位文字颜色变成白色

2 处理方式:自定义文本

1> 创建的文件

3 监听文本—–> 在加载xib的方法中监听文本的改变

—-> 3.1 监听方式:addTarget

—-> 3.2 不用代理监听的原因:自己监听自己的改变,没有意义

代码部分:(注意代码书写的位置,是写在加载xib的方法中)

//监听文本开始编辑[self addTarget:self action:@selector(textChange) forControlEvents:UIControlEventEditingDidBegin];//监听文本结束[self addTarget:self action:@selector(textEnd) forControlEvents:UIControlEventEditingDidEnd];

• 1
• 2
• 3
• 4

​4 处理编辑文本的光标

代码:

self.tintColor = [UIColor whiteColor];

• 1

5 处理占位文字的颜色(三种方法)

—-> 5.1 用副文本(第一种:不推荐;代码量较多)

让文本的占位颜色在未开始编辑之前就有对应的颜色:(代码)

//让文本一开始就是这种颜色(第一种方法)NSMutableDictionary *dict = [NSMutableDictionary dictionary];dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor];self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];

• 1
• 2
• 3
• 4

开始改变的时候代码:

//创建可变字典,用来描述文字颜色(第一种)NSMutableDictionary *dict = [NSMutableDictionary dictionary];//用字典包装文字颜色dict[NSForegroundColorAttributeName] = [UIColor whiteColor];//修改颜色self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];

• 1
• 2
• 3
• 4
• 5
• 6

结束编辑时候代码:

NSMutableDictionary *dict = [NSMutableDictionary dictionary];dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor];self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];

• 1
• 2
• 3

—-> 5.2 苹果的私有属性placeholderLabel(第二种: 可以使用)

未编辑之间代码:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];labelText.textColor = [UIColor lightGrayColor];

• 1
• 2

开始编辑的代码:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];labelText.textColor = [UIColor whiteColor];

• 1
• 2

结束编辑的代码:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];labelText.textColor = [UIColor lightGrayColor];

• 1
• 2

—-> 5.3 我们是不是想通过直接用”.”然后传入一种颜色,就能直接设置呢.通过一行代码搞定(第三种: 推荐)

—-> ​5.3.1 分类(设置占位文字的颜色)—->提供两个方法

//set方法
- (void)setPlaceholderColor:(UIColor *)placeholderColor
{//判断,如果占位为空,那么就直接设置为空if (self.placeholder == nil) {self.placeholder = @" ";}//获取占位文字控件UILabel *placeholderLabel = [self valueForKey:@"placeholderLabel"];//拿到控件去设置颜色(外界传入需要设置的颜色)placeholderLabel.textColor = placeholderColor;}//get方法
- (UIColor *)placeholderColor
{return nil;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

—-> 5.3.2 调用代码(只用一行代码就可以搞定)

未编辑之前:

self.placeholderColor = [UIColor lightGrayColor];

• 1

开始编辑:

self.placeholderColor = [UIColor whiteColor];

• 1

结束编辑:

self.placeholderColor = [UIColor lightGrayColor];

• 1

九 注意

1 注意: 在开发中,如果碰见很多的view都有同样的功能,自定义view去管理所有的view

2 注意: 以后如果想知道一个类里面有哪些私有的属性,可以采取断点方式查看.

十 补充

1 如果一个控件从xib加载,需不需要固定尺寸?—-> 必须要

2 在viewDidLoad设置子控件位置,行不行?—-> 不行—>在viewDidLayoutSubViews中设置属性,因为需要让约束执行完毕的时候,才设置属性位置.

十一 总结

1 该部分业务逻辑不是多,目的是让我们熟练的掌握自动布局,对约束的理解和运用

2 以后写代码之前一定要明白:代码写到哪个地方?是整个程序只加载一次呢?还是每次都要加载?需要仔细的考虑好.

3 登录与注册的业务逻辑还没有完全的写完,后续我讲及时的更新,如果大家有什么意见问题,请给我留言.如果您阅读了我的博客,感觉写的还行,麻烦您持续关注我的官方博客,一定为你奉上最清晰的代码思路,谢谢!!!!

百思不得姐之立即登录注册模块(五)相关推荐

1. 如何设计登录注册模块

   大家好,我是来自IT修真院的一枚PM~~今天和大家来分享一下如何设计登录注册模块~ 一.为什么要做登录注册? 二.核心要素 三.业务闭环 四.将业务嵌入使用场景 五.用户体验需要打磨 六.更多功能 七 ...

2. Codeigniter 用户登录注册模块

   Codeigniter 用户登录注册模块 以下皆是基于Codeigniter + MySQL 一.要实现用户登录注册功能,首先就要和MySQL数据库连接,操作流程如下: CI中贯彻MVC模型,即Mod ...

3. 登录注册模块设计构思

   http://www.jianshu.com/p/9c92aa5b262b 在互联网世界,用户是一切,如果用户都只是匆匆过客那么很难在产品中形成固定的用户群,在用户行为统计上也很难形成有价值的数据,如 ...

4. 【编程新实务】Lab4 系统登录/注册模块(Android app)的开发

   目录 Github仓库 前言 展示 安卓前端 安卓后端 服务器后端 补充: 总结 Github仓库 客户端+服务端 客户端开发环境:Android studio(API 21) 服务端开发环境:IDE ...

5. php开发用户登录模块,使用CodeIgniter开发用户登录注册模块

   本文介绍使用CodeIgniter来开发一个用户登录和注册的小模块,有详细的数据库表和ci代码. 1.数据库设计 字段 类型 空 额外 索引 id int(10) 否 auto_increment p ...

6. Android客户端登录注册模块

   (项目地址:https://github.com/wlkdb/module_login-register) 先上图,各组件间的跳转关系如下: 程序的入口是Welcome Activity,展示欢迎界面 ...

7. 登录注册模块面试讲解思路

   我们使用的是shiro框架进行身份认证/登录,和单点登录系统 1. shiro自带登录过滤器,在拦截到用户未登录的情况下,会重定向到登录页面,不会去拦截登录请求和注册请求 2.如果用户没有帐号,那么他 ...

8. Android Studio初学者实例：SharedPreferences 登录/注册模块实现

   该实验是紧接上一期使用SP登录.记住密码的实验,主要实现是除了上次登陆以外,登录以后在主界面有一系列假数据,可以通过右上角进行排序选择,以下是实验效果: 示例:好友名排序效果 首先是登陆界面以及逻辑代 ...

9. 登录及注册模块设置与流程图

   登录及注册模块设置与流程图 原文地址:http://www.cocoachina.com/design/20170320/18918.html 一.登录/注册模块流程图 1.电商&O2O类产品 ...

最新文章

1. SpringMVC中的拦截器
2. python程序设计实验教程 翟萍 第五章答案_Python程序设计实验教程
3. 九宫格C语言递归程序,[置顶] C语言递归实现N宫格（九宫格）源码
4. 介绍一个修改 Visual Studio Code 侧边框颜色的扩展 Peacock
5. step 1 android-sdk-download
6. php 匹配关键字,php获取搜索引擎搜索关键词关键字的正则表达式实现方法
7. 获取传入element在Document中的name相同的elements中的顺序
8. 基于XML使用MyBatis
9. 从事Web前端开发，必须要知道的这些框架
10. java的equals什么作用_java当中equals函数的作用小结
11. 整洁数据 —tidytext（一）
12. python traceback报错_怎么屏蔽Python Traceback错误信息
13. 重建即单体，重建大师5.0发布 模方3.0单体化功能永久免费
14. （六省）蓝桥真题 奇妙的数字
15. Spotfire 表达式之逻辑函数
16. 用 PS 去除图片中文字的方法
17. 命令行里打 cd 简直是浪费生命
18. 【Nape教程】Nape刚体碰撞检测
19. 第3周课件-全网最详细的ORB-SLAM2精讲
20. 用全景管家免费下载720YUN全景图并制作效果预览

热门文章

1. 【windows配置】windows11家庭版添加本地安全策略（亲测有效）
2. 用python制作好玩的游戏_太好玩了！我用 Python 制作一款小游戏！
3. C++ Primer 13-15
4. 洛谷——P2067 Cytus-Holyknight
5. 2023 节假日 生成sql脚本 ORACLE
6. python拼图验证码_针对滑动拼图验证码的pythonselenium解法！
7. Excel统计QQ聊天记录条数
8. MATLAB图例变成一列变多列的方法
9. wordpress+HTML5游戏,轻松在wordpress上植入一个网页游戏
10. ENVI哨兵1号数据按照指定shp范围裁剪