// // KBSexSelVC.m // keyBoard // // Created by Mac on 2025/11/17. // 性别选择页 UI #import "KBSexSelVC.h" @interface KBSexSelVC () // 顶部区域 @property (nonatomic, strong) UIView *topBgView; // 顶部背景(渐变) @property (nonatomic, strong) UIImageView *arrowImageView; // 右上角箭头 @property (nonatomic, strong) UILabel *titleLabel; // 标题文案 @property (nonatomic, strong) UIView *titleUnderlineView; // 标题下划线 @property (nonatomic, strong) UIButton *skipButton; // 跳过按钮 // 性别选项 - 男 @property (nonatomic, strong) UIView *maleCardView; // 男性卡片容器 @property (nonatomic, strong) UIImageView *maleImageView; // 男性大头像 @property (nonatomic, strong) UILabel *maleLabel; // “Male” 文案 // 性别选项 - 女 @property (nonatomic, strong) UIView *femaleCardView; // 女性卡片容器 @property (nonatomic, strong) UIImageView *femaleImageView; // 女性大头像 @property (nonatomic, strong) UILabel *femaleLabel; // “Female” 文案 // 性别选项 - 第三性别 @property (nonatomic, strong) UIView *otherCardView; // 第三性别卡片容器 @property (nonatomic, strong) UIImageView *otherLeftImageView;// 左侧问号小图 @property (nonatomic, strong) UIImageView *otherRightImageView;// 右侧问号小图 @property (nonatomic, strong) UILabel *otherLabel; // “The Third Gender” 文案 // 底部按钮 @property (nonatomic, strong) UIButton *confirmButton; // Turn On The Keyboard 按钮 // 渐变层 @property (nonatomic, strong) CAGradientLayer *topGradientLayer; @end @implementation KBSexSelVC - (void)viewDidLoad { [super viewDidLoad]; // 使用全屏内容,不需要自定义导航栏 self.kb_enableCustomNavBar = NO; self.view.backgroundColor = [UIColor whiteColor]; [self setupUI]; } - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; // 更新渐变背景尺寸 self.topGradientLayer.frame = self.topBgView.bounds; } #pragma mark - Setup UI /// 构建静态 UI 布局 - (void)setupUI { // 顶部区域 [self.view addSubview:self.topBgView]; [self.topBgView addSubview:self.arrowImageView]; [self.topBgView addSubview:self.titleLabel]; [self.topBgView addSubview:self.titleUnderlineView]; [self.view addSubview:self.skipButton]; // 三个性别卡片 [self.view addSubview:self.maleCardView]; [self.maleCardView addSubview:self.maleImageView]; [self.maleCardView addSubview:self.maleLabel]; [self.view addSubview:self.femaleCardView]; [self.femaleCardView addSubview:self.femaleImageView]; [self.femaleCardView addSubview:self.femaleLabel]; [self.view addSubview:self.otherCardView]; [self.otherCardView addSubview:self.otherLeftImageView]; [self.otherCardView addSubview:self.otherRightImageView]; [self.otherCardView addSubview:self.otherLabel]; // 底部按钮 [self.view addSubview:self.confirmButton]; // 顶部背景 [self.topBgView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.view); make.top.equalTo(self.view); make.height.mas_equalTo(240); }]; // 跳过按钮右上角(跟随安全区) [self.skipButton mas_makeConstraints:^(MASConstraintMaker *make) { if (@available(iOS 11.0, *)) { make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop).offset(8); } else { make.top.equalTo(self.view).offset(30); } make.right.equalTo(self.view).offset(-16); make.height.mas_equalTo(32); make.width.mas_greaterThanOrEqualTo(64); }]; // 标题居左,靠近顶部背景下方 [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view).offset(28); make.bottom.equalTo(self.topBgView.mas_bottom).offset(-48); }]; [self.titleUnderlineView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.titleLabel.mas_left); make.right.lessThanOrEqualTo(self.topBgView).offset(-40); make.top.equalTo(self.titleLabel.mas_bottom).offset(8); make.height.mas_equalTo(4); }]; [self.arrowImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(self.topBgView).offset(-40); make.top.equalTo(self.topBgView).offset(40); make.width.mas_equalTo(90); make.height.mas_equalTo(90); }]; // 男性卡片 [self.maleCardView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view).offset(20); make.right.equalTo(self.view).offset(-20); make.top.equalTo(self.topBgView.mas_bottom).offset(-10); // 略微上移,产生“压住”效果 make.height.mas_equalTo(128); }]; [self.maleImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.maleCardView).offset(12); make.centerY.equalTo(self.maleCardView); make.width.mas_equalTo(110); make.height.mas_equalTo(110); }]; [self.maleLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.equalTo(self.maleCardView); make.right.equalTo(self.maleCardView).offset(-24); }]; // 女性卡片 [self.femaleCardView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.maleCardView); make.top.equalTo(self.maleCardView.mas_bottom).offset(24); make.height.mas_equalTo(110); }]; [self.femaleImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(self.femaleCardView).offset(-12); make.centerY.equalTo(self.femaleCardView); make.width.mas_equalTo(110); make.height.mas_equalTo(110); }]; [self.femaleLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.femaleCardView).offset(24); make.centerY.equalTo(self.femaleCardView); }]; // 第三性别卡片 [self.otherCardView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.maleCardView); make.top.equalTo(self.femaleCardView.mas_bottom).offset(24); make.height.mas_equalTo(96); }]; [self.otherLeftImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.otherCardView).offset(16); make.centerY.equalTo(self.otherCardView); make.width.mas_equalTo(54); make.height.mas_equalTo(54); }]; [self.otherRightImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(self.otherCardView).offset(-16); make.centerY.equalTo(self.otherCardView); make.width.mas_equalTo(54); make.height.mas_equalTo(54); }]; [self.otherLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self.otherCardView); make.centerY.equalTo(self.otherCardView); }]; // 底部按钮 [self.confirmButton mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.maleCardView); make.height.mas_equalTo(54); if (@available(iOS 11.0, *)) { make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom).offset(-24); } else { make.bottom.equalTo(self.view).offset(-24); } }]; } #pragma mark - Actions /// 点击跳过 - (void)onSkipTapped { // 触发回调,让外部(如 AppDelegate)切换到主 TabBar if (self.didFinishSelectBlock) { self.didFinishSelectBlock(); } [[NSUserDefaults standardUserDefaults] setBool:true forKey:KBSexSelectShownKey]; [[NSUserDefaults standardUserDefaults] synchronize]; } /// 点击底部“打开键盘”按钮 - (void)onConfirmTapped { // 触发回调,让外部(如 AppDelegate)切换到主 TabBar if (self.didFinishSelectBlock) { self.didFinishSelectBlock(); } [[NSUserDefaults standardUserDefaults] setBool:true forKey:KBSexSelectShownKey]; [[NSUserDefaults standardUserDefaults] synchronize]; } #pragma mark - Lazy UI - (UIView *)topBgView { if (!_topBgView) { _topBgView = [UIView new]; // 渐变背景(浅绿色 → 纯白) CAGradientLayer *layer = [CAGradientLayer layer]; layer.colors = @[ (__bridge id)[UIColor colorWithHex:0xE4FFF6].CGColor, (__bridge id)[UIColor colorWithHex:0xFFFFFF].CGColor ]; layer.startPoint = CGPointMake(0.5, 0.0); layer.endPoint = CGPointMake(0.5, 1.0); [_topBgView.layer insertSublayer:layer atIndex:0]; self.topGradientLayer = layer; } return _topBgView; } - (UIImageView *)arrowImageView { if (!_arrowImageView) { _arrowImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sex_jiantou_icon"]]; _arrowImageView.contentMode = UIViewContentModeScaleAspectFit; } return _arrowImageView; } - (UILabel *)titleLabel { if (!_titleLabel) { _titleLabel = [UILabel new]; _titleLabel.text = @"Please Select Your Gender"; _titleLabel.font = [UIFont systemFontOfSize:22 weight:UIFontWeightSemibold]; _titleLabel.textColor = [UIColor colorWithHex:KBBlackValue]; _titleLabel.numberOfLines = 1; } return _titleLabel; } - (UIView *)titleUnderlineView { if (!_titleUnderlineView) { _titleUnderlineView = [UIView new]; _titleUnderlineView.backgroundColor = [UIColor colorWithHex:KBColorValue]; _titleUnderlineView.layer.cornerRadius = 2.0; _titleUnderlineView.layer.masksToBounds = YES; } return _titleUnderlineView; } - (UIButton *)skipButton { if (!_skipButton) { _skipButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_skipButton setTitle:@"Skip" forState:UIControlStateNormal]; [_skipButton setTitleColor:[UIColor colorWithHex:KBBlackValue] forState:UIControlStateNormal]; _skipButton.titleLabel.font = [UIFont systemFontOfSize:14 weight:UIFontWeightMedium]; _skipButton.backgroundColor = [UIColor colorWithHex:0xE9F7F4]; _skipButton.layer.cornerRadius = 16; _skipButton.layer.masksToBounds = YES; [_skipButton addTarget:self action:@selector(onSkipTapped) forControlEvents:UIControlEventTouchUpInside]; } return _skipButton; } - (UIView *)maleCardView { if (!_maleCardView) { _maleCardView = [UIView new]; _maleCardView.backgroundColor = [UIColor whiteColor]; _maleCardView.layer.cornerRadius = 24.0; _maleCardView.layer.masksToBounds = YES; _maleCardView.layer.borderWidth = 2.0; _maleCardView.layer.borderColor = [UIColor colorWithHex:KBColorValue].CGColor; } return _maleCardView; } - (UIImageView *)maleImageView { if (!_maleImageView) { _maleImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sex_nan_icon"]]; _maleImageView.contentMode = UIViewContentModeScaleAspectFit; } return _maleImageView; } - (UILabel *)maleLabel { if (!_maleLabel) { _maleLabel = [UILabel new]; _maleLabel.text = @"Male"; _maleLabel.font = [UIFont systemFontOfSize:20 weight:UIFontWeightSemibold]; _maleLabel.textColor = [UIColor colorWithHex:KBBlackValue]; } return _maleLabel; } - (UIView *)femaleCardView { if (!_femaleCardView) { _femaleCardView = [UIView new]; _femaleCardView.backgroundColor = [UIColor colorWithHex:0xF6F8FC]; _femaleCardView.layer.cornerRadius = 24.0; _femaleCardView.layer.masksToBounds = YES; } return _femaleCardView; } - (UIImageView *)femaleImageView { if (!_femaleImageView) { _femaleImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sex_nv_icon"]]; _femaleImageView.contentMode = UIViewContentModeScaleAspectFit; } return _femaleImageView; } - (UILabel *)femaleLabel { if (!_femaleLabel) { _femaleLabel = [UILabel new]; _femaleLabel.text = @"Female"; _femaleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightRegular]; _femaleLabel.textColor = [UIColor colorWithHex:KBBlackValue]; } return _femaleLabel; } - (UIView *)otherCardView { if (!_otherCardView) { _otherCardView = [UIView new]; _otherCardView.backgroundColor = [UIColor colorWithHex:0xFDFDFD]; _otherCardView.layer.cornerRadius = 24.0; _otherCardView.layer.masksToBounds = YES; } return _otherCardView; } - (UIImageView *)otherLeftImageView { if (!_otherLeftImageView) { _otherLeftImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sex_othersmall_icon"]]; _otherLeftImageView.contentMode = UIViewContentModeScaleAspectFit; } return _otherLeftImageView; } - (UIImageView *)otherRightImageView { if (!_otherRightImageView) { _otherRightImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sex_otherbig_icon"]]; _otherRightImageView.contentMode = UIViewContentModeScaleAspectFit; } return _otherRightImageView; } - (UILabel *)otherLabel { if (!_otherLabel) { _otherLabel = [UILabel new]; _otherLabel.text = @"The Third Gender"; _otherLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightRegular]; _otherLabel.textColor = [UIColor colorWithHex:KBBlackValue]; } return _otherLabel; } - (UIButton *)confirmButton { if (!_confirmButton) { _confirmButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_confirmButton setTitle:@"Turn On The Keyboard" forState:UIControlStateNormal]; [_confirmButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; _confirmButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold]; _confirmButton.backgroundColor = [UIColor blackColor]; _confirmButton.layer.cornerRadius = 27.0; _confirmButton.layer.masksToBounds = YES; [_confirmButton addTarget:self action:@selector(onConfirmTapped) forControlEvents:UIControlEventTouchUpInside]; } return _confirmButton; } @end