Navigation Controllers and Table Views（中）

Navigation Controllers and Table Views（中）

这篇内容我们继续上一篇的例子接着做下去，为其再添加3个table view的例子，有了之前的基础，学习下面的例子会变得很简单，很多东西都是举一反三，稍稍有些不同的内容，好了，闲话少说，开始这次的学习。

如果没有上一篇的代码，可以从这里下载Nav_1

1）第三个subtableview：Controls on Table Rows
这个例子，我们将为每个table view的每一行添加一个按钮，这个按钮将放在accessory icon的位置（之前我们使用过accessoryType，其实这也是一个view，可以容纳其他的view，因此我们将一个button放在其中，然后accessory icon的位置上就会显示button了，看了后面的例子就会明白）

同样，选中Project navigator中的Nav文件夹，单击鼠标右键，选择“New File...”，在弹出的窗口中，左边选择Cocoa Touch，右边选择Objective-C class，点击Next按钮，在下一个窗口中将class命名为BIDRowControlsController，Subclass of命名为BIDSecondLevelViewController，点击Next按钮，完成创建。

打开BIDRowControlsController.h，添加如下代码

#import "BIDSecondLevelViewController.h"

@interface BIDRowControlsController : BIDSecondLevelViewController

@property (strong, nonatomic) NSArray *list; - (IBAction)buttonTapped:(id)sender; @end

list用户保存table view中每一行显示的数据，buttonTapped事件用于按钮的触发，大家也可以猜到，会是一个警告框弹出。（严格的来说这里不指定IBAction也可以，因为我们并没有创建nib，也不会拖一个button到nib上面然后与其关联，定义一个普通的没有返回值的方法即可，但是书里面还是推荐使用IBAction关键词，这样可以方面代码的阅读，可以知道这个方法是用于被某个控件触发的。楼主木有试过这个方法，大家可以试试看，哈哈）

打开BIDRowControlsController.m，添加如下代码

#import "BIDRowControlsController.h"

@implementation BIDRowControlsController

@synthesize list; - (IBAction)buttonTapped:(id)sender { UIButton *senderButton = (UIButton *)sender; UITableViewCell *buttonCell = (UITableViewCell *)[senderButton superview]; NSUInteger buttonRow = [[self.tableView indexPathForCell:buttonCell] row]; NSString *buttonTitle = [list objectAtIndex:buttonRow]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"You tapped the button" message:[NSString stringWithFormat:@"You tapped the button for %@", buttonTitle] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; } - (void)viewDidLoad { [super viewDidLoad]; NSArray *array = [[NSArray alloc] initWithObjects:@"R2-D2", @"C3PO", @"Tik-Tok", @"Robby", @"Rosie", @"Uniblab", @"Bender", @"Marvin", @"Lt. Commander Data", @"Evil Brother Lore", @"Optimus Prime", @"Tobor", @"HAL", @"Orgasmatron", nil]; self.list = array; } - (void)viewDidUnload { [super viewDidUnload]; self.list = nil; }

这里添加了很常见的viewDidLoad和viewDidUnload，并且实现了buttonTapped方法，稍微解释一下buttonTapped方法：
UIButton *senderButton = (UIButton *)sender; // 根据sender参数来确定是哪个button触发了该事件，然后根据button所在的
UITableViewCell *buttonCell = (UITableViewCell *)[senderButton superview]; // 获得button的superview，因为该button是在某一个的table cell上，因此它的superview就是UITableViewCell，因此这里可以强制的将button的superview转换成UITableViewCell对象
NSUInteger buttonRow = [[self.tableView indexPathForCell:buttonCell] row]; // 根据获得的table cell得到indexPath，再根据indexPath获得button具体在第几行
NSString *buttonTitle = [list objectAtIndex:buttonRow]; // 有第几行，就可以在list中找到对应的字符串了

接着添加table data source方法，添加如下代码

#pragma mark -
#pragma mark Table Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [list count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *ControlRowIdentifier = @"ControlRowIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ControlRowIdentifier]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ControlRowIdentifier]; UIImage *buttonUpImage = [UIImage imageNamed:@"button_up.png"]; UIImage *buttonDownImage = [UIImage imageNamed:@"button_down.png"]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0.0, 0.0, buttonUpImage.size.width, buttonUpImage.size.height); [button setBackgroundImage:buttonUpImage forState:UIControlStateNormal]; [button setBackgroundImage:buttonDownImage forState:UIControlStateHighlighted]; [button setTitle:@"Tap" forState:UIControlStateNormal]; [button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside]; cell.accessoryView = button; } NSUInteger row = [indexPath row]; NSString *rowTitle = [list objectAtIndex:row]; cell.textLabel.text = rowTitle; return cell; }

这2个方法也见了很多次了，对tableview:cellForRowAtIndexPath中的一些内容进行解释：
UIImage *buttonUpImage = [UIImage imageNamed:@"button_up.png"]; // 载入button弹起状态时的图片
UIImage *buttonDownImage = [UIImage imageNamed:@"button_down.png"]; // 载入button按下时的图片
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; // 创建一个button，这里没有使用一般的创建方法[UIButton alloc]，原因是如果使用了这样的方法创建button，之中对这个button的外观、文字等就不能进行修改了，因此我们使用buttonWithType，并选择UIButtonTypeCustom，自定义button外观
button.frame = CGRectMake(0.0, 0.0, buttonUpImage.size.width, buttonUpImage.size.height); // 定义button的大小
[button setBackgroundImage:buttonUpImage forState:UIControlStateNormal]; // 用一张图片设置button弹起时的状态
[button setBackgroundImage:buttonDownImage forState:UIControlStateHighlighted]; // 用另一张图片设置button按下时的状态
[button setTitle:@"Tap"forState:UIControlStateNormal]; // 设置button的文字
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside]; // 为button添加事件，分2部分，首先是触发哪个事件，另一个是在什么情况下触发，这里设置的触发的事件是buttonTapped（IBAction类型，这是为什么刚才说不适用IBAction关键词也可以，因为我们使用代码的方式为button制定了触发的方法，因此不用IBAction），当手指在button内部弹起时才会触发buttonTapped事件。
cell.accessoryView = button; // 在table cell的accessoryView的位置放置button

添加table的delegate方法，代码如下

#pragma mark -
#pragma mark Table Delegate Methods
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; NSString *rowTitle = [list objectAtIndex:row]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"You tapped the row." message:[NSString stringWithFormat:@"You tapped %@.", rowTitle] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; [tableView deselectRowAtIndexPath:indexPath animated:YES]; }

这个方法的实现之前也见过，就对最后一句话解释一下：
[tableView deselectRowAtIndexPath:indexPath animated:YES]; // 当点击table view中的一行时，该行的背景色会变蓝，这句话的作用就是使其恢复成原来未选择时的状态

最后打开BIDFirstLevelController.m，添加如下代码

#import "BIDFirstLevelController.h"
#import "BIDSecondLevelViewController.h"
#import "BIDDisclosureButtonController.h"
#import "BIDCheckListController.h"
#import "BIDRowControlsController.h"

@implementation BIDFirstLevelController
@synthesize controllers;

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"First Level";
    NSMutableArray *array = [[NSMutableArray alloc] init];
    
    // Disclosure Button
    BIDDisclosureButtonController *disclosureButtonController = [[BIDDisclosureButtonController alloc] initWithStyle:UITableViewStylePlain];
    disclosureButtonController.title = @"Disclosure Buttons";
    disclosureButtonController.rowImage = [UIImage imageNamed:@"disclosureButtonControllerIcon.png"];
    [array addObject:disclosureButtonController];
    
    // Checklist
    BIDCheckListController *checkListController = [[BIDCheckListController alloc] initWithStyle:UITableViewStylePlain];
    checkListController.title = @"Check One";
    checkListController.rowImage = [UIImage imageNamed:@"checkmarkControllerIcon.png"];
    [array addObject:checkListController];
    
    // Row Controls
    BIDRowControlsController *rowControlsController = [[BIDRowControlsController alloc] initWithStyle:UITableViewStylePlain]; rowControlsController.title = @"Row Controls"; rowControlsController.rowImage = [UIImage imageNamed:@"rowControlsIcon.png"]; [array addObject:rowControlsController];
    
    self.controllers = array;
}

这里就不解释了，和之前的一样。

编译运行，效果如下

多了最下面的Row Controls，我们点击改行

每一个cell都有一个我们刚才定义的button在上面

我们点击button，显示效果如下

我们点击行，显示效果如下

这个例子就如此简单的完成了，我们接着下一个例子。

2）第四个subtableview：Movable Rows 
这个例子是用来说明如何移动table view中的每一行，可以对其重新进行排序，在table view中有一个现成的方法叫做setEditing:animated，用于设置table view的内容是否可以进行编辑（edit）、删除（delete）、插入（insert），如果我们要对table view中的内容进行操作，我们必须设置其为true，否则table view是不能进行编辑的。这个例子中，我们将对table view中的行进行操作，因此一定要设置其为true。废话不多说，看来下面的例子就会更加清楚，好，现在开始这个例子。

选中Project navigator中的Nav文件夹，单击鼠标右键，选择“New File...”，在弹出的窗口中，左边选择Cocoa Touch，右边选择Objective-C class，点击Next按钮，在下一个窗口中将class命名为BIDMoveMeController，Subclass of命名为BIDSecondLevelViewController，点击Next按钮，完成创建。

打开BIDMoveMeController.h，添加如下代码

@interface BIDMoveMeController : BIDSecondLevelViewController

@property (strong, nonatomic) NSMutableArray *list; - (IBAction)toggleMove; @end

list用于保存数据，这里声明的类型是NSMutableArray，因为我们要对table view中的行进行移动，因此list的内容会发生变化，因此需要一个可变的Array。toggleMove方法用于打开/关闭table view的编辑模式。

打开BIDMoveMeController.m，添加如下代码

#import "BIDMoveMeController.h"

@implementation BIDMoveMeController

@synthesize list; - (IBAction)toggleMove { [self.tableView setEditing:!self.tableView.editing animated:YES]; if(self.tableView.editing) [self.navigationItem.rightBarButtonItem setTitle:@"Done"]; else [self.navigationItem.rightBarButtonItem setTitle:@"Move"]; } - (void)viewDidLoad { [super viewDidLoad]; if (list == nil) { NSMutableArray *array = [[NSMutableArray alloc] initWithObjects: @"Eeny", @"Meeny", @"Miney", @"Moe", @"Catch", @"A", @"Tiger", @"By", @"The", @"Toe", nil]; self.list = array; } UIBarButtonItem *moveButton = [[UIBarButtonItem alloc] initWithTitle:@"Move" style:UIBarButtonItemStyleBordered target:self action:@selector(toggleMove)]; self.navigationItem.rightBarButtonItem = moveButton; }

先说一下toggleMove，这个方法是给navigator bar上右边的按钮调用的，
[self.tableView setEditing:!self.tableView.editing animated:YES]; // 通过self.tableView.editing属性安排当前table view的状态是不是处于编辑模式，如果是，则变回非编辑模式，如果不是，则进入编辑模式
if(self.tableView.editing) // 如果是编辑模式
    [self.navigationItem.rightBarButtonItem setTitle:@"Done"]; // 设置navigator上右边的按钮文字为“Done”
else // 如果不是编辑模式
    [self.navigationItem.rightBarButtonItem setTitle:@"Move"]; // 设置navigator上右边的按钮文字为“Move”

在viewDidLoad方法中，我们创建了一个button（moveButton），然后将该button赋给navigator上右边的按钮。

大家有没有注意到这里我们没有定义viewDidUnload？我们在viewDidLoad中，也没有每次都对list进行创建，而是判断list是否为nil，如果是，则生成list。我们为什么要这么做呢？一个很重要的原因是之后我们将对list中的内容进行排序，如果每次都生成新的list，那么我们刚刚排好序的list就会丢失，这个是我们不希望发生的，因此我们在这里就不对list反复的进行创建了。

好，接着添加如下代码

#pragma mark -
#pragma mark Table Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [list count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *MoveMeCellIdentifier = @"MoveMeCellIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MoveMeCellIdentifier]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MoveMeCellIdentifier]; cell.showsReorderControl = YES; } NSUInteger row = [indexPath row]; cell.textLabel.text = [list objectAtIndex:row]; return cell; }

在tableView:cellForRowAtIndexPath中，有一句新的代码：
cell.showsReorderControl = YES; // 它的作用是显示reorder的控件（重新排序的控件），比较奇怪的是我试过把这句话注释掉，但是哪个排序控件依然出现，不知道为什么。

接着添加代码

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath { return UITableViewCellEditingStyleNone; } - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath { NSUInteger fromRow = [fromIndexPath row]; NSUInteger toRow = [toIndexPath row]; id object = [list objectAtIndex:fromRow]; [list removeObjectAtIndex:fromRow]; [list insertObject:object atIndex:toRow]; }

上面3个方法都是第一次看见，第一个方法tableView:editingStyleForRowAtIndexPath用于制定tableview是否可以进行删除或者插入操作，在这里我们仅仅是进行排序，所以返回的对象是UITableViewCellEditingStyleNone。第二个方法tableView:canMoveRowAtIndexPath，指定是否可以移动行。最后一个方法tableView:moveRowAtIndexPath是移动行后进行操作的方法，记录一行的起始位置和终点，然后在list中把先备份一下起始位置的值，然后删除，最后再终点位置插入备份值，ok，完成移动操作。怎么样，还是很直接和简单的吧。

打开BIDFirstLevelController.m，添加最后的代码

#import "BIDFirstLevelController.h"
#import "BIDSecondLevelViewController.h"
#import "BIDDisclosureButtonController.h"
#import "BIDCheckListController.h"
#import "BIDRowControlsController.h"
#import "BIDMoveMeController.h"

@implementation BIDFirstLevelController
@synthesize controllers;

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"First Level";
    NSMutableArray *array = [[NSMutableArray alloc] init];
    
    // Disclosure Button
    BIDDisclosureButtonController *disclosureButtonController = [[BIDDisclosureButtonController alloc] initWithStyle:UITableViewStylePlain];
    disclosureButtonController.title = @"Disclosure Buttons";
    disclosureButtonController.rowImage = [UIImage imageNamed:@"disclosureButtonControllerIcon.png"];
    [array addObject:disclosureButtonController];
    
    // Checklist
    BIDCheckListController *checkListController = [[BIDCheckListController alloc] initWithStyle:UITableViewStylePlain];
    checkListController.title = @"Check One";
    checkListController.rowImage = [UIImage imageNamed:@"checkmarkControllerIcon.png"];
    [array addObject:checkListController];
    
    // Row Controls
    BIDRowControlsController *rowControlsController = [[BIDRowControlsController alloc] initWithStyle:UITableViewStylePlain];
    rowControlsController.title = @"Row Controls";
    rowControlsController.rowImage = [UIImage imageNamed:@"rowControlsIcon.png"];
    [array addObject:rowControlsController];
    
    // Move Me
    BIDMoveMeController *moveMeController = [[BIDMoveMeController alloc] initWithStyle:UITableViewStylePlain]; moveMeController.title = @"Move Me"; moveMeController.rowImage = [UIImage imageNamed:@"moveMeIcon.png"]; [array addObject:moveMeController];
    
    self.controllers = array;
}

编译运行

进入Move Me后

点击navigator上右边的Move按钮

按钮的文字变成了“Done”，然后tableview中每一行的右边都出现了一个reorder的图标，将手指放在上面逗留一会，你点中的那一行会“浮起”，接着你就可以随意移动了，移到你想要的地方后放手即可。

3）第五个subtableview：Deletable Rows 
这个例子展示的是如何删除table view中的行，这次我们不再在viewDidLoad中对table view的内容进行定义，而是从外部的一个文件进行导入，首先下载这里的computers.plist.zip，解压缩后拖入到Project navigator下的Nav文件夹下

好，下面可以开始添加新的文件了，选中Project navigator中的Nav文件夹，单击鼠标右键，选择“New File...”，在弹出的窗口中，左边选择Cocoa Touch，右边选择Objective-C class，点击Next按钮，在下一个窗口中将class命名为BIDDeleteMeController，Subclass of命名为BIDSecondLevelViewController，点击Next按钮，完成创建。

打开BIDDeleteMeController.h文件，添加如下代码

#import "BIDSecondLevelViewController.h"

@interface BIDDeleteMeController : BIDSecondLevelViewController

@property (strong, nonatomic) NSMutableArray *list; - (IBAction)toggleEdit:(id)sender; @end

应该可以想到，我们肯定要声明一个NSMutableArray，因为需要删除其中的项，toggleEdit方法用于table view状态的切换。

打开BIDDeleteMeController.m文件，添加如下代码

#import "BIDDeleteMeController.h"

@implementation BIDDeleteMeController

@synthesize list; - (IBAction)toggleEdit:(id)sender { [self.tableView setEditing:!self.tableView.editing animated:YES]; if(self.tableView.editing) [self.navigationItem.rightBarButtonItem setTitle:@"Done"]; else [self.navigationItem.rightBarButtonItem setTitle:@"Delete"]; } - (void)viewDidLoad { [super viewDidLoad]; if(list == nil) { NSString *path = [[NSBundle mainBundle] pathForResource:@"computers" ofType:@"plist"]; NSMutableArray *array = [[NSMutableArray alloc] initWithContentsOfFile:path]; self.list = array; } UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithTitle:@"Delete" style:UIBarButtonItemStyleDone target:self action:@selector(toggleEdit:)]; self.navigationItem.rightBarButtonItem = editButton; }

应该不会觉得有看不懂的地方吧，和之前的一个例子是一样的，那么就接着添加代码吧

#pragma mark -
#pragma mark Table Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [list count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *DeleteMeCellIdentifier = @"DeleteMeCellIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:DeleteMeCellIdentifier]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:DeleteMeCellIdentifier]; } NSInteger row = [indexPath row]; cell.textLabel.text = [list objectAtIndex:row]; return cell; }

额~~~貌似也不用解释，好吧，就不解释了，继续添加代码

#pragma mark -
#pragma mark Table View Data Source Methods
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; [self.list removeObjectAtIndex:row]; [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationAutomatic]; }

这是一个新的方法，第一次使用，当用户要删除table view中的一行或者进行插入操作时，会触发该方法。其中第二个参数有三个值，分别是：
UITableViewCellEditingStyleNone：什么操作都不执行（这个值在上一个例子中使用过）
UITableViewCellEditingStyleDelete：删除操作
UITableViewCellEditingStyleInsert：插入操作

这个方法里面的具体代码还是很好理解的，都不多做解释了。

打开BIDFirstLevelController.m，添加最后的代码

#import "BIDFirstLevelController.h"
#import "BIDSecondLevelViewController.h"
#import "BIDDisclosureButtonController.h"
#import "BIDCheckListController.h"
#import "BIDRowControlsController.h"
#import "BIDMoveMeController.h"
#import "BIDDeleteMeController.h"

@implementation BIDFirstLevelController
@synthesize controllers;

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"First Level";
    NSMutableArray *array = [[NSMutableArray alloc] init];
    
    // Disclosure Button
    BIDDisclosureButtonController *disclosureButtonController = [[BIDDisclosureButtonController alloc] initWithStyle:UITableViewStylePlain];
    disclosureButtonController.title = @"Disclosure Buttons";
    disclosureButtonController.rowImage = [UIImage imageNamed:@"disclosureButtonControllerIcon.png"];
    [array addObject:disclosureButtonController];
    
    // Checklist
    BIDCheckListController *checkListController = [[BIDCheckListController alloc] initWithStyle:UITableViewStylePlain];
    checkListController.title = @"Check One";
    checkListController.rowImage = [UIImage imageNamed:@"checkmarkControllerIcon.png"];
    [array addObject:checkListController];
    
    // Row Controls
    BIDRowControlsController *rowControlsController = [[BIDRowControlsController alloc] initWithStyle:UITableViewStylePlain];
    rowControlsController.title = @"Row Controls";
    rowControlsController.rowImage = [UIImage imageNamed:@"rowControlsIcon.png"];
    [array addObject:rowControlsController];
    
    // Move Me
    BIDMoveMeController *moveMeController = [[BIDMoveMeController alloc] initWithStyle:UITableViewStylePlain];
    moveMeController.title = @"Move Me";
    moveMeController.rowImage = [UIImage imageNamed:@"moveMeIcon.png"];
    [array addObject:moveMeController];
    
    // Delete Me
    BIDDeleteMeController *deleteMeController = [[BIDDeleteMeController alloc] initWithStyle:UITableViewStylePlain]; deleteMeController.title = @"Delete Me"; deleteMeController.rowImage = [UIImage imageNamed:@"deleteMeIcon.png"]; [array addObject:deleteMeController];
    
    self.controllers = array;
}

编译运行

选择Delete Me进入

点击右上角的Delete按钮

点击左边的红圈，出现删除按钮

点击Delete按钮，删除改行

再次点击右上角的Done，还原

另外一种产用的删除方法，直接在某一行上划一下，出现Delete按钮，删除

4）总结
好了，这篇三个例子的讲解就到此为止，对table view各个方面的属性进行说明，都是一些很常见的操作，以后在开发app的时候也一定会使用到这些常用的功能。希望各位能够看懂，也再次感谢给我留言的每一位朋友，你们是我继续写下去的动力！

Nav_2

 

 

 

 

 

 

 

 

分类:  IOS