2
This commit is contained in:
23
keyBoard/Class/Login/VC/KBLoginSheetViewController.h
Normal file
23
keyBoard/Class/Login/VC/KBLoginSheetViewController.h
Normal file
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// KBLoginSheetViewController.h
|
||||
// keyBoard
|
||||
//
|
||||
// A lightweight bottom-sheet style login prompt.
|
||||
//
|
||||
|
||||
#import <UIKit/UIKit.h>
|
||||
|
||||
NS_ASSUME_NONNULL_BEGIN
|
||||
|
||||
@interface KBLoginSheetViewController : UIViewController
|
||||
|
||||
/// Called when the login finished successfully; sheet will dismiss itself as well.
|
||||
@property (nonatomic, copy, nullable) void (^onLoginSuccess)(void);
|
||||
|
||||
/// Present the sheet from a top most view controller.
|
||||
+ (void)presentIfNeededFrom:(UIViewController *)presenting;
|
||||
|
||||
@end
|
||||
|
||||
NS_ASSUME_NONNULL_END
|
||||
|
||||
154
keyBoard/Class/Login/VC/KBLoginSheetViewController.m
Normal file
154
keyBoard/Class/Login/VC/KBLoginSheetViewController.m
Normal file
@@ -0,0 +1,154 @@
|
||||
//
|
||||
// KBLoginSheetViewController.m
|
||||
// keyBoard
|
||||
//
|
||||
// Bottom sheet asking user to login with Apple ID. Tapping Continue shows LoginViewController.
|
||||
//
|
||||
|
||||
#import "KBLoginSheetViewController.h"
|
||||
#import "LoginViewController.h"
|
||||
#import <Masonry/Masonry.h>
|
||||
|
||||
@interface KBLoginSheetViewController ()
|
||||
@property (nonatomic, strong) UIControl *backdrop;
|
||||
@property (nonatomic, strong) UIView *sheet;
|
||||
@property (nonatomic, strong) UIButton *checkButton;
|
||||
@property (nonatomic, strong) UILabel *descLabel;
|
||||
@property (nonatomic, strong) UIButton *continueButton;
|
||||
@end
|
||||
|
||||
@implementation KBLoginSheetViewController
|
||||
|
||||
+ (void)presentIfNeededFrom:(UIViewController *)presenting {
|
||||
if (!presenting) return;
|
||||
// 避免重复弹多个
|
||||
if ([presenting.presentedViewController isKindOfClass:[self class]]) return;
|
||||
KBLoginSheetViewController *vc = [KBLoginSheetViewController new];
|
||||
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
|
||||
[presenting presentViewController:vc animated:NO completion:nil];
|
||||
}
|
||||
|
||||
- (void)viewDidLoad {
|
||||
[super viewDidLoad];
|
||||
self.view.backgroundColor = [UIColor clearColor];
|
||||
[self buildUI];
|
||||
}
|
||||
|
||||
- (void)buildUI {
|
||||
// 半透明背景,点击可关闭
|
||||
self.backdrop = [[UIControl alloc] init];
|
||||
self.backdrop.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.15];
|
||||
[self.backdrop addTarget:self action:@selector(dismissSelf) forControlEvents:UIControlEventTouchUpInside];
|
||||
[self.view addSubview:self.backdrop];
|
||||
[self.backdrop mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.edges.equalTo(self.view);
|
||||
}];
|
||||
|
||||
// 底部白色卡片
|
||||
self.sheet = [[UIView alloc] init];
|
||||
self.sheet.backgroundColor = [UIColor whiteColor];
|
||||
self.sheet.layer.cornerRadius = 12.0;
|
||||
self.sheet.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner; // 顶部圆角
|
||||
self.sheet.layer.masksToBounds = YES;
|
||||
[self.view addSubview:self.sheet];
|
||||
[self.sheet mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.left.right.equalTo(self.view);
|
||||
make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom);
|
||||
make.height.mas_equalTo(160);
|
||||
}];
|
||||
|
||||
// 复选框 + 文案
|
||||
self.checkButton = [UIButton buttonWithType:UIButtonTypeSystem];
|
||||
self.checkButton.layer.cornerRadius = 16;
|
||||
self.checkButton.layer.borderWidth = 2;
|
||||
self.checkButton.layer.borderColor = [UIColor colorWithWhite:0.8 alpha:1.0].CGColor;
|
||||
self.checkButton.backgroundColor = [UIColor whiteColor];
|
||||
[self.checkButton setTitle:@"" forState:UIControlStateNormal];
|
||||
[self.checkButton addTarget:self action:@selector(toggleCheck) forControlEvents:UIControlEventTouchUpInside];
|
||||
|
||||
self.descLabel = [UILabel new];
|
||||
self.descLabel.text = @"allow log in with apple id?";
|
||||
self.descLabel.textColor = [UIColor blackColor];
|
||||
self.descLabel.font = [UIFont systemFontOfSize:16];
|
||||
|
||||
[self.sheet addSubview:self.checkButton];
|
||||
[self.sheet addSubview:self.descLabel];
|
||||
[self.checkButton mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.left.equalTo(self.sheet).offset(28);
|
||||
make.top.equalTo(self.sheet).offset(18);
|
||||
make.width.height.mas_equalTo(32);
|
||||
}];
|
||||
[self.descLabel mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.left.equalTo(self.checkButton.mas_right).offset(12);
|
||||
make.centerY.equalTo(self.checkButton.mas_centerY);
|
||||
make.right.lessThanOrEqualTo(self.sheet).offset(-20);
|
||||
}];
|
||||
|
||||
// Continue 按钮
|
||||
self.continueButton = [UIButton buttonWithType:UIButtonTypeSystem];
|
||||
self.continueButton.backgroundColor = [UIColor whiteColor];
|
||||
self.continueButton.layer.cornerRadius = 10;
|
||||
self.continueButton.layer.borderWidth = 1.0;
|
||||
self.continueButton.layer.borderColor = [UIColor colorWithWhite:0.8 alpha:1.0].CGColor;
|
||||
[self.continueButton setTitle:@"Continue" forState:UIControlStateNormal];
|
||||
[self.continueButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
|
||||
self.continueButton.titleLabel.font = [UIFont boldSystemFontOfSize:20];
|
||||
[self.continueButton addTarget:self action:@selector(onContinue) forControlEvents:UIControlEventTouchUpInside];
|
||||
[self.sheet addSubview:self.continueButton];
|
||||
[self.continueButton mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.left.equalTo(self.sheet).offset(28);
|
||||
make.right.equalTo(self.sheet).offset(-28);
|
||||
make.height.mas_equalTo(48);
|
||||
make.top.equalTo(self.checkButton.mas_bottom).offset(18);
|
||||
}];
|
||||
}
|
||||
|
||||
- (void)viewDidAppear:(BOOL)animated {
|
||||
[super viewDidAppear:animated];
|
||||
// 初始位置在屏幕下方,做一个上滑动画
|
||||
CGRect frame = self.sheet.frame;
|
||||
self.sheet.transform = CGAffineTransformMakeTranslation(0, frame.size.height + 40);
|
||||
self.backdrop.alpha = 0;
|
||||
[UIView animateWithDuration:0.22 animations:^{
|
||||
self.sheet.transform = CGAffineTransformIdentity;
|
||||
self.backdrop.alpha = 1;
|
||||
}];
|
||||
}
|
||||
|
||||
- (void)dismissSelf {
|
||||
[UIView animateWithDuration:0.18 animations:^{
|
||||
self.sheet.transform = CGAffineTransformMakeTranslation(0, self.sheet.bounds.size.height + 40);
|
||||
self.backdrop.alpha = 0;
|
||||
} completion:^(BOOL finished) {
|
||||
[self dismissViewControllerAnimated:NO completion:nil];
|
||||
}];
|
||||
}
|
||||
|
||||
- (void)toggleCheck {
|
||||
self.checkButton.selected = !self.checkButton.selected;
|
||||
if (self.checkButton.selected) {
|
||||
self.checkButton.backgroundColor = [UIColor colorWithRed:0.22 green:0.49 blue:0.96 alpha:1.0];
|
||||
self.checkButton.layer.borderColor = self.checkButton.backgroundColor.CGColor;
|
||||
} else {
|
||||
self.checkButton.backgroundColor = [UIColor whiteColor];
|
||||
self.checkButton.layer.borderColor = [UIColor colorWithWhite:0.8 alpha:1.0].CGColor;
|
||||
}
|
||||
}
|
||||
|
||||
- (void)onContinue {
|
||||
// 继续:展示内置的登录页(Apple 登录)
|
||||
LoginViewController *login = [LoginViewController new];
|
||||
__weak typeof(self) weakSelf = self;
|
||||
login.onLoginSuccess = ^(NSDictionary * _Nonnull userInfo) {
|
||||
__strong typeof(weakSelf) self = weakSelf; if (!self) return;
|
||||
// 先关闭登录页,再收起底部弹层
|
||||
[self dismissViewControllerAnimated:YES completion:^{
|
||||
if (self.onLoginSuccess) self.onLoginSuccess();
|
||||
[self dismissSelf];
|
||||
}];
|
||||
};
|
||||
login.modalPresentationStyle = UIModalPresentationPageSheet;
|
||||
[self presentViewController:login animated:YES completion:nil];
|
||||
}
|
||||
|
||||
@end
|
||||
Reference in New Issue
Block a user