创建简单表视图

http://blog.sina.com.cn/s/blog_5a6efa3301012rx1.html //[]->=->release三部曲

创建简单表视图

主要介绍表示图的建立，数据源和委托等一些简单的方法。

1.新建Empty Application，命名SimpleTable

2.新建UIviewController subclass，取名SimpleTableViewController，并选中创建xib文件。

3.接下来在SimpleTableViewController.xib中布局，拖动一个TableView到Objects中，使其成为View的子视图。很明显，这里就是我们要构建子视图的地方啦。如何把这个子视图添加到window中去呢？我们看到在SimpleTableAppDelegate中已经建立了一个table，现在我们需要在此添加一个输出口来实例化我们在interface builder总布置的表视图。

//  SimpleTableAppDelegate.h

#import <UIKit/UIKit.h>

@class SimpleTableViewController;

@interface SimpleTableAppDelegate : UIResponder <UIApplicationDelegate>{

    IBOutlet SimpleTableViewController *viewController;

}

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) IBOutlet SimpleTableViewController *viewContrller;

@end

 

 

//  SimpleTableAppDelegate.m

#import "SimpleTableAppDelegate.h"

#import "SimpleTableViewController.h"//导入所需类的头文件

@implementation SimpleTableAppDelegate

@synthesize window = _window;

@synthesize viewContrller = _viewContrller;//setter和getter,养成在这里加下划线的好习惯吧

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // Override point for customization after application launch.

    SimpleTableViewController *simpleTableviewContrller=[[SimpleTableViewControlleralloc]initWithNibName:@"SimpleTableViewController" bundle:nil];//实例视图

    _viewContrller=simpleTableviewContrller;

    self.window.backgroundColor = [UIColor whiteColor];

    self.window.rootViewController=_viewContrller;//把刚才实例的SimpleTableViewController作为根视图

   [simpleTableviewContrller release];

    [self.window makeKeyAndVisible];

    return YES;

}

……

现在你可以使者运行一下，应该可以看到一个空的表啦。（中间用横线分割了很多段）

 

3.这里的表是空的，那如何给表添加内容呢？

其实表视图本身就包含了委托和数据源两个协议：UITableViewDelegate, UITableViewDataSource

那我们现在就把这两个协议写给SimpleTableViewController吧。

//  SimpleTableViewController.h

#import <UIKit/UIKit.h>

@interface SimpleTableViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>{

    NSArray *listData;

}

@property (strong, nonatomic) NSArray *listData;

@end

我们这里使用数组作为表示图的数据源。

 

//  Simple_TableViewController.m

#import "Simple_TableViewController.h"

@implementation Simple_TableViewController

@synthesize listData;

 

……

 

//首先实例一个数组作为数据源使用，它应该在视图加载完毕后执行

- (void)viewDidLoad

{

    NSArray *array=[[NSArray alloc] initWithObjects:@"Sleepy", @"Sneezy", @"Bashful",@"Happy", @"Grumpy", @"Dopey", @"Thorin", @"Dorin", @"Nori", @"Ori", @"Balin", @"Dwalin",@"Fili", @"Kili", @"Oin", @"Gloin", @"Bofur", @"Bombur", nil];

    self.listData=array;

   [array release];

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

}

 

表视图从其结构来看，应该遵循表-分区-行这样的结构。这里我们能只创建一个分区，所以不用调用分区的方法（如果多个分区，那可就要调用啦），但是行是一定要说明的。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return [self.listData count];//返回一个NsInterger作为行数

}

现在我们已经知道了行数就是我们刚才建立的那个数组的长度。但是我们怎么告诉每一行显示什么内容呢？那就要用到以下的一个方法了，大致的模式如下：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];

    if(cell==nil){

        cell =  [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier];

    }

现在已经有行单元了，我们需要对这个行单元的一些属性进行设置，如图片，文本等，最后我们

return cell;

即可。

以我们现在的例子来看，源代码如下：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];

    if(cell==nil){

        cell =  [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier];

    }

    

    NSUInteger row = [indexPath row];

    cell.textLabel.text = [listData objectAtIndex:row];

    return cell;

}

以上这两个方法都是TableViewDataSource协议里的方法。

4.好啦，到这里，你是不是觉得已经完成了呢？那就运行一遍。还是空表，怎么回事呢？嗯，我们定义了表的数据源，但是表视图并不知道我们在哪里定义了啊。所以，我们要告诉表示图其dataSource（即以上两个方法（当然如果还有其他的一些方法））在哪里定义了。这个例子中我们是写在SimpleTableViewController中的，所以，理所当然，我们在SimpleTableViewController.xib中需要把表示图连接到File’s Owner：

具体的操作是按住ctrl同时拖动Table View到File’s Owner两次，分别连接到dataSource和delegate。

现在运行一遍，嗯，可以啦。

 

5.下面继续介绍TableViewDelegate协议里的方法

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    return indexPath;

}

@end

这里这个方法是在你点击某个视图单元时表示图用来判断你是否你选中你点击的表图单元。上面这一段你即使不写都可以的，因为默认就是每个表图单元都可以选中的。但是如果你要使某个单元选不中，那就要加点料啦。例如这样：

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    NSUInteger row = indexPath.row;

    if(row == 0)

        return nil;

    return indexPath;

}

@end

第一个行就选不到咯。

 

单击某个表视图单元后应该执行一些操作吧，那这些操作该写到哪里呢？那就是接下来这个方法了：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{

    

}

例如，弹出一个警告

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{

    NSUInteger row = indexPath.row;

    NSString *rowValue = [listData objectAtIndex:row];

    

    NSString *msg = [[NSString alloc]initWithFormat:@"You selected %@", rowValue];

    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Row Slected" message:msgdelegate:nil cancelButtonTitle:@"Yep, I did" otherButtonTitles: nil];

    [msg release];

    [alert show];

    [tableView deselectRowAtIndexPath:indexPath animated:YES];//在弹出警告后自动取消选中表视图单元

}

 

在运行一遍，很炫吧，试一下点第一行，你点我不到，哈哈。

 深入了解表视图

#pragma mark -

#pragma mark table view data source methods

 

//返回某个表视图有多少行数据

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return self.listData.count;    // listData  数据矩阵名

} 

//表视图显示表视图项时调用：第一次显示（根据视图大小显示多少个视图项就调用多少次）以及拖动时调用

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"simpleTableIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];   

    if (!cell) {

        //有4种style，default只显示image和文本标签；subtitle显示image，文本标签和详细文本（位于文本标签下方）；value1显示image，文//本标签和详细文本（位于文本标签右边）；value2只显示文本标签和详细文本（文本标签小字体，详细文本粗体）

        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier] autorelease];

    }  

    UIImage *image = [UIImage imageNamed:@"apple.png"];

    cell.imageView.image = image;

    UIImage *image2 = [UIImage imageNamed:@"cherry.png"];

    cell.imageView.highlightedImage = image2;

      

    NSUInteger row = indexPath.row;

    cell.textLabel.text = [listData objectAtIndex:row];

    cell.textLabel.font = [UIFont boldSystemFontOfSize:50];  

    if (row < 7) {

        cell.detailTextLabel.text = @"Mr Disney";

    }

    else{

        cell.detailTextLabel.text = @"Mr Tolkein";

    }   

    return cell;

}

 

 

//设置分区个数

- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView

{

    return keys.count;

}

 

//设置每个分区的标题

- (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

{

    return [keys objectAtIndex:section];

}

 

//创建右侧索引表，返回需要显示的索引表数组

- (NSArray *) sectionIndexTitlesForTableView:(UITableView *)tableView

{

    return keys;

}

 

//点击右侧索引表项时调用

- (NSInteger) tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

{

    NSString *key = [keys objectAtIndex:index];

    NSLog(@"sectionForSectionIndexTitle key=%@",key);

    if (key == UITableViewIndexSearch) {

        [table setContentOffset:CGPointZero animated:NO];

        return NSNotFound;

    }   

    return index;

}

 

#pragma mark -

#pragma mark table delegate methods

 

//设置每行缩进级别

- (NSInteger) tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return indexPath.row;

}

 

//在某行被选中前调用，返回nil表示该行不能被选中；另外也可返回重定向的indexPath，使选择某行时会跳到另一行

- (NSIndexPath *) tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

    NSUInteger row = indexPath.row;

    if (row == 0) {

        return nil;

    }  

    return indexPath;

} 

//某行已经被选中时调用

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

    NSUInteger row = indexPath.row;

    NSString *rowValue = [listData objectAtIndex:row];   

    NSString *message = [[NSString alloc] initWithFormat:@"you selected %@", rowValue];   

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"row selected" message:message delegate:nil cancelButtonTitle:@"yes, I did" otherButtonTitles:nil];

    [alert show];   

    [message release];

    [alert release];

    [tableView deselectRowAtIndexPath:indexPath animated:YES];

} 

//设置行高度

- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return 70;

}