一种带索引城市选择器的设计

版本记录

版本号	时间
V1.0	2017.04.12

前言

很多时候我们都需要城市索引列表。做法有很多，下面我就说一下我做的一种按照第一个汉字字母排序的城市列表，看下面的gif图。

城市选择器

详细设计

先看一下文档组织结构。

Snip20170412_1.png

下面看详细代码

1. AppDelegate.m

#import "AppDelegate.h"
#import "JJCityListDisplayVC.h"

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    JJCityListDisplayVC *cityListVC = [[JJCityListDisplayVC alloc] init];
    self.window.rootViewController = cityListVC;
    [self.window makeKeyAndVisible];
    return YES;
}


- (void)applicationWillResignActive:(UIApplication *)application {
    
}


- (void)applicationDidEnterBackground:(UIApplication *)application {
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}


- (void)applicationWillEnterForeground:(UIApplication *)application {
    // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
}


- (void)applicationDidBecomeActive:(UIApplication *)application {
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}


- (void)applicationWillTerminate:(UIApplication *)application {

}

@end

2. JJCityListDisplayVC.m

#import "JJCityListDisplayVC.h"
#import "JJCityListDisplayView.h"

@interface JJCityListDisplayVC ()

@end

@implementation JJCityListDisplayVC

- (void)viewDidLoad {
    [super viewDidLoad];
    
    JJCityListDisplayView *cityDisplayView = [[JJCityListDisplayView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:cityDisplayView];
}

@end

3. JJCityListDisplayView.m

#import "JJCityListDisplayView.h"

static NSString *cellReuseIdentify = @"cellReuseIdentify";

@interface JJCityListDisplayView () 

@property (nonatomic, strong) NSDictionary *cityListDict;
@property (nonatomic, strong) NSArray *keyArr;
@property (nonatomic, strong) UITableView *cityTableView;

@end

@implementation JJCityListDisplayView

#pragma mark - Override Base Function

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self loadCityData];
        [self setupUI];
    }
    return self;
}

- (void)layoutSubviews
{
    self.cityTableView.frame = self.frame;
}

#pragma mark - Object Private Function

- (void)loadCityData
{
    NSURL *cityPlistURL = [[NSBundle mainBundle] URLForResource:@"cityList.plist" withExtension:nil];
    self.cityListDict = [NSDictionary dictionaryWithContentsOfURL:cityPlistURL];
}

- (void)setupUI
{
    self.cityTableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
    [self.cityTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:cellReuseIdentify];
    self.cityTableView.delegate = self;
    self.cityTableView.dataSource = self;
    [self addSubview:self.cityTableView];
    
    self.keyArr = self.cityListDict.allKeys;
    self.keyArr = [self.keyArr sortedArrayUsingSelector:@selector(compare:)];
}

#pragma mark - UITableViewDelegate & UITableViewDataSource

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.keyArr.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.cityListDict[self.keyArr[section]] count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellReuseIdentify forIndexPath:indexPath];
    
    NSString *key = self.keyArr[indexPath.section];
    NSArray *cityArr = self.cityListDict[key];
    cell.textLabel.text = cityArr[indexPath.row];
    
    return cell;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    if (section == 0 || section == self.keyArr.count - 1) {
        return nil;
    }
    else {
        return self.keyArr[section];
    }
}

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    NSMutableArray *arrM = [NSMutableArray arrayWithArray:self.keyArr];
    [arrM exchangeObjectAtIndex:0 withObjectAtIndex:self.keyArr.count - 1];
    return arrM.copy;
}

@end

结果就不多说了，所有的效果gif图上都已经展现了。

后记

这次写的比较简单，就是一个小玩意，是最近太忙了，写复杂的东西时间有点不够了，最近我也正在翻译别的语言。还是那句话，多谢大家的支持吧。谢谢。