IPhone development and learning: Using uitableview

 

A good article on learning tableview. The original Article is recommended. Reprinted here and added some 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 'ons ons 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'This is critical because you do not understand the spirit of IB connection, so it is easy to ignore.

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 shocould be before @ end)

 

[If a tool is available to help generate the following code]

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 shoshould 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 shocould 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 shoshould 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.