现在的位置: 首页 > 综合 > 正文

iPhone开发学习:使用UITableView

2012年02月13日 ⁄ 综合 ⁄ 共 4514字 ⁄ 字号 评论关闭

 

学习TableView很不错的一篇文章。 推荐原文。在此转载,并加入一些自己的comments.

 

Idea for Application:

So, this tutorial is about creating a Simple UITableView using NSArray (or you can use NSMutableArray). Follow the following steps to create a UITableView which output will look like this:

Picture 11 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

iphone programming tutorial steps to follow:

1. Start Xcode and Create a new Xcode Project. Name it, SimpleTable.
Picture 1 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 2 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 3 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

2. Open SimpleTableViewController.h file from “Group & Files” panel in Xcode. Write the following code after import and before @end:

1.@interface SimpleTableViewController : UIViewController {
2.IBOutlet UITableView *tblSimpleTable;
3.}

3. Save SimpleTableViewController.h file and open SimpleTableViewController.xib from Xcode project (Tips, Press cmd + 1 to open ‘Attribute Inspector. Press cmd + shift + l to open Library) .

4. Now In Library, drag the ‘Table View’ in View Window.
Picture 5 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 6 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

5. Now press cmd + 2 to open ‘Connections Inspector’ and then press your mouse over the circle next to tbleSimpleTable and try to drag it to table

Picture 7 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

6. Now select ‘Table View’ inside View and you will see change in “Connection Inspector”. Again in ‘Connection Inspector’ circle next to ‘dataSource’, drag it to “File’s Owner”. Repeat this for ‘delegate’        这个地方很关键,由于不太理解IB connection 的精神,所以容易忽略。

Picture 8 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 9 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

8. Now close Interface builder because you do not need it for now. Open SimpleTableViewController.m file and after dealloc method write following code (it should be before @end)

 

[如果有工具能帮助产生下面这些代码就好了 ]


01.#pragma mark Table view methods
02. 
03.- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
04.return 1;
05.}
06. 
07.// Customize the number of rows in the table view.
08.- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
09.return 0;
10.}
11. 
12.// Customize the appearance of table view cells.
13.- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
14. 
15.static NSString *CellIdentifier = @"Cell";
16. 
17.UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
18.if (cell == nil) {
19.cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
20.}
21. 
22.// Set up the cell...
23.return cell;
24.}
25. 
26.- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
27.}

9. Now if you run the application by pressing cmd + r (or by pressing build and Go button in Xcode). You will see a simple table
Picture 9 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

10. Now change in numberOfRowsInSection method and write the following code

1.// Customize the number of rows in the table view.
2.- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
3.return 1;
4.}

11. You need to change in cellForRowAtIndexPath method to show a single line text. You need to add one row to display that (cell.text = @”text”) which should look like this:

01.// Customize the appearance of table view cells.
02.- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
03. 
04.static NSString *CellIdentifier = @"Cell";
05. 
06.UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
07.if (cell == nil) {
08.cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
09.}
10. 
11.// Set up the cell...
12.cell.text = @"Text";
13.return cell;
14.}

12. Run the application and you will see
Picture 10 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

13. Next step is to create an array and display it to UITableView. For that you have to add ‘NSArray’ in SimpleTableViewController.h file. So your SimpleTableViewController.h should look like this:

1.#import
2. 
3.@interface SimpleTableViewController : UIViewController {
4.IBOutlet UITableView *tblSimpleTable;
5.NSArray *arryData;
6.}
7. 
8.@end

14. Now open SimpleTableViewController.m file and uncomment the ‘viewDidLoad’ method and create a simple array:

1.- (void)viewDidLoad {
2.arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",nil];
3.[super viewDidLoad];
4.}

15. Last step is to change in cellForRowAtIndexPath method, so that it get the objects from arrayData and simply display it on UITableView. So code for that method should look like this:

01.- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
02. 
03.static NSString *CellIdentifier = @"Cell";
04. 
05.UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
06.if (cell == nil) {
07.cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
08.}
09. 
10.// Set up the cell...
11.cell.text = [arryData objectAtIndex:indexPath.row];
12.return cell;
13.}

Final output will look like this
Picture 11 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 12 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

Code for iPhone Application:

Click here for the code Project code.

Follow iphone programming tutorial video here:

You can watch the screen cast here. or Watch in on YouTube (url http://www.youtube.com/watch?v=pCcZDrNCQzU) and subscribe to my videos.

 

抱歉!评论已关闭.