iOS development UI chapter-using UITableView to complete a simple QQ friends List (ii)

iOS development UI chapter-using UITableView to complete a simple QQ friends List (ii)

First, the realization effect

Second, the implementation of the Code

1. Data Model Section

YYQQGroupModel.h file

1//2//  YYQQGroupModel.h 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright ( c) 2014 Itcase. All rights reserved. 7//8  9 #import <foundation/foundation.h>10 @interface yyqqgroupmodel:nsobject12/**13  *  name attribute 14< C7/>*/15 @property (nonatomic,copy) nsstring *name;16/**17  *  online  */19 @property (nonatomic,copy) NSString *online;20/**21  *  friends List  */23 @property (nonatomic,strong) Nsarray *friends;24 25// Records whether the current group is opening a @property (Nonatomic,assign,getter = isOpen) BOOL open;27-(Instancetype) Initwithdict: (Nsdictionary *) dict;29 + (Instancetype) qqgroupmodelwithdict: (nsdictionary *) dict;30 @end

YYQQGROUPMODEL.M file

1//2//  YYQQGROUPMODEL.M 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright ( c) 2014 Itcase. All rights reserved. 7//8  9 #import "YYQQGroupModel.h" #import "YYFriendsModel.h" @implementation YYQQGroupModel13-( Instancetype) Initwithdict: (Nsdictionary *) dict14 {     if (self=[super init]) {         //convert dictionary to model [self]         setvaluesforkeyswithdictionary:dict];18         //define an array to save the converted model         Nsmutablearray *models=[ Nsmutablearray arraywithcapacity:self.friends.count];21 for         (nsdictionary *dict in self.friends) {             Yyfriendsmodel *friends=[yyfriendsmodel friendswithdict:dict];23             [Models addobject:friends];24         }25         _friends=[models copy];26     }     return self;28}29 + (instancetype) qqgroupmodelwithdict: (Nsdictionary *) dict31 {     return  [self Alloc]initwithdict:dict];33}34 @end

YYFriendsModel.h file

1//2//  YYFriendsModel.h 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright ( c) 2014 Itcase. All rights reserved. 7//8  9 #import <foundation/foundation.h>10 @interface yyfriendsmodel:nsobject12/**13  *  Each friend's name is  */15 @property (nonatomic,copy) nsstring *name;16/**17  * Each friend's avatar  */19 @property (nonatomic, copy) NSString *icon;20/**21  *  each friend's personality signature is  */23 @property (nonatomic,copy) nsstring *intro;24/**25  *  Whether the friend is vip26  */27 @property (nonatomic,assign,getter = isvip) BOOL vip;28-(instancetype) Initwithdict: (nsdictionary *) dict;30 + (Instancetype) friendswithdict: (nsdictionary *) dict;31 @end

YYFRIENDSMODEL.M file

1//2//  YYFRIENDSMODEL.M 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright ( c) 2014 Itcase. All rights reserved. 7//8  9 #import "YYFriendsModel.h" @implementation YYFriendsModel12-(Instancetype) Initwithdict: ( Nsdictionary *) dict13 {     if (self=[super init]) {[Self         setvaluesforkeyswithdictionary:dict];16     }17     return self;18}19 + (instancetype) friendswithdict: (Nsdictionary *) dict21 {     return [[Self alloc] initwithdict:dict];23}24 @end

2. View section

YYfriendCell.h file

1//2//  YYfriendCell.h 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright (c) 2014 itcase. All rights reserved. 7//8  9 #import <uikit/uikit.h>10 @class yyfriendsmodel;11 @interface yyfriendcell:uitableviewcell12 @prop Erty (Nonatomic,strong) Yyfriendsmodel *friends;14 + (instancetype) Cellwithtableview: (UITableView *) tableView;16 @ End

YYFRIENDCELL.M file

 1//2//YYFRIENDCELL.M 3//02-QQ friends List (load of basic data) 4//5//Created by Apple on 14-5-31. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYfriendCell.h" #import "YYFriendsModel.h" 11//Private extension @interface Yyfriendcell () @end16 @imple Mentation YYfriendCell17 + (Yyfriendcell *) Cellwithtableview: (UITableView *) tableView19 {$ static nsstring *[email& Nbsp;protected] "QQ"; Yyfriendcell *cell=[tableview dequeuereusablecellwithidentifier:identifier];22 if (cell==ni L) {23//Use the system's own style here Cell=[[yyfriendcell Alloc]initwithstyle:uitableviewcellstylesubtitle Reuseidentifie R:identifier];25 NSLog (@ "Create a Cell"),}27 return cell;28}29 (void) Setfriends: (Yyfriendsmodel *) Frien ds31 {_friends=friends;33//1. Set Avatar Self.imageview.image=[uiimage imagenamed:_friends.icon];35//2. Set nickname Self.textlabel.text=_friends.name;37 38//3. Introduction to Settings self.detailtextlabel.text=_friends.intro;40//Judge if it is a member 41 42/**43 * Here's a note, what happens if you don't write the else setting to black?     */45 if (_FRIENDS.ISVIP) {$ [Self.textlabel settextcolor:[uicolor redcolor]];47}else48 {49 [Self.textlabel settextcolor:[uicolor blackcolor]];50}51//Adjust font size to Self.textlabel.font=[uifont systemFo ntofsize:15.f];53 Self.detailtextlabel.font=[uifont systemfontofsize:10.f];54}55 @end

YYHeaderView.h file

1//2//  YYHeaderView.h 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-6-1.6//  Copyright (c) 2014 itcase. All rights reserved. 7//8  9 #import <uikit/uikit.h>10 @class yyqqgroupmodel,yyheaderview;12 13//Negotiate an agreement @protocol Yyheadervie Wdelegate <nsobject>15-(void) Headerviewdidclickheaderview: (Yyheaderview *) headerview;16 @end17 @interface Yyheaderview:uitableviewheaderfooterview19 @property (nonatomic,strong) Yyqqgroupmodel *group;21//Provides a class method, Create a Head view (instancetype) Headerwithtableview: (UITableView *) tableview;23 24 25// Delegate comply with Yyheaderviewdelegate this protocol, you can use the method in the Agreement @property (nonatomic,weak) id<yyheaderviewdelegate> delegate ; @end

YYHEADERVIEW.M file

  1//2//YYHEADERVIEW.M 3//02-QQ friends List (load of basic data) 4//5//Created by Apple on 14-6-1. 6//Copyright (c) 2014 itcase.  All rights reserved. 7//8 9 #import "YYHeaderView.h" #import "YYQQGroupModel.h" @interface Yyheaderview () @property (nonatomic , strong) UIButton *btn; @property (Nonatomic,strong) UILabel *lab; @end @implementation Yyheaderview 17 18 19//Create a custom Head Group view + (Instancetype) Headerwithtableview: (UITableView *) t Ableview {nsstring *[email protected] "header"; 23//First go to the cache pool to fetch the data. Yyheaderview *headerview= [TableView Dequeuereusablecellwithidentifier:indentifier]; 25//If not, create your own if (headerview==nil) {Headerview=[[yyheaderview Alloc]initwithreuseidentifier:inden Tifier]; 28} 29//Returns a head view of return headerview; #warning Note the frame that is set for the control in the construction method is invalid-(ID) Initwithreuseidentifier: (NSString *) Reuseidentifier 35 {36//initialization Constructor method in parent class if (Self=[super InitwithreuseidenTifier:reuseidentifier]) {38//Create a button UIButton *btn=[uibutton buttonwithtype:uibuttontypecustom]; 40 Set the button's properties 41//Set the background picture of the button in normal state [btn setbackgroundimage:[uiimage imagenamed:@ "BUDDY_HEADER_BG"] fo Rstate:uicontrolstatenormal]; 43//Set the background picture of the button in the highlighted state [btn setbackgroundimage:[uiimage imagenamed:@ "buddy_header_bg_highlighted"] Forstat E:uicontrolstatehighlighted]; 45 46//Set button on the small triangle picture [btn setimage:[uiimage imagenamed:@ "Buddy_header_arrow"] Forstate:uicontro Lstatenormal]; 48//Set the information on the button on its way to the left-aligned btn.contenthorizontalalignment=uicontrolcontenthorizontalalignmentleft; 50//Set the inner margin of the small triangle picture Btn.contentedgeinsets=uiedgeinsetsmake (0, 20, 0, 0); 52//Set the text distance of the button on the distance from the small triangle picture Btn.titleedgeinsets=uiedgeinsetsmake (0, 20, 0, 0); 54//Set the text color of the grouped caption on the button (the default is white)//[btn Settintcolor:[uicolor Blackcolor]]; [btn Settitlecolor:[uicolor Blackcolor] foRstate:uicontrolstatenormal]; 57//Add button's Click event (btn addtarget:self action: @selector (Btnonclick:) forcontrolevents:uicontroleventtouchup Inside]; 59 60//Set the picture in BTN does not fill the entire imageView btn.imageView.contentMode = Uiviewcontentmodecenter; 62//out of range pictures do not cut the btn.imageView.clipsToBounds = no; Btn.imageView.layer.masksToBounds = NO; 65 66//Add button to view [self addsubview:btn]; SELF.BTN=BTN; 69 70//Create a lab UILabel *lab=[[uilabel Alloc]init]; 72//Set the alignment for the online population is right-aligned to the lab.textalignment=nstextalignmentright; 74//Set the text color of the online people to be gray lab.textcolor=[uicolor Graycolor]; [Self Addsubview:lab]; Self.lab=lab; ~ ~ + return self; (void) Btnonclick: (UIButton *) btn (@ "button was clicked"); 86//Modify the IsOpen property of the model 87//1. Modifying model Data 8 8 Self.group.open=!self.group.isopen; 89//2. Refreshing a tableLattice 90//(the function of refreshing the table is completed by the controller, where a proxy can be set up), when the button is clicked, notify the agent to refresh the table 91//Notify the agent if ([Self.delegate respondstoselector:@   Selector (Headerviewdidclickheaderview:)]) {[self.delegate headerviewdidclickheaderview:self]; 94} 95} 96 97//When the frame value of the control changes, the method is called automatically, so the control's frame can be set in the method;     98-(void) Layoutsubviews 103 do not forget to call the method of the parent class 101 [Super LAYOUTSUBVIEWS];102//Set button frame and head view of the size of the #warning SELF.BTN.FRAME=SELF.BOUNDS;104 105//Set Lab frame106 cgfloat padding=20;107 cgfloat labw=50;108 Cgfloa T labh=self.frame.size.height;109 cgfloat laby=0;110 cgfloat labx=self.frame.size.width-padding-labw;111 self. Lab.frame=cgrectmake (LabX, LabY, LABW, Labh);}113 #pragma mark-When a control is added to another view, it calls the following method 115//is called 1 when it has been added to the parent view. -(void) didMoveToSuperview117 {118 NSLog (@ "has been added to the View"); 119//In this method, you are about to get the latest header view added to the TableView to modify its image. (Self.group.isOpen) {121//Let the small triangle picture rotate down 122 self.btn.imageView.transform = cgaffinetRansformmakerotation (m_pi_2); 123}124}125 126//will be added to the parent view when 127-(void) Willmovetosuperview is called: (UIView *) Newsupervi     ew128 {129 NSLog (@ "will be added to view"); 130}131 132 133//Override Get method, set data 134-(void) Setgroup: (Yyqqgroupmodel *) group135 {136 _group=group;137//Set group header 138 139//self.btn.titlelabel.text=_group.name;140 #warning Note When setting the button's text, be sure to set the state of the button, like The above setting does not display 141 [self.btn settitle:_group.name forstate:uicontrolstatenormal];142 NSLog (@ "%@", Self.btn.titleLabel.te  XT); 143//Set online number 144 self.lab.text=[nsstring stringwithformat:@ "%@/%d", _group.online,_group.friends.count];145}146 147 @end

3. Controller section

YYViewController.h file

1//2//  YYViewController.h 3//  02-QQ Friends List (load of basic data) 4//5//  Created by Apple on 14-5-31.6//  Copyright (c) Itcase 2014. All rights reserved. 7//8  9 #import <uikit/uikit.h>10 @interface yyviewcontroller:uitableviewcontroller12 @end

YYVIEWCONTROLLER.M file

  1//2//YYVIEWCONTROLLER.M 3//02-QQ friends List (load of basic data) 4//5//Created by Apple on 14-5-31. 6//Copyright (c) 2014 itcase.  All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYQQGroupModel.h" #import "YYfriendCell.h" #import "Yyfriendsmo Del.h "#import" YYHeaderView.h "@interface Yyviewcontroller () <YYHeaderViewDelegate> 16/** 17 * To save All Packet data */@property (Nonatomic,strong) Nsarray *groupfriends;      @end @implementation yyviewcontroller #pragma mark-lazy load 24//1. Get data first, implement lazy Loading-(Nsarray *) groupfriends 26 {27 if (_groupfriends==nil) {nsstring *fullpath=[[nsbundle mainbundle]pathforresource:@ "Friends.plist" OfType : nil]; Nsarray *arraym=[nsarray Arraywithcontentsoffile:fullpath]; Nsmutablearray *models=[nsmutablearray ArrayWithCapacity:arrayM.count]; (Nsdictionary *dict in Arraym) {Yyqqgroupmodel *group=[yyqqgroupmodel QqgroupmodelwitHDICT:DICT]; [Models Addobject:group]; _groupfriends=[models copy]; Panax Notoginseng return _groupfriends;          (void) viewdidload [[Super viewdidload]; self.tableView.sectionHeaderHeight = 100; 45 #pragma mark-Set Data source 49//Return how many groups (Nsinteger) Numberofsectionsintableview: (UITableView *) TableView 51 { Self.groupFriends.count return;    53} 54//number of rows returned per group-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section 56 {57/// Remove the corresponding group model Yyqqgroupmodel *group=self.groupfriends[section]; 59////Returns the number of friends in the corresponding Group//return group.friends.count; 61 62//Here to judge if the group collapses, then return 0 rows, if the group opens, returns the actual number of rows//if (Group.isopen) {//return Group.friends.coun T         +//}else//{//return 0;//} (Group.isopen) {71//For expansion 72 return group.friends.count; }else 74 {75//representative toClosure of return 0; 77} 78} 79/per group of contents per line-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath 81 {82//1. Create cell Yyfriendcell *cell=[yyfriendcell Cellwithtableview:tableview]; 84 85//2. Set CE ll Yyqqgroupmodel *group=self.groupfriends[indexpath.section]; Yyfriendsmodel *friends=group.friends[indexpath.row]; Cell.friends=friends; 89//3. Returns a cell with a return cell; 94 #pragma mark-Proxy method 95//The method is called when a group header enters the field of view (UIView *) TableView: (UITableView *) TableView Viewforh Eaderinsection: (Nsinteger) Section 97 {98////1. Create head View//UIView *view = [[UIView alloc] init];100//Vie     W.backgroundcolor = [Uicolor graycolor];101/////2. Return to Head View 102//Return VIEW;103 104//Create custom Head View 105 Yyheaderview *headerview=[yyheaderview headerwithtableview:tableview];106 107//Set current controller as proxy 108 Headerview.deleg ATE=SELF;109//Set data for Head view YyqqgrouPmodel *groupmodel=self.groupfriends[section];111 headerview.group=groupmodel;112//Return to Head view 113 return Headervie w;114}115 117 #pragma mark-yyheaderviewdelegate118-(void) Headerviewdidclickheaderview: (Yyheaderview *) headerView119 {120//recall method of data source Refresh Data 121 [Self.tableview reloaddata];122}123//Set height of group header headers 124-(CGFloat) TableView: ( UITableView *) TableView heightforheaderinsection: (Nsinteger) section125 {126 return 30;127}128 129 #pragma mark hidden status bar -(BOOL) prefersStatusBarHidden131 {yes;133}134 @end

Third, code description

1. Project file structure

2. Attention points

(1) Adjust the size of the font: Self.textlabel.font=[uifont SYSTEMFONTOFSIZE:15.F];

(2)-(void) Layoutsubviews method. This method is called when the frame of the control is changed, and this method is generally used to adjust the position of the child controls, so be sure to call [Super Layoutsubviews];

(3) whenever the frame obtained in the Init method is 0;

(4) If the control is not displayed, there are some troubleshooting methods

A.frame is empty (frame not set) B.hidden is yesc.alpha<=0.1 (transparency) d. Not added to the parent control E. View the parent control above

(5) Note When setting the text of a button, be sure to set the state of the button

Correct: [self.btn settitle:_group.name forstate:uicontrolstatenormal]; error: Self.btn.titlelabel.text=_group.name;

(6) When you call the constructor method, you must first initialize the method of the parent class, first judge, then the initialization of its own properties

Self=[super initwithreuseidentifier:reuseidentifier]if (self) {...} (7) When a control is added to another view, the following methods are called

1) Called when it has been added to the parent view-(void) Didmovetosuperview

2) will be called-(void) Willmovetosuperview when it is about to be added to the parent view: (UIView *) Newsuperview

(8) Picture fill knowledge

1) Set the picture in BTN not fill the entire imageView btn.imageView.contentMode = Uiviewcontentmodecenter;

2) out of range pictures do not cut

Btn.imageView.clipsToBounds = NO;

Btn.imageView.layer.masksToBounds = NO;

Iv. Supplementary (agent)

Several steps to set up a proxy (1) If a button in a view is clicked, this time you need to refresh the data in the main controller. One way to do this is to have this property of the controller, and then use that property to refresh the data when the button is clicked. Another approach is to set the controller as the proxy for this view, and notify its agent (host controller) to refresh the data when a button in the view is clicked. (2) to become an agent is by the condition, there are several steps 1). Both parties agree on a protocol (proxy protocol, note naming specification), which customizes a protocol in the view, and provides a method in the protocol.

@protocol yyheaderviewdelegate <NSObject>

-(void) Headerviewdidclickheaderview: (Yyheaderview *) Headerview;

@end

2). Add an attribute variable of type ID in the view, and anyone who complies with the agreed protocol can become its proxy.

Delegate adhere to yyheaderviewdelegate this protocol, you can use the method in the Protocol

@property (Nonatomic,weak) id<yyheaderviewdelegate> delegate;

3). In the controller, follow the custom proxy protocol, you can use the method provided by the agent, in this method to refresh the data.

@interface Yyviewcontroller () <YYHeaderViewDelegate>

-(void) Headerviewdidclickheaderview: (Yyheaderview *) Headerview

{

[Self.tableview Reloaddata];

}

4). Set the controller as the agent for the button click event.

headerview.delegate=self;

iOS development UI chapter-using UITableView to complete a simple QQ friends List (ii)