iPhone開發學習：使用UITableView

 

學習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:

iphone programming tutorial steps to follow:

1. Start Xcode and Create a new Xcode Project. Name it, SimpleTable.

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

view sourceprint? 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.

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

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 的精神，所以容易忽略。

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)

 

［如果有工具能協助產生下面這些代碼就好了 ］

view sourceprint? 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

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

view sourceprint? 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:

view sourceprint? 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

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:

view sourceprint? 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:

view sourceprint? 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:

view sourceprint? 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

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.