效果图：
8DC3F234-C0AA-4A9F-A939-C0300FF0E044.png
分析如下：
1.底部按钮View
4.png
(1. ) 三个按钮，先设置中间按钮
(2.) 将底部快速登录整体高度200去掉
- 设置微博登录：图片、文字，上下都为0.
-
copy微博登录,设置另两个按钮 - 设置三个按钮
等宽、等高 - 设置三个按钮
top对齐，qq拖向微博,新浪拖向微博 - 设置
qq左边为0，右边距离微博为0；新浪左边距离微博为0 ，右边距离为0
自定义按钮
一般按钮文字和图片是如下显示：
3F2591FC-F42E-4916-A02E-CCF8DCCC24AE.png
自定义后如下图：
C8C5AEB4-6FEA-42DE-AFCA-318A0BE18BB4.png
解决方法两种
第一种：取巧的话，可利用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;
}
-
将按钮类名更换为自定义的按钮（三个都要更换）
ADFB05B9-7D19-4CF6-B615-CABB21FC1D03.png
2.顶部按钮（注意点 ：关闭按钮的top = 注册按钮的Center Vertically）
2D65B462-A3DC-47EB-8F42-3F92397467AA.png
拓展：
按钮的图片：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.光标靠左边太近
ACB5045E-8E72-4282-B53F-2F9DC9CB63DE.png
解决：将Constant+10或者-10（左右都设置）如下图：
E4DF343B-EAF9-415D-BCB2-0F69855D3DC6.png
2.添加后面的x号
Clear Button： is Always Visible
3.修改占位文字颜色
Placeholder ：占位文字
Color ：输入文字的颜色
其他可参考Jianshu
2.png
4.密码安全文本
Secure Text Entry
5. 聚焦时光标颜色的改变
现在光标颜色是蓝色
目的：聚焦时，光标颜色会变成亮白色，不聚焦时变成暗白色
参考：Jianshu
6.登录按钮图片拉伸变形
问题：边框变形了，是因为图片被拉伸了
5.png
解决：具体可参考Jianshu
16.png
7.登录边框圆角
参考Jianshu
4.注册界面
1.png
基本上和登录界面 相同，就复制一下登录界面，修改一下就好。
5.监听是登录界面还是注册界面
判断左边的这条线的constant
备注：
（1）Constant ：表示当前控件相对于SuperView的x/y的相对距离
（2）注意刷新UI，会调用[self.view layoutIfNeeded]方法，这个方法的作用是：
- 强制刷新 : 让最新设置的约束值马上应用到UI控件上
- 会刷新到self.view内部的所有子控件
2.png
代码如下：（注意刷新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的值。
