[Ios learning records]-Customize table view units through nib files

[Ios learning records]-Customize table view units through nib files

There are two ways to add a custom table view Unit: one is to add a child View to the program when creating the unit, and the other is to load them from the mirror or nib file, here we use the second method.

Generally, the ios data list contains two parts: Table view (group table and unformatted table) and Table view unit. Each table view is an instance of the UITableView class used to display view objects of table data. Each visible row is an instance of the UITableViewCell class and displays a row in the table. As shown in:

The table view unit contains three styles: image, text tag, and detailed text tag. The default Unit style cannot meet the requirements of a certain business (for example, the label text is displayed on the top right and the image is displayed on the bottom right). At this time, we can customize the display of the table view unit.

There are two ways to add a custom table view Unit: one is to add a child View to the program when creating the unit, and the other is to load them from the mirror or nib file, here we use the second method as follows:

Before starting, we need to know the two UITableView protocols: UITableViewDelegate and UITableViewDataSource. Table view obtains configuration data from objects that follow the UITableViewDelegate protocol, and row data from objects that follow the UITableViewDataSource protocol.

Overall relationship diagram:

Main process:

1. Create a CustomCellTableView project and select Single View Application.

2. Create a UITableViewCell subclass CustomCell
Select File-> New-> File, and then select Cocoa Touch Class.

Enter "CustomCell", inherit from UITableViewCell, check "Also create XIB file", and press Next until the operation is successful.

3. Create the table view unit data file CustomCellData.

Select File-> New-> File, select Objective-C File to create the CustomCellData. m File, and then select Header File to create the CustomCellData. h File.

Here, because the data in the table View unit is stored through CustomCellData, and the display View is stored through CustomCell, the file organization form still adopts the data (model) and Table View unit View (View) separated. Create a CustomCell Group folder, and then create the View folder and Model folder respectively to summarize the CustomCell and CustomCellData files respectively. As shown in.

4. Use the interface builder to visually layout CustomCell. xib and set constraints, as shown in.

Set Identifier to CustomCell.

Set Custom Class to CustomCell.

Press and hold the Controll key to associate the output interface with related labels.

5. Open the main storyboard of the main mirror and connect tableview to ViewController. m.

Click ViewController to make sure that the Custom Class is ViewController.

Click TableView and press the control key to connect the output variable to View Controller.

Here, the tableview delegate can be set in two ways. The first is to set in the nib file. Press and hold the controll key to pull dataSource and delegate to tableview respectively; the second is to set in the code to enable ViewController. m, enter the following code in viewDidLoad:

self.tableView.dataSource = self;self.tableView.delegate = self;

6. Import images.

Drag the image file password.png directly to the project navigation bar, as shown in.

7. Enter the core code.

CustomCellData. m: used to save the data of the object to be displayed in the table view cell.

#import "CustomCellData.h"@implementation CustomCellData+ (instancetype)cellWithInfo:(NSString *)mainTitle                    subTitle:(NSString *)subTitle                   leftImage:(NSString *)leftImage                  rightImage:(NSString *)rightImage                        time:(NSString *)time{    CustomCellData *item = [[self alloc] init];    item.mainTitle = mainTitle;    item.subTitle = subTitle;    item.leftImage = leftImage;    item.rightImage = rightImage;    item.time = time;    return item;}@end

CustomCell: The table view unit inherited from UITableViewCell. Each row is displayed in the table.

# Import "CustomCell. h "@ implementation CustomCell/* reusable cell Unit */+ (instancetype) cellWithTableView :( UITableView *) tableView {static NSString * ID = @" CustomCell "; customCell * cell = [tableView dequeueReusableCellWithIdentifier: ID]; if (cell = nil) {cell = [[[NSBundle mainBundle] loadNibNamed: [self class] description] owner: nil options: nil] lastObject];} return cell;}-(void) setItemData :( CustomCellD Ata *) itemData {_ itemData = itemData; [self setupData];}-(void) setupData {self. leftImage. image = (_ itemData. leftImage = nil? Nil: [UIImage imageNamed: _ itemData. leftImage]); self. rightImage. image = (_ itemData. rightImage = nil? Nil: [UIImage imageNamed: _ itemData. rightImage]); self. mainTitle. text = _ itemData. mainTitle; self. mainTitle. font = [UIFont fontWithName: @ "Helvetica" size: 15.f]; self. subTitle. textColor = [UIColor colorWithRed :( (float) (0x800000 & 0xFF0000)> 16)/255.0 green :( (float) (0x008A00 & 0xFF00)> 8 )) /255.0 blue :( (float) (0x000087 & 0xFF)/255.0 alpha: 1.0]; self. subTitle. text = _ itemData. subTitle; self. subTitle. font = [UIFont fontWithName: @ "Helvetica" size: 9.f]; self. timeLabel. text = _ itemData. time; self. timeLabel. font = [UIFont fontWithName: @ "Helvetica" size: 9.f] ;}@ end

ViewController. h: implements the UITableView protocol.

@interface ViewController : UIViewController
  

ViewController. m: implements the UITableViewDataSource and UITableViewDelegate protocols, and CALLS custom mcmcell in the cellForRowAtIndexPath protocol method. Remember to add the protocol in ViewController. h.

# Pragma mark UITableViewDataSource/*** set the content data displayed in each table view cell */-(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {CustomCell * cell = nil; CustomCellData * itemData = nil; if (0 = indexPath. section) {itemData = self. dataArray [indexPath. row];} else if (1 = indexPath. section) {itemData = self. saleDataArray [indexPath. row];} cell = [CustomCell cellWithTableView: tableView]; cell. itemData = itemData; return cell;}-(void) setupData {NSDate * dateNow = [NSDate date]; NSDateFormatter * formatter = [[NSDateFormatter alloc] init]; [formatter setDateFormat: @ "H: m"]; NSString * time = [formatter stringFromDate: dateNow]; [self. dataArray addObject: [CustomCellData cellWithInfo: @ "File Transfer assistant" subTitle: @ "What Do You Want to upload? Pass" leftImage: @ "ic_sale_re" rightImage: @ "password" time: time]; [self. dataArray addObject: [CustomCellData cellWithInfo: @ "Address Book" subTitle: @ "your exclusive address book" leftImage: @ "ic_sale_re" rightImage: @ "password" time: time]; [self. dataArray addObject: [CustomCellData cellWithInfo: @ "subscribe number" subTitle: @ "Everyone is a product manager" leftImage: @ "ic_sale_re" rightImage: @ "password" time: time]; [self. saleDataArray addObject: [CustomCellData cellWithInfo: @ "Li Lei" subTitle: @ "" leftImage: @ "ic_sale_re" rightImage: @ "password" time: time]; [self. saleDataArray addObject: [CustomCellData cellWithInfo: @ "Han Meimei" subTitle: @ "" leftImage: @ "ic_sale_re" rightImage: @ "password" time: time];}

Run the program. OK is successful. For details about the code, see custom table view units.