Skip to content

Commit 1b68b0e

Browse files
AAChartModelAAChartModel
committed
Revamp list UI: grouped headers and themed cells
Redesign list/table appearance and theming across demo view controllers. Section headers were replaced with floating, rounded 'card' headers that use diagonal gradients, colored shadows, decorative translucent circles and a numeric badge. Tables now use grouped/system backgrounds on iOS13 with a light fallback, consistent separator insets/color, increased header height, dynamic row heights and automatic dimension. CustomTableViewCell gained a sectionColor property, an accent bar, a diagonal gradient badge, updated typography, and layout code to preserve colors during selection/highlight. Added a small color helper (aa_lightenColor) and minor behavior tweaks (row deselecting). Files changed: AAChartModelListVC.m, MainVC.m, AABaseListVC.m, CustomTableViewCell.h/.m.
1 parent 503e3a9 commit 1b68b0e

5 files changed

Lines changed: 270 additions & 102 deletions

File tree

‎AAChartKitDemo/Demo/AAChartListVC/AAChartModelListVC.m‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,7 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
168168
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomTableViewCell"];
169169
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
170170

171-
cell.numberLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row + 1];
172-
cell.numberLabel.layer.masksToBounds = true;
173-
cell.numberLabel.layer.cornerRadius = 10;
174-
UIColor *numBgColor = [AAEasyTool colorWithHexString:@[@"#5470c6",
171+
UIColor *themeColor = [AAEasyTool colorWithHexString:@[@"#5470c6",
175172
@"#91cc75",
176173
@"#fac858",
177174
@"#ee6666",
@@ -180,26 +177,18 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
180177
@"#fc8452",
181178
@"#9a60b4",
182179
@"#ea7ccc"][indexPath.section % 9]];
183-
cell.numberLabel.backgroundColor = numBgColor;
184-
cell.numberLabel.textColor = UIColor.whiteColor;
180+
cell.sectionColor = themeColor;
181+
cell.numberLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row + 1];
185182

186183
NSString *textStr = self.chartTypeTitleArr[(NSUInteger)indexPath.section][(NSUInteger)indexPath.row];
187184
NSArray<NSString *> *textStrArr = [textStr componentsSeparatedByString:@"---"];
188185
cell.titleLabel.text = textStrArr.firstObject;
189186
cell.subtitleLabel.text = textStrArr.count > 1 ? textStrArr[1] : @"";
190187

191188
if (@available(iOS 13.0, *)) {
192-
cell.titleLabel.textColor = UIColor.labelColor;
193-
cell.subtitleLabel.textColor = UIColor.tertiaryLabelColor;
194-
cell.backgroundColor = (indexPath.row % 2 == 0)
195-
? UIColor.systemBackgroundColor
196-
: UIColor.secondarySystemBackgroundColor;
189+
cell.backgroundColor = UIColor.secondarySystemGroupedBackgroundColor;
197190
} else {
198-
cell.titleLabel.textColor = UIColor.blackColor;
199-
cell.subtitleLabel.textColor = UIColor.grayColor;
200-
cell.backgroundColor = (indexPath.row % 2 == 0)
201-
? [AAEasyTool colorWithHexString:@"#FFF0F5"]
202-
: UIColor.whiteColor;
191+
cell.backgroundColor = UIColor.whiteColor;
203192
}
204193

205194
return cell;

‎AAChartKitDemo/Demo/AAChartListVC/MainVC.m‎

Lines changed: 85 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,9 @@ - (void)viewDidLoad {
8181
[super viewDidLoad];
8282
self.title = @"AAChartKit";
8383
if (@available(iOS 13.0, *)) {
84-
self.view.backgroundColor = UIColor.systemBackgroundColor;
84+
self.view.backgroundColor = UIColor.systemGroupedBackgroundColor;
8585
} else {
86-
self.view.backgroundColor = [UIColor whiteColor];
86+
self.view.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:247/255.0 alpha:1.0];
8787
}
8888
_colorsArr = @[
8989
@"#5470c6",
@@ -116,7 +116,16 @@ - (void)configTheTableView {
116116
tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
117117
tableView.delegate = self;
118118
tableView.dataSource = self;
119-
tableView.sectionHeaderHeight = 50;
119+
tableView.sectionHeaderHeight = 56;
120+
tableView.estimatedRowHeight = 92;
121+
tableView.rowHeight = UITableViewAutomaticDimension;
122+
tableView.separatorInset = UIEdgeInsetsMake(0, 48, 0, 0);
123+
if (@available(iOS 13.0, *)) {
124+
tableView.backgroundColor = UIColor.systemGroupedBackgroundColor;
125+
tableView.separatorColor = UIColor.separatorColor;
126+
} else {
127+
tableView.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:247/255.0 alpha:1.0];
128+
}
120129
[tableView registerNib:[UINib nibWithNibName:@"CustomTableViewCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:@"customCell"];
121130
[self.view addSubview:tableView];
122131
}
@@ -127,22 +136,77 @@ - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
127136

128137
#pragma mark -- UITableViewDelegate && UITableViewDataSource
129138
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
130-
UIView *sectionHeaderView = [[UIView alloc]init];
139+
UIColor *baseColor = [AAEasyTool colorWithHexString:_colorsArr[section % 18]];
140+
CGFloat tableW = tableView.bounds.size.width;
141+
142+
// Transparent container
143+
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableW, 56)];
144+
container.backgroundColor = UIColor.clearColor;
145+
146+
// Floating card
147+
CGFloat margin = 12;
148+
UIView *card = [[UIView alloc] initWithFrame:CGRectMake(margin, 4, tableW - margin * 2, 48)];
149+
card.layer.cornerRadius = 12;
150+
card.clipsToBounds = NO;
151+
152+
// Diagonal gradient
153+
CAGradientLayer *gradient = [CAGradientLayer layer];
154+
gradient.frame = card.bounds;
155+
gradient.cornerRadius = 12;
156+
gradient.startPoint = CGPointMake(0, 0);
157+
gradient.endPoint = CGPointMake(1, 1);
158+
CGFloat r, g, b, a;
159+
[baseColor getRed:&r green:&g blue:&b alpha:&a];
160+
UIColor *lighterColor = [UIColor colorWithRed:MIN(r + 0.12, 1.0)
161+
green:MIN(g + 0.12, 1.0)
162+
blue:MIN(b + 0.12, 1.0)
163+
alpha:a];
164+
gradient.colors = @[(id)baseColor.CGColor, (id)lighterColor.CGColor];
165+
[card.layer insertSublayer:gradient atIndex:0];
166+
167+
// Colored shadow
168+
card.layer.shadowColor = baseColor.CGColor;
169+
card.layer.shadowOffset = CGSizeMake(0, 3);
170+
card.layer.shadowRadius = 6;
171+
card.layer.shadowOpacity = 0.35;
131172

132-
UILabel *sectionTitleLabel = [[UILabel alloc]init];
133-
sectionTitleLabel.frame = sectionHeaderView.bounds;
134-
sectionTitleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
135-
UIColor *bgColor = [AAEasyTool colorWithHexString:_colorsArr[section % 18]];
136-
sectionTitleLabel.backgroundColor = bgColor;
137-
NSString *titleStr = self.sectionTypeArr[(NSUInteger) section];
173+
// Decorative translucent circles
174+
CGFloat cardW = card.bounds.size.width;
175+
CGFloat cardH = card.bounds.size.height;
176+
177+
CAShapeLayer *circle1 = [CAShapeLayer layer];
178+
circle1.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(cardW - 60, -10, 50, 50)].CGPath;
179+
circle1.fillColor = [UIColor colorWithWhite:1.0 alpha:0.08].CGColor;
180+
[card.layer addSublayer:circle1];
181+
182+
CAShapeLayer *circle2 = [CAShapeLayer layer];
183+
circle2.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(cardW - 35, cardH - 30, 40, 40)].CGPath;
184+
circle2.fillColor = [UIColor colorWithWhite:1.0 alpha:0.06].CGColor;
185+
[card.layer addSublayer:circle2];
186+
187+
// Section number badge
188+
UILabel *badge = [[UILabel alloc] initWithFrame:CGRectMake(14, (cardH - 24) / 2, 24, 24)];
189+
badge.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.25];
190+
badge.layer.cornerRadius = 12;
191+
badge.layer.masksToBounds = YES;
192+
badge.text = [NSString stringWithFormat:@"%ld", (long)(section + 1)];
193+
badge.textColor = UIColor.whiteColor;
194+
badge.font = [UIFont monospacedDigitSystemFontOfSize:11 weight:UIFontWeightBold];
195+
badge.textAlignment = NSTextAlignmentCenter;
196+
[card addSubview:badge];
197+
198+
// Title label
199+
NSString *titleStr = self.sectionTypeArr[(NSUInteger)section];
138200
titleStr = [titleStr stringByReplacingOccurrencesOfString:@"---" withString:@" | "];
139-
sectionTitleLabel.text = titleStr;
140-
sectionTitleLabel.textColor = UIColor.whiteColor; //255 48 48
141-
sectionTitleLabel.font = [UIFont boldSystemFontOfSize:16.0f];
142-
sectionTitleLabel.textAlignment = NSTextAlignmentCenter;
143-
[sectionHeaderView addSubview:sectionTitleLabel];
144-
145-
return sectionHeaderView;
201+
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(46, 0, cardW - 70, cardH)];
202+
titleLabel.text = titleStr;
203+
titleLabel.textColor = UIColor.whiteColor;
204+
titleLabel.font = [UIFont systemFontOfSize:15 weight:UIFontWeightBold];
205+
titleLabel.numberOfLines = 1;
206+
[card addSubview:titleLabel];
207+
208+
[container addSubview:card];
209+
return container;
146210
}
147211

148212
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
@@ -163,29 +227,18 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
163227
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"customCell"];
164228
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
165229

230+
UIColor *themeColor = [AAEasyTool colorWithHexString:_colorsArr[indexPath.section % 18]];
231+
cell.sectionColor = themeColor;
166232
cell.numberLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row + 1];
167-
cell.numberLabel.layer.masksToBounds = true;
168-
cell.numberLabel.layer.cornerRadius = 10;
169-
UIColor *numBgColor = [AAEasyTool colorWithHexString:_colorsArr[indexPath.section % 18]];
170-
cell.numberLabel.backgroundColor = numBgColor;
171-
cell.numberLabel.textColor = UIColor.whiteColor;
172233
NSString *textStr = self.chartTypeNameArr[(NSUInteger) indexPath.section][(NSUInteger) indexPath.row];
173234
NSArray *textStrArr = [textStr componentsSeparatedByString:@"---"];
174235
cell.titleLabel.text = textStrArr[0];
175236
cell.subtitleLabel.text = textStrArr[1];
176237

177238
if (@available(iOS 13.0, *)) {
178-
cell.titleLabel.textColor = UIColor.labelColor;
179-
cell.subtitleLabel.textColor = UIColor.tertiaryLabelColor;
180-
cell.backgroundColor = (indexPath.row % 2 == 0)
181-
? UIColor.systemBackgroundColor
182-
: UIColor.secondarySystemBackgroundColor;
239+
cell.backgroundColor = UIColor.secondarySystemGroupedBackgroundColor;
183240
} else {
184-
cell.titleLabel.textColor = UIColor.blackColor;
185-
cell.subtitleLabel.textColor = UIColor.grayColor;
186-
cell.backgroundColor = (indexPath.row % 2 == 0)
187-
? [AAEasyTool colorWithHexString:@"#FFF0F5"]
188-
: UIColor.whiteColor;
241+
cell.backgroundColor = UIColor.whiteColor;
189242
}
190243

191244
return cell;

‎AAChartKitDemo/Demo/AdditionalContent2/AABaseListVC.m‎

Lines changed: 95 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ - (void)viewDidLoad {
3131
}
3232

3333
if (@available(iOS 13.0, *)) {
34-
self.view.backgroundColor = UIColor.systemBackgroundColor;
34+
self.view.backgroundColor = UIColor.systemGroupedBackgroundColor;
3535
} else {
36-
self.view.backgroundColor = UIColor.whiteColor;
36+
self.view.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:247/255.0 alpha:1.0];
3737
}
3838

3939
self.colorsArr = @[
@@ -59,11 +59,17 @@ - (void)setUpMainTableView {
5959
tableView.delegate = self;
6060
tableView.dataSource = self;
6161
if (@available(iOS 13.0, *)) {
62-
tableView.backgroundColor = UIColor.systemBackgroundColor;
62+
tableView.backgroundColor = UIColor.systemGroupedBackgroundColor;
6363
} else {
64-
tableView.backgroundColor = UIColor.whiteColor;
64+
tableView.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:247/255.0 alpha:1.0];
65+
}
66+
tableView.sectionHeaderHeight = 56;
67+
tableView.estimatedRowHeight = 92;
68+
tableView.rowHeight = UITableViewAutomaticDimension;
69+
tableView.separatorInset = UIEdgeInsetsMake(0, 48, 0, 0);
70+
if (@available(iOS 13.0, *)) {
71+
tableView.separatorColor = UIColor.separatorColor;
6572
}
66-
tableView.sectionHeaderHeight = 45;
6773
tableView.sectionIndexColor = UIColor.redColor;
6874
[tableView registerNib:[UINib nibWithNibName:kCustomTableViewCell bundle:NSBundle.mainBundle] forCellReuseIdentifier:kCustomTableViewCell];
6975
[self.view addSubview:tableView];
@@ -125,58 +131,96 @@ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger
125131
#pragma mark - UITableViewDelegate
126132

127133
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
128-
UIView *sectionHeaderView = [[UIView alloc] init];
129-
UIColor *bgColor = [self kColorWithHexString:self.colorsArr[section % 18]];
130-
sectionHeaderView.backgroundColor = bgColor;
131-
132-
UILabel *sectionTitleLabel = [[UILabel alloc] initWithFrame:sectionHeaderView.bounds];
133-
sectionTitleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
134-
sectionTitleLabel.text = self.sectionTitleArr[section];
135-
sectionTitleLabel.textColor = UIColor.whiteColor;
136-
sectionTitleLabel.font = [UIFont boldSystemFontOfSize:17];
137-
sectionTitleLabel.textAlignment = NSTextAlignmentCenter;
138-
[sectionHeaderView addSubview:sectionTitleLabel];
139-
140-
return sectionHeaderView;
134+
UIColor *baseColor = [self kColorWithHexString:self.colorsArr[section % 18]];
135+
CGFloat tableW = tableView.bounds.size.width;
136+
137+
// Transparent container
138+
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableW, 56)];
139+
container.backgroundColor = UIColor.clearColor;
140+
141+
// Floating card
142+
CGFloat margin = 12;
143+
UIView *card = [[UIView alloc] initWithFrame:CGRectMake(margin, 4, tableW - margin * 2, 48)];
144+
card.layer.cornerRadius = 12;
145+
card.clipsToBounds = NO;
146+
147+
// Diagonal gradient
148+
CAGradientLayer *gradient = [CAGradientLayer layer];
149+
gradient.frame = card.bounds;
150+
gradient.cornerRadius = 12;
151+
gradient.startPoint = CGPointMake(0, 0);
152+
gradient.endPoint = CGPointMake(1, 1);
153+
UIColor *lighterColor = [self aa_lightenColor:baseColor byAmount:0.12];
154+
gradient.colors = @[(id)baseColor.CGColor, (id)lighterColor.CGColor];
155+
[card.layer insertSublayer:gradient atIndex:0];
156+
157+
// Colored shadow
158+
card.layer.shadowColor = baseColor.CGColor;
159+
card.layer.shadowOffset = CGSizeMake(0, 3);
160+
card.layer.shadowRadius = 6;
161+
card.layer.shadowOpacity = 0.35;
162+
163+
// Decorative translucent circles
164+
CGFloat cardW = card.bounds.size.width;
165+
CGFloat cardH = card.bounds.size.height;
166+
167+
CAShapeLayer *circle1 = [CAShapeLayer layer];
168+
circle1.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(cardW - 60, -10, 50, 50)].CGPath;
169+
circle1.fillColor = [UIColor colorWithWhite:1.0 alpha:0.08].CGColor;
170+
[card.layer addSublayer:circle1];
171+
172+
CAShapeLayer *circle2 = [CAShapeLayer layer];
173+
circle2.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(cardW - 35, cardH - 30, 40, 40)].CGPath;
174+
circle2.fillColor = [UIColor colorWithWhite:1.0 alpha:0.06].CGColor;
175+
[card.layer addSublayer:circle2];
176+
177+
// Section number badge
178+
UILabel *badge = [[UILabel alloc] initWithFrame:CGRectMake(14, (cardH - 24) / 2, 24, 24)];
179+
badge.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.25];
180+
badge.layer.cornerRadius = 12;
181+
badge.layer.masksToBounds = YES;
182+
badge.text = [NSString stringWithFormat:@"%ld", (long)(section + 1)];
183+
badge.textColor = UIColor.whiteColor;
184+
badge.font = [UIFont monospacedDigitSystemFontOfSize:11 weight:UIFontWeightBold];
185+
badge.textAlignment = NSTextAlignmentCenter;
186+
[card addSubview:badge];
187+
188+
// Title label
189+
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(46, 0, cardW - 70, cardH)];
190+
titleLabel.text = self.sectionTitleArr[section];
191+
titleLabel.textColor = UIColor.whiteColor;
192+
titleLabel.font = [UIFont systemFontOfSize:15 weight:UIFontWeightBold];
193+
titleLabel.numberOfLines = 1;
194+
[card addSubview:titleLabel];
195+
196+
[container addSubview:card];
197+
return container;
141198
}
142199

143200
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
144201
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCustomTableViewCell];
145202
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
146203

147-
if (@available(iOS 13.0, *)) {
148-
if (indexPath.row % 2 == 0) {
149-
cell.backgroundColor = UIColor.systemBackgroundColor;
150-
} else {
151-
cell.backgroundColor = UIColor.secondarySystemBackgroundColor;
152-
}
153-
} else {
154-
if (indexPath.row % 2 == 0) {
155-
cell.backgroundColor = UIColor.whiteColor;
156-
} else {
157-
cell.backgroundColor = [self kRGBColorFromHex:0xE6E6FA];
158-
}
159-
}
204+
UIColor *themeColor = [self kColorWithHexString:self.colorsArr[indexPath.section % 18]];
205+
cell.sectionColor = themeColor;
206+
cell.numberLabel.text = [NSString stringWithFormat:@"%ld", (long)(indexPath.row + 1)];
160207

161208
NSString *cellTitle = self.chartTypeTitleArr[indexPath.section][indexPath.row];
162209
NSArray<NSString *> *titleParts = [cellTitle componentsSeparatedByString:@"---"];
163210
cell.titleLabel.text = titleParts.firstObject;
164211
cell.subtitleLabel.text = titleParts.count > 1 ? titleParts[1] : @"";
212+
165213
if (@available(iOS 13.0, *)) {
166-
cell.titleLabel.textColor = UIColor.labelColor;
214+
cell.backgroundColor = UIColor.secondarySystemGroupedBackgroundColor;
167215
} else {
168-
cell.titleLabel.textColor = UIColor.blackColor;
216+
cell.backgroundColor = UIColor.whiteColor;
169217
}
170-
cell.numberLabel.text = [NSString stringWithFormat:@"%ld", (long)(indexPath.row + 1)];
171-
172-
UIColor *bgColor = [self kColorWithHexString:self.colorsArr[indexPath.section % 18]];
173-
cell.numberLabel.backgroundColor = bgColor;
174218

175219
return cell;
176220
}
177221

178222
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
179-
// Implement selection logic here
223+
[tableView deselectRowAtIndexPath:indexPath animated:YES];
180224
}
181225

182226
#pragma mark - Dark Mode Support
@@ -192,11 +236,22 @@ - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
192236

193237
- (void)aa_updateDynamicColors {
194238
if (@available(iOS 13.0, *)) {
195-
self.view.backgroundColor = UIColor.systemBackgroundColor;
196-
self.mainTableView.backgroundColor = UIColor.systemBackgroundColor;
239+
self.view.backgroundColor = UIColor.systemGroupedBackgroundColor;
240+
self.mainTableView.backgroundColor = UIColor.systemGroupedBackgroundColor;
197241
[self.mainTableView reloadData];
198242
}
199243
}
200244

245+
#pragma mark - Color Helpers
246+
247+
- (UIColor *)aa_lightenColor:(UIColor *)color byAmount:(CGFloat)amount {
248+
CGFloat r, g, b, a;
249+
[color getRed:&r green:&g blue:&b alpha:&a];
250+
return [UIColor colorWithRed:MIN(r + amount, 1.0)
251+
green:MIN(g + amount, 1.0)
252+
blue:MIN(b + amount, 1.0)
253+
alpha:a];
254+
}
255+
201256
@end
202257

‎AAChartKitDemo/Demo/AdditionalContent2/CustomTableViewCell.h‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ NS_ASSUME_NONNULL_BEGIN
1616
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
1717
@property (weak, nonatomic) IBOutlet UILabel *subtitleLabel;
1818

19+
@property (nonatomic, strong) UIColor *sectionColor;
20+
1921
@end
2022

2123
NS_ASSUME_NONNULL_END

0 commit comments

Comments
 (0)