效果图:
分析如下:
1.底部按钮View
(1. ) 三个按钮,先设置中间按钮
(2.) 将底部快速登录整体
高度200去掉
- 设置微博登录:图片、文字,上下都为0.
-
copy
微博登录,设置另两个按钮 - 设置三个按钮
等宽
、等高
- 设置三个按钮
top
对齐,qq
拖向微博
,新浪
拖向微博
- 设置
qq
左边为0,右边距离微博
为0;新浪
左边距离微博
为0 ,右边距离为0
自定义按钮
一般按钮文字和图片是如下显示:
自定义后如下图:
解决方法两种
第一种:取巧的话,可利用EdgeInset
第二种:自定义按钮
-(void)layoutSubviews
{
[super layoutSubviews];
// 图片中心点的位置
self.imageView.xmg_centerX = self.xmg_width * 0.5;
self.imageView.xmg_y = 0;
// 文字位置
[self.titleLabel sizeToFit];
self.titleLabel.xmg_centerX = self.xmg_width * 0.5;
self.titleLabel.xmg_y = self.xmg_height - self.titleLabel.xmg_height;
}
-
将按钮类名更换为自定义的按钮(三个都要更换)
2.顶部按钮(注意点 :关闭按钮的top
= 注册按钮的Center Vertically
)
拓展:
按钮的图片:image与backImage的区别
image:图片不会变形,但可点击范围会变大。
backImage:按钮有多大,图片就多大。
代码:
/**
* 监听关闭按钮
*/
- (IBAction)close {
[self dismissViewControllerAnimated:YES completion:nil];
}
当点击其他空白地方,也可关闭控制器----调用方法-(void)touchesBegan:
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self.view endEditing:YES];
}
3.中间登陆(注册)界面
注意:
- 中间的登录页面有可能会再次使用,也可能在其他项目中使用,可将其抽出来,封装到View里
- 注册界面和登录页面相近,所以在封装的View里,xib要描述2个View(登录和注册)
- 自定义UIView时,UIView不能在创建时就创建xib,自己在单独建xib,进行关联。
- 问题:一个view从xib中加载要不要固定尺寸?
答案:需要在外部用的时候在确认一下
相关问题:
1.光标靠左边太近
解决:将Constant+10或者-10(左右都设置)如下图:
2.添加后面的x号
Clear Button: is Always Visible
3.修改占位文字颜色
Placeholder :占位文字
Color :输入文字的颜色
其他可参考Jianshu
4.密码安全文本
Secure Text Entry
5. 聚焦时光标颜色的改变
现在光标颜色是蓝色
目的:聚焦时,光标颜色会变成亮白色,不聚焦时变成暗白色
参考:Jianshu
6.登录按钮图片拉伸变形
问题:边框变形了,是因为图片被拉伸了
解决:具体可参考Jianshu
7.登录边框圆角
参考Jianshu
4.注册界面
基本上和登录界面
相同,就复制一下登录界面
,修改一下就好。
5.监听是登录界面还是注册界面
判断左边的这条线的constant
备注:
(1)Constant :表示当前控件相对于SuperView的x/y的相对距离
(2)注意刷新UI,会调用[self.view layoutIfNeeded]
方法,这个方法的作用是:
- 强制刷新 : 让最新设置的约束值马上应用到UI控件上
- 会刷新到self.view内部的所有子控件
代码如下:(注意刷新UI)
// 注册或登录
- (IBAction)loginOrRegisterClick:(UIButton *)sender {
sender.selected = !sender.selected;
// 平移view
_leadLine.constant = _leadLine.constant ==0? -self.loginOrRegisterView.xmg_width * 0.5 : 0;
// 动画效果切换
[UIView animateWithDuration:0.4 animations:^{
[self.view layoutIfNeeded];
}];
}
自定义UIView的完整代码:
#import <UIKit/UIKit.h>
@interface BSLoginOrRegisterView : UIView
+ (instancetype)loginView;
+ (instancetype)registerView;
@end
#import "BSLoginOrRegisterView.h"
@implementation BSLoginOrRegisterView
+ (instancetype)loginView
{
return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] firstObject];
}
+ (instancetype)registerView
{
return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}
@end
在Controller中的使用
@interface BSLoginOrRegisterController ()
@property (weak, nonatomic) IBOutlet UIView *loginOrRegisterView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leadLine;
@property (weak, nonatomic) IBOutlet UIView *quicklyLoginView;
@end
@implementation BSLoginOrRegisterController
- (void)viewDidLoad {
[super viewDidLoad];
// 添加loginView
BSLoginOrRegisterView *loginView = [BSLoginOrRegisterView loginView];
[self.loginOrRegisterView addSubview:loginView];
// 添加registerView
BSLoginOrRegisterView *registerView = [BSLoginOrRegisterView registerView];
[self.loginOrRegisterView addSubview:registerView];
// 添加quicklyLoginView
BSQuicklyLoginView *quicklyLoginView = [BSQuicklyLoginView quicklyLoginView];
[self.quicklyLoginView addSubview:quicklyLoginView];
}
/**
* viewDidLayoutSubviews才会根据布局调整空间的尺寸
*/
-(void)viewDidLayoutSubviews
{
// 一定要调用super
[super viewDidLayoutSubviews];
// loginView的frame
BSLoginOrRegisterView *loginView = self.loginOrRegisterView.subviews[0];
loginView.frame = CGRectMake(0, 0, self.loginOrRegisterView.xmg_width * 0.5, self.loginOrRegisterView.xmg_height);
// registerView的frame
BSLoginOrRegisterView *registerView = self.loginOrRegisterView.subviews[1];
registerView.frame = CGRectMake(self.loginOrRegisterView.xmg_width * 0.5, 0, self.loginOrRegisterView.xmg_width * 0.5, self.loginOrRegisterView.xmg_height);
// quickluLoginView的frame
BSQuicklyLoginView *quicklyLoginView = self.quicklyLoginView.subviews[0];
quicklyLoginView.frame = CGRectMake(0, 0, self.quicklyLoginView.xmg_width, self.quicklyLoginView.xmg_height);
}
// 关闭
- (IBAction)closeClick:(id)sender {
[self dismissViewControllerAnimated:YES completion:nil];
}
// 注册或登录
- (IBAction)loginOrRegisterClick:(UIButton *)sender {
sender.selected = !sender.selected;
// 平移view
_leadLine.constant = _leadLine.constant ==0? -self.loginOrRegisterView.xmg_width * 0.5 : 0;
// 动画效果切换
[UIView animateWithDuration:0.4 animations:^{
[self.view layoutIfNeeded];
}];
}
可能出现问题:
问题1:注册页面
加载不出来或则只加载一半
原因1:设置登录页面
的trailing = view.trailing(登录页面
的宽度不能确定,只是相对的)
解决1:将这个约束删掉,设置登录页面
的宽度(width=view.width)
问题2:快速登录按钮,在点击时,文字出现移动现象
解决1:自定义按钮时,label赢先sizeToFit
,再改变x,y的值。