UI 一一 UITableView(plain) 一 实现索引条滚动
程序员文章站
2022-06-01 10:24:07
...
效果如下:
实现这种滚动效果,且点击索引条,直接跳转到对应的位置.
实现思路:
(1)首先通过storyboard创建一个UITableView视图并且和控制器建立联系(不要设置style为组)。
(2)导入用到的素材图片和plist文件。
(3)建立ZYCar的数据模型
(4)建立ZYCarGroup数据模型
(5)进行相应的字典转模型操作
(6)在控制器中遵守数据源协议,设置数据源对象,实现数据源方法。
这个思路在前面博客中已经写到.具体可以参考,这里要实现索引条功能,需要在实现一个数据源方法:
- (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView
设置索引条的相关属性
// 设置索引条的颜色
self.tableView.sectionIndexColor = [UIColor redColor];
// 设置索引条的背景颜色
self.tableView.sectionIndexBackgroundColor = [UIColor grayColor];
代码如下:
ZYCar(车数据模型)文件:
#import <Foundation/Foundation.h>
@interface ZYCar : NSObject
/**
* 图标
*/
@property (nonatomic ,copy)NSString * icon;
/**
* 名称
*/
@property (nonatomic ,copy)NSString * name;
+ (instancetype)carWithDict :(NSDictionary *)dict;
@end
@implementation ZYCar
+ (instancetype)carWithDict:(NSDictionary *)dict
{
ZYCar *car = [[self alloc] init];
car.icon = dict[@"icon"];
car.name = dict[@"name"];
return car;
}
@end
ZYCarGroup(车组数据模型)文件
@interface ZYCarGroup : NSObject
/**
* 这一组所有的车(ZYCar)
*/
@property(nonatomic ,strong)NSArray *cars;
/**
* 这一组的头部标题
*/
@property (nonatomic ,copy)NSString * title;
+ (instancetype)carGroupWithDict: (NSDictionary *)dict;
@end
#import "ZYCar.h"
@implementation ZYCarGroup
+ (instancetype)carGroupWithDict:(NSDictionary *)dict
{
ZYCarGroup *group = [[self alloc] init];
group.title = dict[@"title"];
NSMutableArray *tempArray = [NSMutableArray array];
for (NSDictionary *carDict in dict[@"cars"]) {
ZYCar *carModel = [ZYCar carWithDict : carDict];
// 把car模型都放到可变数组中
[tempArray addObject:carModel];
}
group.cars = tempArray;
return group;
}
@end
ViewController.m 文件
@interface ViewController : UITableViewController
@end
#import "ViewController.h"
#import "ZYCarGroup.h"
#import "ZYCar.h"
@interface ViewController ()
@property (nonatomic,strong)NSArray *carGroups;
@end
@implementation ViewController
// 懒加载
- (NSArray *)carGroups
{
if (_carGroups == nil) {
//1. 加载字典数组
NSString *path = [[NSBundle mainBundle]pathForResource:@"cars.plist" ofType:nil];
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
//2. 字典数组->模型数组
NSMutableArray *temp = [NSMutableArray array];
for (NSDictionary *carGroupDict in dictArray) {
[temp addObject:[ZYCarGroup carGroupWithDict:carGroupDict]];
}
_carGroups = temp;
}
return _carGroups;
}
- (void)viewDidLoad {
[super viewDidLoad];
// 设置索引条的颜色
self.tableView.sectionIndexColor = [UIColor redColor];
// 设置索引条的背景颜色
self.tableView.sectionIndexBackgroundColor = [UIColor grayColor];
}
// 隐藏状态栏
- (BOOL)prefersStatusBarHidden
{
return YES;
}
#pragma -mark 数据源方法
// 有多少组数据
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.carGroups.count;
}
// 每一组中有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
ZYCarGroup *group = self.carGroups[section];
return group.cars.count;
}
// 每一行有什么内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//1. 设置标识,访问缓存池
static NSString *ID = @"car";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
//2. 缓存池中没有,自己创建
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
//3. 设置数据
ZYCarGroup *group = self.carGroups[indexPath.section];
ZYCar *car = group.cars[indexPath.row];
cell.imageView.image = [UIImage imageNamed:car.icon];
cell.textLabel.text = car.name;
return cell;
}
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
ZYCarGroup *group = self.carGroups[section];
return group.title;
}
/**
返回索引条的文字
*/
- (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
// // 遍历所有的组模型
// NSMutableArray *titles = [NSMutableArray array];
// for (ZYCarGroup *group in self.carGroups) {
// [titles addObject:group.title];
// }
// return titles;
// 抽取self.carGroups这个数组的每一个元素(ZYCarGroup对象)的title属性的值\
放在一个新的数组中返回
return [self.carGroups valueForKey:@"title"];
}
@end
注意: 这里面字典转模型,要转两次.虽然有点小复杂,但是后续会学到第三方框架.字典转模型,会非常方便