百思不得姐之立即登录注册模块(五)
来源:互联网 发布:永强集团淘宝店是什么 编辑:程序博客网 时间:2024/04/30 00:47
一 功能图和实现思路
具体功能图:
实现思路:
—-> 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 创建xib来加载登录和注册部分
2 创建一个登录和注册控制器来管理逻辑部分
文件图片:
3 顶部两个按钮的设置
—-> 3.1 思路: 通过顶部控制器中添加一个view的方式来装”x”和”注册账号”两个按钮,在xib中设置个子控件的状态
—-> 3.2 “x”的业务逻辑,通过连线的方式,实现对modal出来的控制器返回
代码部分:
- (IBAction)backBtnClick{ [self dismissViewControllerAnimated:YES completion:nil];}
—-> 3.3 由于注册账号和已有账号也有业务逻辑,这里我们放到后面讲
四 注册与登录
1 创建文件
2 在xib中约束好子控件的位置,然后在该类里面创建一个同样大小的xib,将登录模块中的”忘记密码”去掉,用同一个类来管理两个xib
—-> 2.1 提供两个快速加载xib的类方法
代码:
/** * 快速加载xib * * @return 返回一个登录的xib */+ (instancetype)loginView;/** * 快速加载xib * * @return 返回一个注册的xib */+ (instancetype)registerView;
实现:
#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];}
—-> 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 布局好的xib显示图
3 加载xib(我这里也提供一个快速加载的类方法)
+ (instancetype)fastBtnClick{ return [[[NSBundle mainBundle] loadNibNamed:@"XFJFaseView" owner:nil options:nil] firstObject];}
六 简单业务逻辑
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];}
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;}
3 对注册账号和已有账号的监听(通过拖线)
—-> 代码部分一:(“x”按钮)
- (IBAction)backBtnClick{ [self dismissViewControllerAnimated:YES completion:nil];}
—-> 代码部分二:(注册账号和已有账号)—->通过一个三目运算符来对约束的控制
- (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 问题一: 启动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;}
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];
4 处理编辑文本的光标
代码:
self.tintColor = [UIColor whiteColor];
5 处理占位文字的颜色(三种方法)
—-> 5.1 用副文本(第一种:不推荐;代码量较多)
让文本的占位颜色在未开始编辑之前就有对应的颜色:(代码)
//让文本一开始就是这种颜色(第一种方法) NSMutableDictionary *dict = [NSMutableDictionary dictionary]; dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor]; self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];
开始改变的时候代码:
//创建可变字典,用来描述文字颜色(第一种) NSMutableDictionary *dict = [NSMutableDictionary dictionary]; //用字典包装文字颜色 dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; //修改颜色 self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];
结束编辑时候代码:
NSMutableDictionary *dict = [NSMutableDictionary dictionary]; dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor]; self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];
—-> 5.2 苹果的私有属性placeholderLabel(第二种: 可以使用)
未编辑之间代码:
UILabel *labelText = [self valueForKey:@"placeholderLabel"]; labelText.textColor = [UIColor lightGrayColor];
开始编辑的代码:
UILabel *labelText = [self valueForKey:@"placeholderLabel"]; labelText.textColor = [UIColor whiteColor];
结束编辑的代码:
UILabel *labelText = [self valueForKey:@"placeholderLabel"]; labelText.textColor = [UIColor lightGrayColor];
—-> 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;}
—-> 5.3.2 调用代码(只用一行代码就可以搞定)
未编辑之前:
self.placeholderColor = [UIColor lightGrayColor];
开始编辑:
self.placeholderColor = [UIColor whiteColor];
结束编辑:
self.placeholderColor = [UIColor lightGrayColor];
九 注意
1 注意: 在开发中,如果碰见很多的view都有同样的功能,自定义view去管理所有的view
2 注意: 以后如果想知道一个类里面有哪些私有的属性,可以采取断点方式查看.
十 补充
1 如果一个控件从xib加载,需不需要固定尺寸?—-> 必须要
2 在viewDidLoad设置子控件位置,行不行?—-> 不行—>在viewDidLayoutSubViews中设置属性,因为需要让约束执行完毕的时候,才设置属性位置.
十一 总结
1 该部分业务逻辑不是多,目的是让我们熟练的掌握自动布局,对约束的理解和运用
2 以后写代码之前一定要明白:代码写到哪个地方?是整个程序只加载一次呢?还是每次都要加载?需要仔细的考虑好.
3 登录与注册的业务逻辑还没有完全的写完,后续我讲及时的更新,如果大家有什么意见问题,请给我留言.如果您阅读了我的博客,感觉写的还行,麻烦您持续关注我的官方博客,一定为你奉上最清晰的代码思路,谢谢!!!!
1 0
- 百思不得姐之立即登录注册模块(五)
- 百思不得姐之"我的"模块功能(六)
- 高仿 百思不得姐(实现段子(文字)发表 刷新显示 登录+注册 ) 客户端+sql+服务端
- 《百思不得姐》
- 百思不得姐
- 注册登录模块
- 系统登录注册模块
- 登录注册模块解决方案
- 网站注册登录模块
- 登录注册模块解决方案
- web学习之博客小项目(登录注册模块)
- 百思不得姐之广告界面(三)
- 百思不得姐之新帖(四)
- 精度解析百思不得姐流行框架之精华版
- 百思不得姐之自定义cell(八)
- 百思不得姐之图片处理(保存与下载)
- 微信小程序实战之百思不得姐精简版
- 微信小程序实战之百思不得姐精简版
- DEVICE_ATTR 详解
- LeetCode 254. Factor Combinations(因式分解)
- 第二十六课 实现线性表基本操作的函数 【项目1-4】
- (2011-05-11 旧博文搬家)简单MP3播放器
- (2011-05-12 旧博文搬家)BOX2D_坦克大战
- 百思不得姐之立即登录注册模块(五)
- (2011-09-24 旧博文搬家)自动声明舞台实例
- (2011-09-24 旧博客搬运)消消看
- (2011-12-11 旧博文搬运)创建Mysql过程与函数
- ClipDrawable制作图片渐进效果
- 关键词变红--正则表达式
- (2011-12-11 旧博文搬运)away3d太阳系DEMO
- 一些教训,或者叫做收获
- (2011-12-11 旧博文搬运)php的header语句