优化ui
This commit is contained in:
@@ -5,93 +5,107 @@
|
||||
// Created by Mac on 2025/11/6.
|
||||
//
|
||||
|
||||
@import UIKit;
|
||||
#import "HomeRankContentVC.h"
|
||||
#import "HomeHotCell.h"
|
||||
@interface HomeRankContentVC () <UITableViewDataSource, UITableViewDelegate>
|
||||
@property (nonatomic, strong) NSArray<NSDictionary *> *dataSource; // 简单模拟数据
|
||||
|
||||
// 自定义卡片 Cell
|
||||
#import "HomeRankCardCell.h"
|
||||
|
||||
@interface HomeRankContentVC ()
|
||||
@property (nonatomic, strong) NSArray<NSDictionary *> *dataSource; // 简单模拟数据
|
||||
@end
|
||||
|
||||
@implementation HomeRankContentVC
|
||||
|
||||
- (void)viewDidLoad {
|
||||
[super viewDidLoad];
|
||||
// Do any additional setup after loading the view.
|
||||
// 构建数据（演示）
|
||||
self.dataSource = @[
|
||||
@{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
|
||||
@{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
|
||||
@{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
|
||||
@{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
|
||||
@{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO}
|
||||
];
|
||||
// 设置背景颜色：随机色
|
||||
self.view.backgroundColor = COLOR_WITH_RGB(arc4random()%255/255.0, arc4random()%255/255.0, arc4random()%255/255.0, 1);
|
||||
[self.view addSubview:self.tableView];
|
||||
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.left.top.right.equalTo(self.view);
|
||||
make.bottom.equalTo(self.view);
|
||||
|
||||
self.view.backgroundColor = COLOR_WITH_RGB(246/255.0, 253/255.0, 249/255.0, 1.0); // 淡绿色背景
|
||||
|
||||
// 数据
|
||||
self.dataSource = @[
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
|
||||
@{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)}
|
||||
];
|
||||
|
||||
|
||||
[self.view addSubview:self.collectionView];
|
||||
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.edges.equalTo(self.view);
|
||||
}];
|
||||
}
|
||||
|
||||
#pragma mark - UITableViewDataSource
|
||||
- (UICollectionView *)collectionView{
|
||||
if (!_collectionView) {
|
||||
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
|
||||
layout.sectionInset = UIEdgeInsetsMake(16, 16, 16, 16);
|
||||
layout.minimumLineSpacing = 24;
|
||||
layout.minimumInteritemSpacing = 16;
|
||||
|
||||
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
|
||||
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
|
||||
_collectionView.backgroundColor = [UIColor clearColor];
|
||||
// _collectionView.alwaysBounceVertical = YES;
|
||||
_collectionView.bounces = false;
|
||||
_collectionView.dataSource = self;
|
||||
_collectionView.delegate = self;
|
||||
[_collectionView registerClass:[HomeRankCardCell class] forCellWithReuseIdentifier:@"HomeRankCardCell"];
|
||||
// self.collectionView.translatesAutoresizingMaskIntoConstraints = NO;
|
||||
}
|
||||
return _collectionView;
|
||||
}
|
||||
|
||||
|
||||
#pragma mark - UICollectionViewDataSource
|
||||
|
||||
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
|
||||
return self.dataSource.count;
|
||||
}
|
||||
|
||||
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
|
||||
HomeHotCell *cell = [tableView dequeueReusableCellWithIdentifier:HomeHotCell.reuseId forIndexPath:indexPath];
|
||||
NSDictionary *item = self.dataSource[indexPath.row];
|
||||
// 配置 cell
|
||||
[cell configWithRank:[item[@"rank"] integerValue]
|
||||
title:item[@"title"]
|
||||
subtitle:item[@"sub"]
|
||||
joined:[item[@"joined"] boolValue]];
|
||||
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
|
||||
HomeRankCardCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"HomeRankCardCell" forIndexPath:indexPath];
|
||||
NSDictionary *d = self.dataSource[indexPath.item];
|
||||
BOOL added = [d[@"added"] boolValue];
|
||||
[cell configureWithTitle:d[@"title"]
|
||||
desc:d[@"desc"]
|
||||
people:d[@"people"]
|
||||
added:added];
|
||||
__weak typeof(self) weakSelf = self;
|
||||
cell.onTapAction = ^{
|
||||
// 切换添加/已添加状态并刷新该项
|
||||
NSMutableArray *m = [weakSelf.dataSource mutableCopy];
|
||||
NSMutableDictionary *md = [m[indexPath.item] mutableCopy];
|
||||
BOOL cur = [md[@"added"] boolValue];
|
||||
md[@"added"] = @(!cur);
|
||||
m[indexPath.item] = md;
|
||||
weakSelf.dataSource = [m copy];
|
||||
[weakSelf.collectionView reloadItemsAtIndexPaths:@[indexPath]];
|
||||
};
|
||||
return cell;
|
||||
}
|
||||
|
||||
#pragma mark - UITableViewDelegate
|
||||
#pragma mark - UICollectionViewDelegateFlowLayout
|
||||
|
||||
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
|
||||
return 84.0;
|
||||
}
|
||||
|
||||
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
|
||||
[tableView deselectRowAtIndexPath:indexPath animated:YES];
|
||||
|
||||
}
|
||||
|
||||
- (BaseTableView *)tableView {
|
||||
if (!_tableView) {
|
||||
// 使用 BaseTableView，统一默认配置
|
||||
_tableView = [[BaseTableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
|
||||
_tableView.dataSource = self;
|
||||
_tableView.delegate = self;
|
||||
_tableView.bounces = false;
|
||||
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone; // 设计为卡片式，去掉系统分割线
|
||||
_tableView.showsVerticalScrollIndicator = NO;
|
||||
_tableView.contentInset = UIEdgeInsetsMake(8, 0, KB_SafeAreaBottom(), 0);
|
||||
[_tableView registerClass:HomeHotCell.class forCellReuseIdentifier:HomeHotCell.reuseId];
|
||||
}
|
||||
return _tableView;
|
||||
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
|
||||
CGFloat totalHInset = 16 + 16; // section i/l/r
|
||||
CGFloat spacing = 16; // interitem spacing
|
||||
CGFloat w = collectionView.bounds.size.width - totalHInset; // not including section insets yet
|
||||
// Two columns → each width = (width - spacing - lr insets)/2
|
||||
CGFloat cellWidth = (w - spacing) / 2.0;
|
||||
// 固定高度，接近示意图比例
|
||||
CGFloat cellHeight = 340.0;
|
||||
return CGSizeMake(floor(cellWidth), cellHeight);
|
||||
}
|
||||
|
||||
|
||||
#pragma mark - JXCategoryListContentViewDelegate
|
||||
|
||||
/**
|
||||
实现 <JXCategoryListContentViewDelegate> 协议方法，返回该视图控制器所拥有的「视图」
|
||||
*/
|
||||
- (UIView *)listView {
|
||||
return self.view;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
Reference in New Issue
Block a user