UI 一一 UITableView(plain) 一 实现索引条滚动

效果如下:

实现这种滚动效果,且点击索引条,直接跳转到对应的位置.

实现思路:

（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

 

注意: 这里面字典转模型,要转两次.虽然有点小复杂,但是后续会学到第三方框架.字典转模型,会非常方便