diff --git a/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/Contents.json b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/Contents.json new file mode 100644 index 0000000..d3f2079 --- /dev/null +++ b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "home_bar_underline.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "home_bar_underline 1.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "home_bar_underline 2.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 1.png b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 1.png new file mode 100644 index 0000000..3658ff5 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 1.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 2.png b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 2.png new file mode 100644 index 0000000..3658ff5 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline 2.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline.png b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline.png new file mode 100644 index 0000000..3658ff5 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/home_bar_underline.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/Contents.json b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/Contents.json index e32fee0..7f5eeab 100644 --- a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/Contents.json +++ b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/Contents.json @@ -5,12 +5,12 @@ "scale" : "1x" }, { - "filename" : "微信图片_20251107143422_215_763.png", + "filename" : "微信图片_20251107154239_220_763.png", "idiom" : "universal", "scale" : "2x" }, { - "filename" : "微信图片_20251107143422_215_763 1.png", + "filename" : "微信图片_20251107154239_220_763 1.png", "idiom" : "universal", "scale" : "3x" } diff --git a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763 1.png b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763 1.png deleted file mode 100644 index 0886ec6..0000000 Binary files a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763 1.png and /dev/null differ diff --git a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763.png b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763.png deleted file mode 100644 index 0886ec6..0000000 Binary files a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107143422_215_763.png and /dev/null differ diff --git a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763 1.png b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763 1.png new file mode 100644 index 0000000..3047877 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763 1.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763.png b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763.png new file mode 100644 index 0000000..3047877 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_left_image.imageset/微信图片_20251107154239_220_763.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/Contents.json b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/Contents.json index 346861f..2f6b25b 100644 --- a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/Contents.json +++ b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/Contents.json @@ -5,12 +5,12 @@ "scale" : "1x" }, { - "filename" : "微信图片_20251107143423_216_763.png", + "filename" : "微信图片_20251107154240_221_763.png", "idiom" : "universal", "scale" : "2x" }, { - "filename" : "微信图片_20251107143423_216_763 1.png", + "filename" : "微信图片_20251107154240_221_763 1.png", "idiom" : "universal", "scale" : "3x" } diff --git a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763 1.png b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763 1.png deleted file mode 100644 index 65a3eda..0000000 Binary files a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763 1.png and /dev/null differ diff --git a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763.png b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763.png deleted file mode 100644 index 65a3eda..0000000 Binary files a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107143423_216_763.png and /dev/null differ diff --git a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763 1.png b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763 1.png new file mode 100644 index 0000000..4495623 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763 1.png differ diff --git a/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763.png b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763.png new file mode 100644 index 0000000..4495623 Binary files /dev/null and b/keyBoard/Assets.xcassets/Home/home_right_image.imageset/微信图片_20251107154240_221_763.png differ diff --git a/keyBoard/Class/Home/V/KBPanModalView.m b/keyBoard/Class/Home/V/KBPanModalView.m index a0ac7d2..05eb457 100644 --- a/keyBoard/Class/Home/V/KBPanModalView.m +++ b/keyBoard/Class/Home/V/KBPanModalView.m @@ -14,16 +14,20 @@ @property (nonatomic, strong) KBDirectionIndicatorView *indicator; // 顶部切换按钮与指示条 @property (nonatomic, strong) UIView *topBar; -@property (nonatomic, strong) UIView *contentView; -@property (nonatomic, strong) UIImageView *leftImageView; -@property (nonatomic, strong) UIImageView *rightImageView; +@property (nonatomic, strong) UIView *bigWhiteContentView; +@property (nonatomic, strong) UIView *secWhiteContentView; /// 皇冠👑 @property (nonatomic, strong) UIImageView *hgImageView; +/// 人 +@property (nonatomic, strong) UIImageView *personImageView; + +@property (nonatomic, strong) UIImageView *leftImageView; +@property (nonatomic, strong) UIImageView *rightImageView; @property (nonatomic, strong) UIButton *hotButton; @property (nonatomic, strong) UIButton *rankButton; -@property (nonatomic, strong) UIView *underlineView; // 选中下划线 +@property (nonatomic, strong) UIImageView *underlineImageView; // 选中下划线 // 承载子控制器内容 @property (nonatomic, strong) UIView *containerView; @@ -37,34 +41,16 @@ - (instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { -// self.backgroundColor = [UIColor redColor]; + // 该背景色会被 HWPanModal 用来设置容器的 _contentView 背景色 + // 参考 Pods/HWPanModal/Sources/View/PanModal/HWPanModalContainerView.m: adjustPanContainerBackgroundColor + // 想要改变外层白色底（截图中 _contentView）的颜色，只需改这里即可 + self.backgroundColor = [UIColor clearColor]; // 柔和的绿色 // HWBackgroundConfig *config = [HWBackgroundConfig configWithBehavior:HWBackgroundBehaviorDefault]; // config.backgroundAlpha = 0; // [self.hw_dimmedView reloadConfig:config]; - // 添加容器 - [self addSubview:self.contentView]; - [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) { - make.left.right.equalTo(self).inset(16); - make.top.equalTo(self).offset(48); - make.bottom.equalTo(self); - }]; - - [self.contentView addSubview:self.leftImageView]; - [self.contentView addSubview:self.rightImageView]; - [self.leftImageView mas_makeConstraints:^(MASConstraintMaker *make) { - make.left.right.equalTo(self.contentView); - make.top.equalTo(self.contentView); - make.height.mas_equalTo(79); - }]; - [self.rightImageView mas_makeConstraints:^(MASConstraintMaker *make) { - make.left.right.equalTo(self.contentView); - make.top.equalTo(self.contentView); - make.height.equalTo(self.leftImageView); - }]; - - + // 顶部按钮 + 容器 [self setupTopButtonsAndContainer]; // 默认展示“热门” @@ -171,16 +157,38 @@ #pragma mark - UI - (void)setupTopButtonsAndContainer { + + // 添加最大的白色容器 + [self addSubview:self.bigWhiteContentView]; + [self addSubview:self.personImageView]; + [self addSubview:self.hgImageView]; + + [self.bigWhiteContentView mas_makeConstraints:^(MASConstraintMaker *make) { + make.left.right.equalTo(self).inset(0); + make.top.equalTo(self).offset(40); + make.bottom.equalTo(self); + }]; + + [self.bigWhiteContentView addSubview:self.secWhiteContentView]; + [self.secWhiteContentView mas_makeConstraints:^(MASConstraintMaker *make) { + make.left.right.equalTo(self).inset(16); + make.top.equalTo(self.bigWhiteContentView).offset(47); + make.bottom.equalTo(self.bigWhiteContentView); + }]; + + // 顶部栏 - self.topBar = [[UIView alloc] init]; -// self.topBar.backgroundColor = [UIColor colorWithWhite:1 alpha:0.9]; - [self addSubview:self.topBar]; - // 首次展示时先隐藏，待转场完成后再淡入，避免“自底向上滑入”的错觉 -// self.topBar.alpha = 0.0; + [self.secWhiteContentView addSubview:self.topBar]; + [self.secWhiteContentView addSubview:self.containerView]; + + [self.topBar addSubview:self.leftImageView]; + [self.topBar addSubview:self.rightImageView]; + + // 两个按钮 self.hotButton = [UIButton buttonWithType:UIButtonTypeCustom]; - [self.hotButton setTitle:@"热门" forState:UIControlStateNormal]; + [self.hotButton setTitle:@"Ranking List" forState:UIControlStateNormal]; [self.hotButton setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal]; [self.hotButton setTitleColor:[UIColor blackColor] forState:UIControlStateSelected]; self.hotButton.titleLabel.font = [UIFont boldSystemFontOfSize:16]; @@ -189,7 +197,7 @@ [self.topBar addSubview:self.hotButton]; self.rankButton = [UIButton buttonWithType:UIButtonTypeCustom]; - [self.rankButton setTitle:@"排行" forState:UIControlStateNormal]; + [self.rankButton setTitle:@"Persona circle" forState:UIControlStateNormal]; [self.rankButton setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal]; [self.rankButton setTitleColor:[UIColor blackColor] forState:UIControlStateSelected]; self.rankButton.titleLabel.font = [UIFont boldSystemFontOfSize:16]; @@ -198,48 +206,67 @@ [self.topBar addSubview:self.rankButton]; // 下划线（跟随选中按钮） - self.underlineView = [[UIView alloc] init]; - self.underlineView.backgroundColor = [UIColor blackColor]; - self.underlineView.layer.cornerRadius = 1.0; - [self.topBar addSubview:self.underlineView]; - - // 容器视图 - self.containerView = [[UIView alloc] init]; - self.containerView.backgroundColor = [UIColor redColor]; - self.containerView.clipsToBounds = YES; - [self addSubview:self.containerView]; + [self.topBar addSubview:self.underlineImageView]; // Masonry 约束 - CGFloat topPadding = 47; // 与顶部小指示器留点空间 + CGFloat topPadding = 0; // 与顶部小指示器留点空间 [self.topBar mas_makeConstraints:^(MASConstraintMaker *make) { - make.left.right.equalTo(self); - make.top.equalTo(self).offset(topPadding); - make.height.mas_equalTo(44); + make.left.right.equalTo(self.secWhiteContentView); + make.top.equalTo(self.secWhiteContentView).offset(topPadding); + make.height.mas_equalTo(54); + }]; + + [self.leftImageView mas_makeConstraints:^(MASConstraintMaker *make) { + make.left.right.equalTo(self.topBar); + make.top.equalTo(self.topBar); + make.height.mas_equalTo(54); + }]; + [self.rightImageView mas_makeConstraints:^(MASConstraintMaker *make) { + make.left.right.equalTo(self.topBar); + make.top.equalTo(self.topBar); + make.height.equalTo(self.leftImageView); + }]; [self.hotButton mas_makeConstraints:^(MASConstraintMaker *make) { - make.top.bottom.equalTo(self.topBar); + make.centerY.equalTo(self.topBar).offset(3); make.left.equalTo(self.topBar); }]; [self.rankButton mas_makeConstraints:^(MASConstraintMaker *make) { - make.top.bottom.equalTo(self.topBar); + make.centerY.equalTo(self.hotButton); make.right.equalTo(self.topBar); make.left.equalTo(self.hotButton.mas_right); make.width.equalTo(self.hotButton); }]; // 初始先放在“热门”下方，宽度稍小于按钮文字 - [self.underlineView mas_makeConstraints:^(MASConstraintMaker *make) { - make.height.mas_equalTo(2); - make.bottom.equalTo(self.topBar.mas_bottom).offset(-2); - make.centerX.equalTo(self.hotButton); - make.width.mas_equalTo(24); + [self.underlineImageView mas_makeConstraints:^(MASConstraintMaker *make) { + make.height.mas_equalTo(5); + make.bottom.equalTo(self.topBar.mas_bottom).offset(-14); + make.centerX.equalTo(self.hotButton).offset(-0); + make.width.mas_equalTo(78); }]; [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.topBar.mas_bottom).offset(8); - make.left.right.bottom.equalTo(self); + make.left.right.equalTo(self.secWhiteContentView).inset(0); + make.bottom.equalTo(self.secWhiteContentView); }]; + + [self.personImageView mas_makeConstraints:^(MASConstraintMaker *make) { + make.left.equalTo(self).offset(46); + make.bottom.equalTo(self.topBar.mas_top).offset(22); + make.width.mas_equalTo(70); + make.height.mas_equalTo(107); + }]; + + [self.hgImageView mas_makeConstraints:^(MASConstraintMaker *make) { + make.right.equalTo(self).offset(-38); + make.bottom.equalTo(self.topBar.mas_top).offset(12); + make.width.mas_equalTo(97); + make.height.mas_equalTo(78); + }]; + } #pragma mark - Action @@ -296,12 +323,19 @@ UIButton *btn = (index == 0) ? self.hotButton : self.rankButton; // 更新下划线位置 - [self.underlineView mas_remakeConstraints:^(MASConstraintMaker *make) { - make.height.mas_equalTo(2); - make.bottom.equalTo(self.topBar.mas_bottom).offset(-2); - make.centerX.equalTo(btn); - make.width.mas_equalTo(24); + [self.underlineImageView mas_remakeConstraints:^(MASConstraintMaker *make) { + make.height.mas_equalTo(5); + make.bottom.equalTo(self.topBar.mas_bottom).offset(-15); + make.centerX.equalTo(btn).offset(index == 0 ? -6 : -11); + make.width.mas_equalTo(78); }]; + if (index == 0) { + self.leftImageView.hidden = false; + self.rightImageView.hidden = true; + }else{ + self.leftImageView.hidden = true; + self.rightImageView.hidden = false; + } if (animated) { [UIView animateWithDuration:0.25 animations:^{ @@ -312,11 +346,22 @@ } } -- (UIView *)contentView{ - if (!_contentView) { - _contentView = [[UIView alloc] init]; +- (UIView *)bigWhiteContentView{ + if (!_bigWhiteContentView) { + _bigWhiteContentView = [[UIView alloc] init]; + _bigWhiteContentView.backgroundColor = [UIColor whiteColor]; + _bigWhiteContentView.layer.cornerRadius = 40; + _bigWhiteContentView.layer.masksToBounds = true; } - return _contentView; + return _bigWhiteContentView; +} + +- (UIView *)secWhiteContentView{ + if (!_secWhiteContentView) { + _secWhiteContentView = [[UIView alloc] init]; + _secWhiteContentView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.23]; + } + return _secWhiteContentView; } - (UIImageView *)leftImageView{ @@ -332,7 +377,7 @@ if (!_rightImageView) { _rightImageView = [[UIImageView alloc] init]; _rightImageView.image = [UIImage imageNamed:@"home_right_image"]; - _rightImageView.contentMode = UIViewContentModeScaleToFill; + _rightImageView.contentMode = UIViewContentModeScaleAspectFit; _rightImageView.hidden = true; } return _rightImageView; @@ -342,9 +387,41 @@ if (!_hgImageView) { _hgImageView = [[UIImageView alloc] init]; _hgImageView.image = [UIImage imageNamed:@"home_hg_icon"]; - _hgImageView.contentMode = UIViewContentModeScaleToFill; + _hgImageView.contentMode = UIViewContentModeScaleAspectFit; } return _hgImageView; } +- (UIImageView *)personImageView{ + if (!_personImageView) { + _personImageView = [[UIImageView alloc] init]; + _personImageView.image = [UIImage imageNamed:@"home_person_icon"]; + _personImageView.contentMode = UIViewContentModeScaleAspectFit; + } + return _personImageView; +} + + +- (UIView *)topBar{ + if (!_topBar) { + _topBar = [[UIView alloc] init]; + } + return _topBar; +} + +- (UIView *)containerView{ + if (!_containerView) { + _containerView = [[UIView alloc] init]; + } + return _containerView; +} + +- (UIImageView *)underlineImageView{ + if (!_underlineImageView) { + _underlineImageView = [[UIImageView alloc] init]; + _underlineImageView.image = [UIImage imageNamed:@"home_bar_underline"]; + } + return _underlineImageView; +} + @end