iOS Development UI article-use Xib custom UITableViewCell to implement a simple Buy app interface layout

I. Project document structure and plist file

Second, the realization effect

Third, code example

1. Instead of using the companion class, use the Xib file control tag value operation directly

Data Model section:

YYtg.h file

1//2//  YYtg.h 3//  01-Group Purchase data display (no matching classes) 4//5//  Created by Apple on 14-5-29.6/  Copyright (c) 2014 it Case. All rights reserved. 7//8  9 #import <foundation/foundation.h>10 #import "Global.h" @interface yytg:nsobject13 @property (Nona tomic,copy) nsstring *buycount;14 @property (nonatomic,copy) nsstring *icon;15 @property (nonatomic,copy) NSString * Price;16 @property (nonatomic,copy) nsstring *title;17 yyinith (TG) @end

YYTG.M file

1//2//  YYTG.M 3//  01-Group Purchase data display (no matching classes) 4//5//  Created by Apple on 14-5-29.6/  Copyright (c) 2014 it Case. All rights reserved. 7//8  9 #import "YYtg.h" @implementation YYtg12 yyinitm (TG) @end

Master Controller

YYVIEWCONTROLLER.M file

 1//2//YYVIEWCONTROLLER.M 3//01-Buy Data display (no matching classes) 4//5//Created by Apple on 14-5-29. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYtg.h" @interface Yyviewcontroller () <UITableViewDataSource> @property (Nonatomic,strong) Nsarray *tg;14 @property (Strong, nonatomic) Iboutlet UITableView *tableview;15 @end17 1 8 @implementation YYViewController19-(void) viewDidLoad21 {[Super viewdidload];23 self.tableview.rowheight=  100;24}26 #pragma mark-lazy load-(Nsarray *) tg29 {if (_tg==nil) {NSString *fullpath=[[nsbundle mainbundle]pathforresource:@ "Tgs.plist" oftype:nil];32 nsarray *temparray=[nsarray ArrayWithContentsOfFile:fullpa th];33 Nsmutablearray *arraym=[nsmutablearray arraywithcapacity:temparray.count];35 for (NSDict     Ionary *dict in Temparray) {YYTG *TG=[YYTG tgwithdict:dict];37 [Arraym addobject:tg];38    }39 _tg=[arraym mutablecopy];40}41 return _tg;42}43 #pragma mark-data display (Nsinteger) numberofsecti Onsintableview: (UITableView *) tableView46 {return 1;48}49-(Nsinteger) TableView: (UITableView *) TableView NUMBEROFR Owsinsection: (Nsinteger) section50 {self.tg.count;52}53-(UITableViewCell *) TableView: (UITableView *) Tablev Iew Cellforrowatindexpath: (Nsindexpath *) indexPath54 {55//Read data in Xib//Nsarray *arraym=[[nsbundle Mainbundle]loa dnibnamed:@ "Tgcell" Owner:nil options:nil];57//UITableViewCell *cell=[arraym firstobject];58 static NSString *[em Ail protected] "TG"; UITableViewCell *cell=[tableview dequeuereusablecellwithidentifier:identifier];60 if (c Ell==nil) {//Cell=[[uitableviewcell Alloc]initwithstyle:uitableviewcellstyledefault ReuseIdentifier:identifier]     ; cell= [[[NSBundle mainbundle]loadnibnamed:@ "Tgcell" Owner:nil Options:nil] firstobject];63}64 65 YYTG *tg=self.tg[indexpatH.ROW];66//Setting Data 67//using tag68 uiimageview *imgv= (Uiimageview *) [cell viewwithtag:1];69 Imgv.image=[uiimage Imagenamed:tg.icon];70 UILabel *buycount= (UILabel *) [cell viewwithtag:4];71 buycount.text=[nsstring Stringwithform  at:@ "%@ people buy", tg.buycount];72 UILabel *title= (UILabel *) [cell viewwithtag:2];73 title.text=tg.title;74 UILabel     *price= (UILabel *) [cell viewwithtag:3];75 price.text=[nsstring stringwithformat:@ "$%@", tg.price];76 77 78 Return cell79 return cell;80}81 82//Hide Status bar-(BOOL) prefersStatusBarHidden84 {@end

Use Xib custom UITableViewCell

Code Analysis:

The above code completes the assignment and refresh of each part of the data by using the tag value of each control in the Xib file. However, as a host controller, it should know the tag value of each control in the Xib file, does it know too much?

In order to solve the above problem, we can set a matching class for the custom cell, let this class to operate this xib, external interface, as for the internal data processing, the outside world need not care, do not care.

The modified code is as follows:

2. Use xib and corresponding classes to complete the custom cell data display

Create a new class to manage the corresponding xib file

Note The class's inheritance class, and associate the class with the Xib file

YYtgcell.h File Code:

1//2//  YYtgcell.h 3//  02-Buy (use Xib and class to complete data display) 4//5//  Created by Apple on 14-5-29.6/  Copyright (c) 2 014 Years itcase. All rights reserved. 7//8  9 #import <uikit/uikit.h>10 #import "YYtg.h" @interface yytgcell:uitableviewcell13 @property (nonat Omic,strong) Yytg *yytg;14 @end

YYTGCELL.M file

1//2//  YYTGCELL.M 3//  02-Buy (use Xib and class to complete data display) 4//5//  Created by Apple on 14-5-29.6/  Copyright (c) 2 014 Years itcase. All rights reserved. 7//8  9 #import "YYtgcell.h" 10//Private extension one @interface Yytgcell () @property (Strong, nonatomic) Iboutlet Uiimageview *i Mg;13 @property (Strong, nonatomic) Iboutlet UILabel *titlelab;14 @property (Strong, nonatomic) Iboutlet UILabel *pricelab ; @property (Strong, nonatomic) Iboutlet UILabel *buycountlab;16 @end17 @implementation YYtgcell18 #pragma mark rewrite set method to complete the assignment of data (void) SETYYTG: (YYTG *) yytg21 {     _yytg=yytg;23     self.img.image=[uiimage imagenamed: yytg.icon];24     self.titlelab.text=yytg.title;25     self.pricelab.text=[nsstring stringwithformat:@ "$%@", yytg.price];26     self.buycountlab.text=[nsstring stringwithformat:@ "purchased by%@ people", yytg.buycount];27}28 @end

Master Controller

YYVIEWCONTROLLER.M file

 1//2//YYVIEWCONTROLLER.M 3//02-Buy (use Xib and class to complete data display) 4//5//Created by Apple on 14-5-29. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYtg.h" #import "YYtgcell.h" @interface Yyviewcontroller () <ui Tableviewdatasource,uitableviewdelegate>14 @property (Strong, nonatomic) Iboutlet UITableView *tableview;15 16 @ Property (strong,nonatomic) Nsarray *tg;17 @end18 @implementation YYViewController20-(void) viewDidLoad22 {23°c [su Per viewdidload];24 self.tableview.rowheight=80.f;25}26 #pragma mark-lazy load-(Nsarray *) tg28 {if (_tg==nil) { NSString *fullpath=[[nsbundle mainbundle]pathforresource:@ "tgs.plist" oftype:nil];31 NSArray *temparray =[nsarray arraywithcontentsoffile:fullpath];32 Nsmutablearray *arraym=[nsmutablearray arrayWithCapacity     : temparray.count];34 for (nsdictionary *dict in Temparray) {YYTG *tg=[yytg tgwithdict:dict];36        [Arraym addobject:tg];37}38 _tg=[arraym mutablecopy];39}40 return _tg;41}42 #prag Ma mark-xib Create cell data processing #pragma mark number of sets-(Nsinteger) Numberofsectionsintableview: (UITableView *) tableView47 {RET Urn 1;49}50 #pragma mark how many lines-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (Nsinteger) section52 {UITableViewCell *) TableView: (UITableView *) TableView self.tg.count;54}55 #pragma mark set each group per line Cellforrowatindexpath: (Nsindexpath *) indexPath57 {nsstring *identifier= @ "TG"; Yytgcell *cell=[tablevi EW dequeuereusablecellwithidentifier:identifier];60 if (cell==nil) {61//How to add a stamp to the created cell 62//For the loaded Xib file,         Can be set in the Xib View's property selector cell=[[[nsbundle mainbundle]loadnibnamed:@ "Tgcell" Owner:nil options:nil]firstobject];64 NSLog (@ "created a cell"); 65}66 67//Set cell data 68//Get model of current row YYTG *tg=self.tg[indexpath.row];70 C ell.yytg=tg;71 return cell;72}-(BOOL) prefersStatusBarHidden75 {yes;77}78 @end 

3. Further optimizations and adjustments to the above code (MVC)

The optimizations are as follows:

(1) The process of creating a cell in the main controller is extracted into Yytgcell, and an external interface is provided.

YYtgcell.h file (interface provided)

1 #import <uikit/uikit.h>2 #import "YYtgModel.h" 3 4 @interface yytgcell:uitableviewcell5 @property (nonatomic, Strong) Yytgmodel *yytg;6 7//Load data (encapsulated using XIB to create the internal details of the cell) 8 + (Instancetype) Tgcellwithtableview: (UITableView *) Tableview;9 @end

YYTGCELL.M file (encapsulates the part that created the custom cell)

 1//2//YYTGCELL.M 3//02-Buy (use Xib and class to complete data display) 4//5//Created by Apple on 14-5-29. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYtgcell.h" 10//Private extension one @interface Yytgcell () @property (Strong, nonatomic) Iboutlet Uiimageview *img;  @property (Strong, nonatomic) Iboutlet UILabel *titlelab;14 @property (Strong, nonatomic) Iboutlet UILabel *pricelab;15 @property (Strong, nonatomic) Iboutlet UILabel *buycountlab;16 @end17 @implementation YYtgcell18 #pragma mark overrides the Set method,     Completion of assignment of data-(void) SETYYTG: (Yytgmodel *) yytg21 {_yytg=yytg;23 self.img.image=[uiimage imagenamed:yytg.icon];24 self.titlelab.text=yytg.title;25 self.pricelab.text=[nsstring stringwithformat:@ "$%@", yytg.price];26 SELF.BUYC Ountlab.text=[nsstring stringwithformat:@ "has been purchased by%@", yytg.buycount];27}28 + (instancetype) Tgcellwithtableview: ( UITableView *) tableView30 {to static nsstring *identifier= @ "TG"; Yytgcell *cell=[tableview DEQUEUEREUSABLECELLW Ithidentifier:identifier];33 if (cell==nil) {34///How to add a stamp to the created cell 35//For the loaded Xib file, you can set it to the Xib view's property selector. =[[[nsbundle mainbundle]loadnibnamed:@ "Tgcell" Owner:nil options:nil]firstobject];37 NSLog (@ "created a Cell"); 38}3 9 Return cell;40}41 @end

The business logic in the main controller is clearer, the yyviewcontroller.m file code is as follows

 1//2//YYVIEWCONTROLLER.M 3//02-Buy (use Xib and class to complete data display) 4//5//Created by Apple on 14-5-29. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYtgModel.h" #import "YYtgcell.h" @interface Yyviewcontroller () & Lt Uitableviewdatasource,uitableviewdelegate>14 @property (Strong, nonatomic) Iboutlet UITableView *tableview;15 16 @ Property (strong,nonatomic) Nsarray *tg;17 @end18 @implementation YYViewController20-(void) viewDidLoad22 {23°c [su Per viewdidload];24 self.tableview.rowheight=80.f;25}26 #pragma mark-lazy load-(Nsarray *) tg28 {if (_tg==nil) { NSString *fullpath=[[nsbundle mainbundle]pathforresource:@ "tgs.plist" oftype:nil];31 NSArray *temparray =[nsarray arraywithcontentsoffile:fullpath];32 Nsmutablearray *arraym=[nsmutablearray arrayWithCapacity : temparray.count];34 for (nsdictionary *dict in Temparray) {Yytgmodel *tg=[yytgmodel tgwithdict:dict];36 [Arraym addobject:tg];37}38 _tg=[arraym mutablecopy];39}40 return _tg;41 }42 #pragma mark-xib Create cell data processing #pragma mark how many groups of-(Nsinteger) Numberofsectionsintableview: (UITableView *) tabl eView48 {1;50}51 #pragma mark number of lines-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (Nsinteger) section54 {self.tg.count;56}57 #pragma mark sets each line of each group of a-(UITableViewCell *) TableView: (Uitablevie W *) TableView Cellforrowatindexpath: (Nsindexpath *) indexPath60 {61//1. Create Cell62 Yytgcell *cell=[yytgcell Tgcellwit HTABLEVIEW:TABLEVIEW];63 64//2. Gets the model of the current row, sets the data for the cell Yytgmodel *tg=self.tg[indexpath.row];66 cell.yytg=tg;6 7 68//3. Return cell69 return cell;70}71 #pragma mark-hidden status bar-(BOOL) prefersStatusBarHidden74 {x-Y es;76}77 @end

Iv. recommended adjustment of the project document structure

This is the restructured file structure, the complete MVC architecture.

Note: Note the naming conventions for files.

Tips: Batch renaming, operation as follows:

Modify to the desired name:

iOS Development UI article-use Xib custom UITableViewCell to implement a simple Buy app interface layout