iOS应用开发视频教程笔记（九）Table Views

今天讲的是TableViews，它可用于呈现动态数据列表，也可用于静态数据。

UITableView

tableView是个一维表，这是一个UIScrollView的子类，所以它是一个滚动列表。它可以高度定制化，它从它的两个不同的delegation中获取所有的定制化信息，有data source和delegate这两个不同的properties，data source负责提供表中的数据，delegate负责数据显示。如果想显示多维数据，就是有行和列，可以使用sections或者可以把它放进一个navigation controller。

这个是plain风格的tableVeiw的样子，顶部的F是section header，底部的东西是tab bar controller，和tableVeiw没关系。

这是group风格，group风格往往是为固定tableVeiw使用。

listView往往用来查询，查看动态数据。

描述plain风格的tableVeiw的各个部分的术语：

最顶上的东西叫header，那是一个UIView，可以添加到表中，它可以是任何你想要的东西。在底部有个footer，也是个UIView。这些被分组的东西叫section，蓝条叫section header，可以用字符串设置或者可以用view，表中的每个row都是一个UIView，叫这个UIView为tableVeiw cell。

使用完全相同的术语描述group风格的tableVeiw：

当有section时，建立tableVeiw并实现data source时得告诉tableVeiw有多少section，然后它会问你每个section里有多少row。

cell有四个基本显示类型：

Subtitle有粗体的标题，然后下面有灰色的副标题；basic类型就是下面没有东西；right detail和subtitle一样，只是东西的排列不同，这是侧面和蓝色的；left detail也一样，只是左右换一下。

创建TableView MVC

tableVeiw来自xcode里的一个UITableViewController类，所以ios有controller的类，然后还有view的类，把它们作为一个单元从object library里拖出来。通常不会在一个通用的UITableViewController里用这个东西，通常会子类它，让子类controller成为delegate里的data source还有实现这些方法。这就是让tableVeiw做你想做的事情。

如何创建一个新类并使这个TableViewController不是一个通用的UITableViewController？去new file点击UIViewController，接着得确保你设置你自定义的controller类的父类为tableVeiw，ios中的UITableViewController类做了一些事情来帮助你的tableVeiw挂接到你的子类，然后还要确保在storyboard，你inspect该controller的identity inspect，并设置了正确的类。

在选中cell时，可以控制出现在cell右侧的小东西即accessory，accessory为Detail Disclosure Accessory时，把蓝色小按钮连接起来的方式是你的tableVeiw delegate，你得实现这个方法：

- (void)tableView:(UITableView *)tv accessoryTappedForRowAtIndexPath:(NSIndexPath *)ip;

当有人点击蓝色小按钮，这个方法会被调用。

在做动态时，有个非常重要的区域叫做reuse identifier，你需要在代码中指定，它才知道要创建的副本的原型是什么。为什么它还需要该字符串？可能有多个场景或tableVeiw，你拖动的UITableViewController实例来自同一个自定义子类，但它们可能有不同的cell原型，因此为cell命名。通常情况下，我们会把reuse identifier用来形容这个cell是什么。

UITableViewDataSource

这一切是如何工作的？如何得到这个UI？数据是如何来回流动的？这些都是通过protocols。tableVeiw有两种不同的delegate，一个叫delegate，一个叫data source，它们都是protocols。UITableViewController类会自动设置内部tableVeiw的delegate和data source，因此当我们拖出TableViewController，它已经有一个tableVeiw了，子类controller是默认的delegate和data source。这几乎总是你使用tableVeiw的方式。为什么做这个delegation？因为view不能和它们的controller对话，除了通过不可见通讯，也就是protocol，通过protocol可以来回发消息。所以tableVeiw是这个controller的view，它只能回应target action或delegate的对话，UITableViewController有个property指向这个tableVeiw。

要成为动态的，要实现此data source protocol。那么在这个data source protocol里都有什么方法？有三个要实现的非常重要的方法，一个是表明表里有多少section，二是每个section有多少row，第三个是返回要绘制的每个row的UITableView cell。来看最后一个方法，这是该方法的的样子：

- (UITableViewCell *)tableView:(UITableView *)sender cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
   // get a cell to use (instance of UITableViewCell)
   UITableViewCell *cell;
   cell = [self.tableView dequeueReusableCellWithIdentifier:@“My Table View Cell”];
   if (!cell) { 
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
                                      reuseIdentifier:@“My Table View Cell”];
   }
   cell.textLabel.text = [self getMyDataForRow:indexPath.row inSection:indexPath.section];
   return cell;
}

tableVeiw把自己作为第一个参数传递，然后第二个参数是一个indexPath。静态的cell不用实现这个方法。NSIndexPath要做的就是封装section和row，因此它有两个属性，一个叫section，一个叫row，section会告诉你当前是什么section，row会告诉你这个是当前section里的哪个row，因此这个方法只是说，给我一个用来画这个section里的这个row的UITableView。

这个方法中的代码通常有两部分：第一部分，让自己得到一个cell，然后设置cell里的property，tableVeiw有个神奇的方法叫做dequeueReusableCellWithIdentifier，这是为了效率，tableVeiw就像一个管理这些UITableViewCell的池子，当UITableVeiw离开屏幕，它就把它们放进池子，然后其中一个需要去到屏幕上时，它就进入池中找出一个来，这就是它是如何重用它们。当它们进出屏幕，我们只是一直在重用和复位，有关重用，reuse identifier指定了要用的池子的名字，当我们做了xcode原型cell，这里我们键入它的名字，因为当你做一个xcode的原型cell，如果它到达到重用池而池子是空的，比如第一次启动的时候，它会创建一个，并用原型把它放进去，这就是原型cell的作用，当重用池是空的时候，它会填进去，只要它是空的，就由原型的副本填充。所以这个字符串必须和xcode里的一样，如果你想要填充原型的话。如果这里返回nil，会发生什么？我们没有指定与xcode中相同的字符串，因此它不能使用原型副本，所以不能得到任何东西，它返回nil。接着会放些安全代码在这，alloc/init一个cell。

接下来只要设置property，比如cell有个property叫做text label，这里写了个方法getMyDataForRow:inSection:可以用来获取字符串之类的事情。然后返回这个cell。可以有交替的cell机制，但需要两个不同的池。

在tableVeiw中要有多少section和row，它有两个简单的方法，问它的data source这个tableVeiw里有多少section和这个section里有多少row，你只要回答这些问题：

- (NSInteger)numberOfSectionsInTableView:(UITableView *)sender; 
- (NSInteger)tableView:(UITableView *)sender numberOfRowsInSection:(NSInteger)section;

通常是没有section的，也就是整体就是一个大的section。但是section里的row数量没有默认值，你必须给出section有多少row。静态表不必实现任何这些方法。

UITableViewDelegate

UITableView delegate控制如何绘制表，不是表中的数据，而是如何显示，比如像cell多高之类。常常data source和delegate是同一个对象，是这个UITableViewController，delegate有很多did/will happen方法，最重要的是它会通知你，当有人点击row的时候。

当有人点击row，我们可以做两件事：一是segueing，可以control drag一个row，甚至是prototype row，到其他东西，然后segue。如果从prototype cell处control drag，所有的cell都会做一样的事，所以我们就必须确保并根据选择的row准备segue的viewController，该cell被点击了，并得到一个delegate方法，如果不做segue或自己想做segue，就用手动segue这个方法。每当cell被点击didSelectRowAtIndexPath都会被调用，它会传递indexPath，你基于给予的信息做些什么：

 

- (void)tableView:(UITableView *)sender didSelectRowAtIndexPath:(NSIndexPath *)path {
     // go do something based on information 
     // about my data structure corresponding to indexPath.row in indexPath.section
}

 

Table View Segues

如果表有个原型cell，直接control drag到一些其他的viewController，那么会问想要什么样的segue。当你prepare for segue，所以你在做segue，prepareForSegue会被发送到你的TableViewController，你要准备segueing的东西：

 

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
     NSIndexPath *indexPath = [self.tableView indexPathForCell:sender]; 
     // prepare segue.destinationController to display based on information 
     // about my data structure corresponding to indexPath.row in indexPath.section
}

 

通常会使用indexPathForCell这个方法，因为prepareForSegue里的sender是这个cell，被点击的UITableViewCell，所以通常会调用indexPathForCell得到indexPath，基于被点击的row，去model里查找要传递的数据。

如果model改变了呢？可以调用方法reloadData，reloadData重新加载整个表，它会知道表里有多少section及每个section有多少row，它会为所有的section调用此方法，然后它会为每个可见的cell调用cellForRowAtIndexPath:方法，所以reloadData不是轻量级的。

Demo

做一个计算器的例子，主要包括：

1.在NSUserDefaults存储一个property list；

2.建立一个UITableViewController及其自定义子类；

3.实现data source protocol；

4.创建一个新的delegate，在delegate实现的地方做一件事：如果有一个popover，通过popover放一个viewController，在popover里发生了什么，它需要回过去和controller通信，它不能直接和controller通信，由于popover是view的一部分，view不能直接回应它的controller，它必须使用delegation；

5.在graph view里添加一个按钮，它要做的是拿起这个graph，把它添加到NSUserDefaults里的一个列表里；

6.在graph view里添加另一个按钮，它要使用popover segue带来了一个全新的MVC，这是一个tableVeiw驱动的MVC，就是popover里有一个表，表里是一个其他所有favorite program的列表，当你点击其中一个，它会更新graph，显示favorite graph。

CalculatorGraphViewController.m文件的代码：

#import "CalculatorGraphViewController.h"
#import "CalculatorBrain.h"
#import "CalculatorProgramsTableViewController.h"

@interface CalculatorGraphViewController() <CalculatorProgramsTableViewControllerDelegate>
@property (nonatomic, strong) UIPopoverController *popoverController; // added after lecture to prevent multiple popovers
@end

@implementation CalculatorGraphViewController

@synthesize popoverController;

#define FAVORITES_KEY @"CalculatorGraphViewController.Favorites"

- (IBAction)addToFavorites:(id)sender
{
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    NSMutableArray *favorites = [[defaults objectForKey:FAVORITES_KEY] mutableCopy];
    if (!favorites) favorites = [NSMutableArray array];
    [favorites addObject:self.calculatorProgram];
    [defaults setObject:favorites forKey:FAVORITES_KEY];
    [defaults synchronize];
}

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"Show Favorite Graphs"]) {
        // this if statement added after lecture to prevent multiple popovers
        // appearing if the user keeps touching the Favorites button over and over
        // simply remove the last one we put up each time we segue to a new one
        if ([segue isKindOfClass:[UIStoryboardPopoverSegue class]]) {
            UIStoryboardPopoverSegue *popoverSegue = (UIStoryboardPopoverSegue *)segue;
            [self.popoverController dismissPopoverAnimated:YES];
            self.popoverController = popoverSegue.popoverController; // might want to be popover's delegate and self.popoverController = nil on dismiss?
        }
        NSArray *programs = [[NSUserDefaults standardUserDefaults] objectForKey:FAVORITES_KEY];
        [segue.destinationViewController setPrograms:programs];
        [segue.destinationViewController setDelegate:self];
    }
}

- (void)calculatorProgramsTableViewController:(CalculatorProgramsTableViewController *)sender
                                 choseProgram:(id)program
{
    self.calculatorProgram = program;
    // if you wanted to close the popover when a graph was selected
    // you could uncomment the following line
    // you'd probably want to set self.popoverController = nil after doing so
    // [self.popoverController dismissPopoverAnimated:YES];
    [self.navigationController popViewControllerAnimated:YES]; // added after lecture to support iPhone
}

// added after lecture to support deletion from the table
// deletes the given program from NSUserDefaults (including duplicates)
// then resets the Model of the sender

- (void)calculatorProgramsTableViewController:(CalculatorProgramsTableViewController *)sender
                               deletedProgram:(id)program
{
    NSString *deletedProgramDescription = [CalculatorBrain descriptionOfProgram:program];
    NSMutableArray *favorites = [NSMutableArray array];
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    for (id program in [defaults objectForKey:FAVORITES_KEY]) {
        if (![[CalculatorBrain descriptionOfProgram:program] isEqualToString:deletedProgramDescription]) {
            [favorites addObject:program];
        }
    }
    [defaults setObject:favorites forKey:FAVORITES_KEY];
    [defaults synchronize];
    sender.programs = favorites;
}

@end

在storyboard中拖出TableViewController，接着创建一个自定义子类，这是一个UITableViewController子类，叫做CalculatorProgramsTableViewController，接下来在storyboard里去到identity inspector为TableViewController指定类为CalculatorProgramsTableViewController。

创建一个按钮segue到TableViewController，拖出一个barButton到graphView，然后从它control drag到TableViewController，选择popover segue，设置它的identifier为Show Favorite Graphs。

在自定义的TableViewController里面，设置cell属性，将style修改为basic，将identifier设为Calculator Program Description。如果不希望TableViewController出现在popover时太大，需要选中这个controller，使popover属性是200x200。

delegation的5个步骤：

1.创建protocol，是会被用来描述protocol，还有要干嘛；

2.添加property，不管是data source或delegate，通常都在公共接口里；

3.在delegator的实现内部使用这个delegate property，它需要那里的信息或它要和其他对象通信；

4.要在delegate里设置delegate property，是delegate而不是delegator，是接收这些消息的人；

5.它需要设置自己为delegate，它需要实现protocol里它需要的方法。

CalculatorProgramsTableViewController.h文件的代码：

#import <UIKit/UIKit.h>

@class CalculatorProgramsTableViewController;

@protocol CalculatorProgramsTableViewControllerDelegate <NSObject> // added <NSObject> after lecture so we can do respondsToSelector: on the delegate
@optional
- (void)calculatorProgramsTableViewController:(CalculatorProgramsTableViewController *)sender
                                 choseProgram:(id)program;
- (void)calculatorProgramsTableViewController:(CalculatorProgramsTableViewController *)sender
                                 deletedProgram:(id)program; // added after lecture to support deleting from table
@end

@interface CalculatorProgramsTableViewController : UITableViewController
@property (nonatomic, strong) NSArray *programs; // of CalculatorBrain programs
@property (nonatomic, weak) id <CalculatorProgramsTableViewControllerDelegate> delegate;
@end

CalculatorProgramsTableViewController.m文件的代码：

#import "CalculatorProgramsTableViewController.h"
#import "CalculatorBrain.h"

@implementation CalculatorProgramsTableViewController

@synthesize programs = _programs;
@synthesize delegate = _delegate;

// added after lecture to be sure table gets reloaded if Model changes
// you should always do this (i.e. reload table when Model changes)
// the Model getting out of synch with the contents of the table is bad

- (void)setPrograms:(NSArray *)programs
{
    _programs = programs;
    [self.tableView reloadData];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

#pragma mark - UITableViewDataSource

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Calculator Program Description";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    id program = [self.programs objectAtIndex:indexPath.row];
    cell.textLabel.text = [@"y = " stringByAppendingString:[CalculatorBrain descriptionOfProgram:program]];
    
    return cell;
}

// this method added after lecture to support deletion
// simply delegates deletion

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        id program = [self.programs objectAtIndex:indexPath.row];
        [self.delegate calculatorProgramsTableViewController:self deletedProgram:program];
    }
}

// added after lecture
// don't allow deletion if the delegate does not support it too!

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [self.delegate respondsToSelector:@selector(calculatorProgramsTableViewController:deletedProgram:)];
}

#pragma mark - UITableViewDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    id program = [self.programs objectAtIndex:indexPath.row];
    [self.delegate calculatorProgramsTableViewController:self choseProgram:program];
}

@end