欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-01 10:24:07
...

效果如下:

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

 

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

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