UITableView and UITableViewCell in iOS development

UITableView is used to display data in tabular form. Regarding UITableView, we should pay attention to:

(1) UITableView is used to display the visible portion of the table, and UITableViewCell is used to display a row of the table.

(2) UITableView is not responsible for storing the data in the table, but merely storing enough data to draw the current visible part.

(3) UITableView obtains the configuration information from the Uitableviewdelegate protocol, obtains the data information from the Uitableviewdatasource protocol.

(4) All UITableView implementations are actually only one column, but we can make it look like several columns by adding a sub-view to the UITableViewCell.

(5) There are two styles of UITableView:

①grouped: Each group looks like a round rectangle;
②plain: This is the default style and can be modified into indexed style.
In the small example below, we will first implement displaying a column of data, then add an image to each row, and then look at the four kinds of uitableviewcell. Finally, do other things, such as setting indents, modifying font sizes, and higher rows.

1. Run Xcode 4.2 and create a new single View application, named Table Sample:

2. Click Viewcontroller.xib, use Interface Builder to add a UITableView control to the view and make it cover the entire view:

3. Select the newly added UITableView control, open the connection Inspector, find the delegate and DataSource, pull the line from their right circle to the file's owner icon:

4. Click ViewController.h to add the code:

#import <UIKit/UIKit.h> @interface Viewcontroller:uiviewcontroller<uitableviewdelegate, Uitableviewdatasource> @property (Strong, nonatomic) Nsarray *listdata; @end

5. Click viewcontroller.m to add the code:

5.1 Add code after @implementation:

@synthesize ListData;

5.2 Add code in the Viewdidload method:

-(void) viewdidload {[Super viewdidload];//Do any additional setup under loading the view, typically from a nib. Nsarray *array = [[Nsarray alloc] initwithobjects:@ "Tree" @ "Flower", @ "Grass", @ "Fence", @ "house", @ "Table" @ "Chair", @ " Book ", @" Swing ", nil]; Self.listdata = array; }

5.3 Add code in the Viewdidunload method:

-(void) viewdidunload {[Super viewdidunload];//Release any retained subviews of the main view.//e.g. Self.myoutlet = Nil Self.listdata = nil; }

5.4 Add code before @end:

#pragma mark-#pragma mark Table View Data Source Methods//Return rows-(Nsinteger) TableView: (UITableView *) TableView numberof Rowsinsection: (Nsinteger) Section {return [Self.listdata count];}//Create a new row and return-(UITableViewCell *) TableView: ( UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath {static NSString *tablesampleidentifier = @ " Tablesampleidentifier "; UITableViewCell *cell = [TableView dequeuereusablecellwithidentifier:tablesampleidentifier]; if (cell = = nil) {cell = [[UITableViewCell alloc] Initwithstyle:uitableviewcellstyledefault reuseidentifier: Tablesampleidentifier]; } nsuinteger row = [Indexpath row]; Cell.textLabel.text = [ListData objectatindex:row]; return cell; }

In the second method above,

UITableViewCell *cell = [TableView dequeuereusablecellwithidentifier:tablesampleidentifier];

This statement finds the currently reusable UITableViewCell based on the identifier tablesampleidentifier. When a row slides out of the current visible area, we reuse the UITableViewCell object it corresponds to, saving memory and time.

If the cell is nil after executing the word, then we create one and set the go identifier to Tablesampleidentifier:

cell = [[UITableViewCell alloc] Initwithstyle:uitableviewcellstyledefault reuseidentifier:tablesampleidentifier];

Here Uitableviewcellstyledefault is a constant that represents the UITableViewCell style, and in addition, there are other styles that will be used later.

Note the parameter (Nsindexpath *) Indexpath, which merges the row number row and part number section, by [Indexpath Row], and gets the line number. Then set its text to cell:

Cell.textLabel.text = [ListData objectatindex:row];

6, run a bit:

7. Add a picture to each line:

7.1 Add a picture resource to the project: drag it into the project, as mentioned in the previous article.

7.2 Add code before the return statement of the Cellforrowatindexpath method:

UIImage *image = [UIImage imagenamed:@ "Blue.png"]; Cell.imageView.image = image; UIImage *highlighedimage = [UIImage imagenamed:@ "Yellow.png"]; Cell.imageView.highlighedImage = Highlighedimage;

7.3 operation, the effect is as follows:

As you can see, there is a picture on the left side of each line. A row is selected and its picture is changed.

8, set the style of the line:

The constants that represent UITableViewCell styles are:

Uitableviewcellstyledefault uitableviewcellstylesubtile UITableViewCellStyleValue1 UITableViewCellStyleValue2

The differences between these styles are mainly reflected in the image, text label, and detail text label.

To reflect the style, add code before the return statement of the Cellforrowatindexpath method:

Cell.detailTextLabel.text = @ "Detail text";

Then the

cell = [[UITableViewCell alloc] Initwithstyle:uitableviewcellstyledefault reuseidentifier:tablesampleidentifier];

The Uitableviewcellstyledefault in turn replaced by the above mentioned four style constants, and run, the effect is as follows:

Uitableviewcellstyledefault Uitableviewcellstylesubtle

UITableViewCellStyleValue1 UITableViewCellStyleValue2

9. Set Indent:

Change the style of all lines back to Uitableviewcellstyledefault and add the following code before @end:

#pragma mark Table Delegate Methods-(Nsinteger) TableView: (UITableView *) TableView Indentationlevelforrowatindexpath :(Nsindexpath *) Indexpath {nsuinteger row = [Indexpath row]; return row;}

Here, the row row is indented to row, as shown in:

10, the control line selection:

To add code before @end:

-(Nsindexpath *) TableView: (UITableView *) TableView Willselectrowatindexpath: (Nsindexpath *) Indexpath {Nsuinteger row = [Indexpath row]; if (row%2 = = 0) {return nil;} return indexpath; }

The above method executes before selecting a row, and we can add the action we want in this method. Here, we do that if the selected line number (starting from 0) is even, deselect it.

To add code before @end:

-(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]; [TableView Deselectrowatindexpath:indexpath Animated:yes]; }

When a row is selected, an alert pops up to show the choices we made.

Run it and you'll find that the No. 0, 2, and so on are not selectable. When you select an odd line, a prompt pops up:

And when the box is closed, the selected line is also canceled, using the statement

[TableView Deselectrowatindexpath:indexpath Animated:yes];

11. Set the font size and table row height:

11.1 Add code to set the font and size before return in the Cellforrowatindexpath method:

Cell.textLabel.font = [Uifont boldsystemfontofsize:50];

11.2 Add code before @end, with