iOS Development UI chapter-using UITableView to complete a simple QQ friends list (ii)

<span id="Label3"></p><p><p>first, the realization Effect</p></p><p><p></p></p><p><p>second, the implementation of the Code</p></p><p><p>1. Data Model Section</p></p><p><p>YYQQGroupModel.h file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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< C8/>*/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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYQQGROUPMODEL.M file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYFriendsModel.h file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYFRIENDSMODEL.M file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>2. View section</p></p><p><p>YYfriendCell.h file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYFRIENDCELL.M file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre> 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</pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYHeaderView.h file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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 <strong><span style="color: #ff0000;">@interface Yyheaderview:uitableviewheaderfooterview //for the head and bottom view</span></strong>@property ( Nonatomic,strong) Yyqqgroupmodel *group;21//provide A class method to create a head view of the X + (instancetype) headerwithtableview: (uitableview *) Tableview;23//delegate comply with Yyheaderviewdelegate this agreement, you can use the method in the agreement @property (nonatomic,weak) id< Yyheaderviewdelegate> delegate;27 @end</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYHEADERVIEW.M file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre>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<strong><strong><span style="color: #ff0000;">//implement a head control, Add a button to a UIView (including child controls Image,lable) and add a lable to the tactical online headcount/total number of people</span></strong></strong>9 #import "YYHeaderView.h" #import "YYQQGroupModel.h" @interface yyheaderview () @property (nonatomic,strong) UI Button *btn; @property (nonatomic,strong) UILabel *lab; @end @implementation Yyheaderview 17 18 19/<strong><strong><span style="color: #ff0000;">/create A custom head group view that uses a buffer loop mechanism due to the comparison of multi-friend groups</span></strong></strong>+ (instancetype) headerwithtableview: (uitableview *) tableView {static nsstring *[email protected] "header"; 2<strong><strong><span style="color: #ff0000;">3//go to cache pool to fetch data (object) based on ID identification number</span></strong></strong>Yyheaderview *headerview=[tableview dequeuereusablecellwithidentifier:indentifier]; 25//if not, Create your own if (headerview==nil) {headerview=[[yyheaderview Alloc]initwithreuseidentifier:inden tifier]; Call refactoring Method 28} 29//returns a head view of return headerview; 31} 32 33<strong><strong><span style="color: #ff0000;">#warning Note that the frame that is set for the control in the construction method is not valid (setting the frame in init is not valid)</span></strong></strong>-(id) initwithreuseidentifier: (nsstring *) reuseidentifier 35 {36<span style="color: #ff0000;"><span style="color: #ff0000;">//initialize The constructor method in the parent class, the refactoring method must first call the parent Class's method</span></span>PNS if (self=[super initwithreuseidentifier:reuseidentifier]) {38//create a button UIButton *btn=[uibutton buttonwithtype:uibuttontypecustom]; 40//set the properties of the button 41//set the background picture of the button in normal state [btn setbackgroundimage:[uiimage imagenamed:@ "buddy_header_bg" ] forstate: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<span style="color: #ff0000;"><span style="color: #ff0000;">//set the inner margin of the small triangle picture</span></span>Wuyi 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<span style="color: #ff0000;"><span style="color: #ff0000;">//add button to view (head Control)</span></span>[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; 78} 79<strong>Return self <strong> <span style="color: #ff0000;">;//returns the header control that sets the data<br></span></strong></strong></pre><pre><pre><strong> <span style="color: #ff0000;">returns the object that sets the data for the head control Uitableviewheaderfooterview</span></strong></pre></pre><pre><strong><strong><span style="color: #ff0000;"><br></span></strong></strong>80} 81 82/<span style="color: #ff0000;"><span style="color: #ff0000;">/click The button, it will call this method, and then will invoke the proxy method to pass yourself in, let the agent to implement display data processing</span></span>-(void) btnonclick: (UIButton *) btn (*) (@) NSLog (@ "button was clicked"); 86//modify isopen properties of the model 87//1. modifying model data self.gr oup.open=!self.group.isopen; 89//2. Refresh table 90//(the function of refreshing the table is done by the controller, where a proxy can be set up), when the button is clicked, notifies the agent to refresh the table 91//notify the agent if ([self.delegate respon Dstoselector: @selector (headerviewdidclickheaderview:)]) {//<span style="color: #ff0000;"><span style="color: #ff0000;">to determine if there is a write agent method, return Yes to indicate that there is a proxy method before calling</span></span>) [self.delegate headerviewdidclickheaderview:self]; 94} 95} 96 97/<strong><strong><span style="color: #ff0000;">/when The frame value of the control changes, the method is called automatically (the method is in uiview), so the Control's frame can be set in the method;</span></strong></strong>98-(void) Layoutsubviews<strong><strong><span style="color: #ff0000;">//layout child controls</span></strong></strong> #warning don't forget to call the parent class method 101 [super Layoutsubviews];102//set button frame and head view as size 103 Self.btn.frame=self.bou Nds Self is 104 105//set lab frame106 cgfloat padding=20;107 cgfloat labw=50;108 cgfloat labh=self.frame.size. height;109 cgfloat laby=0;110 cgfloat labx=self.frame.size.width-padding-labw;111 self.lab.frame=CGRectMake (la bX, labY, labw, labh);}113 #pragma mark-when A control is added to another view, it calls the following method 115//when it has been added to the parent view, it will call The--(void) Didmovetosupe rview117 {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 downward 122 self.btn.imageView.transform = cgaffinetransformmakerotation (m_pi_2); 123}124}125 12 6//will be added to the parent view when the 127-(void) willmovetosuperview: (UIView *) newSuperview128 {129 NSLog (@ "will be added to the View") is called; 130}131 132 1 33//override get method, Set data 134-(void) setgroup: (yyqqgroupmodel *) group135 {136 _group=group;137//set Group header 138 139//self.b Tn.titleLabel.text=_group.name;140 #warning Note that when you set the text of a button, be sure to set the state of the button, like the above setting does not show 141 [self.btn settitle:_group.name Forstate:uicontro lstatenormal];142 NSLog (@ "%@", self.btn.titleLabel.text); 143//set Online number 144 self.lab.text=[nsstring Stringwithform at:@ "%@/%d", _group.online,_group.friends.count];145}146 147 @end</pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>3. Controller section</p></p><p><p>YYViewController.h file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>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</pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>YYVIEWCONTROLLER.M file</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre> 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<span style="color: #ff0000;"><span style="color: #ff0000;">//represents to expand, displays the number of rows</span></span>Group.friends.count return; }else 74 {75/<span style="color: #ff0000;"><span style="color: #ff0000;">/rep to collapse only the head control, no row</span></span>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];<span style="color: #ff0000;"><span style="color: #ff0000;">//the Layout Child control method is also called internally</span></span>84 85//2. Set Cell Yyqqgroupmodel *group=self.groupfriends[indexpath.section]; Yyfriendsmodel *friends=group.friends[indexpath.row]; cell.friends=friends; Call the Get method to implement data display 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//<span style="color: #ff0000;"><span style="color: #ff0000;">Create a custom head view while internally invoking a method of child control layout</span></span>Yyheaderview *headerview=[yyheaderview headerwithtableview:tableview];106 107//set Current controller as proxy 108 Headervi Ew.delegate=self;109//set Head View data yyqqgroupmodel *groupmodel=self.groupfriends[section];111 Headerview.group =groupmodel;<span style="color: #ff0000;"><span style="color: #ff0000;">the Set method is called to display the Data.</span></span>112//return Head View 113 return headerview;114}115 117 #pragma mark-yyheaderviewdelegate118-(void) headerviewdidclic Kheaderview: (yyheaderview *) headerView119 {120//recall Data source method Refresh Data 121 [self.tableview Reloaddata];122}123//set group header Header Height of 124-(cgfloat) tableView: (uitableview *) tableView heightforheaderinsection: (nsinteger) section125 {126 return 30; 127}128 129 #pragma mark hidden status bar-(BOOL) prefersStatusBarHidden131 {return yes;133}134 @end</pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>third, Code Description</p></p><p><p>1. Project file Structure</p></p><p><p></p></p><p><p>2. Attention points</p></p><p><p>(1) adjust the size of the font: Self.textlabel.font=[uifont systemfontofsize:15.f];</p></p><p><p>(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];</p></p><p><p>(3) whenever the frame obtained in the Init method is 0;</p></p><p><p>(4) if the control is not displayed, there are some troubleshooting methods</p></p>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<p><p>(5) Note When setting the text of a button, be sure to set the state of the button</p></p>Correct: [self.btn settitle:_group.name forstate:uicontrolstatenormal]; error: self.btn.titlelabel.text=_group.name;<p><p>(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</p></p>Self=[super initwithreuseidentifier:reuseidentifier]if (self) {...} (7) when a control is added to another view, the following methods are called<p><p>1) called when it has been added to the parent View-(void) Didmovetosuperview</p></p><p><p>2) will be Called-(void) Willmovetosuperview when it is about to be added to the parent view: (UIView *) Newsuperview</p></p><p><p>(8) Picture Fill Knowledge</p></p><p><p>1) set the picture in BTN not fill the entire imageView Btn.imageView.contentMode = uiviewcontentmodecenter;</p></p><p><p>2) out of range pictures do not cut</p></p><p><p>Btn.imageView.clipsToBounds = NO;</p></p><p><p>Btn.imageView.layer.masksToBounds = NO;</p></p><p><p>Iv. Supplementary (agent)</p></p>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.<p><p>@protocol yyheaderviewdelegate <NSObject></p></p><p><p>-(void) headerviewdidclickheaderview: (yyheaderview *) headerview;</p></p><p><p>@end</p></p>2). add an attribute variable of type ID in the view, and anyone who complies with the agreed Protocol can become its proxy.<p><p>Delegate adhere to yyheaderviewdelegate this protocol, you can use the method in the Protocol</p></p><p><p>@property (nonatomic,weak) id<yyheaderviewdelegate> delegate;</p></p>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.<p><p>@interface Yyviewcontroller () <YYHeaderViewDelegate></p></p><p><p>-(void) headerviewdidclickheaderview: (yyheaderview *) Headerview</p></p><p><p>{</p></p><p><p>[self.tableview reloaddata];</p></p><p><p>}</p></p>4). set the controller as the agent for the button click Event.<p><p>headerview.delegate=self;</p></p><p><p>iOS Development UI chapter-using UITableView to complete a simple QQ friends list (ii)</p></p></span>