IOS UITableView grouped display data List tutorial

There are two styles of UITableView: Uitableviewstyleplain and uitableviewstylegrouped. There is no essential difference between the two, but the latter is displayed in the Normal style by the group style. Today we'll look at the use of groups:

1, first of all, we introduce the grouping of TableView, initialize a tableview as follows

#pragma mark-Load table view

-(void) loadtableview{
_tableview=[[uitableview alloc] Initwithframe:cgrectmake (0,20, Kwidth, Kheight)    Style:uitableviewstylegrouped];
//Set up Agent
_tableview.delegate=self;
_tableview.datasource=self;
//Set up row high
_tableview.rowheight=60;
Hide the height _tableview.sectionfooterheight=0 of the grouped feet
;
[Self.view Addsubview:_tableview];
}

2, loading data, grouped data we have defined in the plist file, loading code as follows:

#pragma mark-Load data
-(void) loaddata{
NSString * path=[[nsbundle Mainbundle] pathforresource:@ "friend    S.plist "Oftype:nil];
_array=[nsarray Arraywithcontentsoffile:path];
}

3. Initialization Agent Method

#pragma  mark -  Set the number of groups-  (Nsinteger)  numberofsectionsintableview: (uitableview *) tableview{    return _array.count;} #pragma  mark -  set the height of the group-  ( CGFloat)  tableview: (uitableview *) Tableview heightforheaderinsection: (NSInteger) section{ 
   return 40; #pragma  mark -  Custom group header-  (uiview *)  tableview: (uitableview *) tableview  Viewforheaderinsection: (nsinteger) section{             
nsdictionary *dic=_array[section];
    nsstring * title=dic[@ "group"];     //1  Custom Head     uiview * view=[[uiview alloc]
 init];
     view.backgroundColor=[UIColor grayColor];
    view.layer.borderWidth=1;     view.layer.borderColor=[UIColor Whitecolor].
Cgcolor;          // 2  Add button     uibutton *
 button=[UIButton buttonWithType:UIButtonTypeCustom];
    [button setTitle:title forState:UIControlStateNormal];
    button.frame=cgrectmake (0, 0, KWIDTH, 40);
    button.tag=section;     [button addtarget:self action: @selector (clickthegroup:)  
Forcontrolevents:uicontroleventtouchupinside];
    [view addSubview:button];          //3  add arrows to the left     uiimageview *  imageview=[[uiimageview alloc] initwithframe:cgrectmake (5, 40/2.0-30/2.0, 30, 
30)];
    imageview.image=[uiimage imagenamed:@ "Disclosure.png"];
    imageView.tag=101;     [button addsubvIew:imageview];
    [_headimageview setobject:imageview forkey:@ (section)];
    return view; } #pragma  mark - uitableviewdatasource-  (Nsinteger)  tableview: (UITableView *) Tableview numberofrowsinsection: (Nsinteger) section{           
    return 0;     }

The effect chart is as follows:

4, we can click on a group to refresh the data, this effect is achieved by controlling the number of data in the current group, because two of the current grouping states are closed and open, so we need to define a dictionary to control the state, which is the index of the current grouping, and the value 1 is open. When the value is 2, it is closed. Each time we clicked, we need to reinitialize the current state, and the corresponding packet contains a data bar number of 0 when the current state changes.

-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) section{
int Flag=[_sta    te[@ (section)] intvalue];
Nsdictionary *dic=_array[section];
Nsarray * friends=dic[@ "Friends"];
if (flag) {return
friends.count;
}else{return
0;
}
}

5, refresh needs to control the rotation of the triangle icon, so we need to animate to complete the current effect

#pragma  mark -  Click Group information-  (void)  clickthegroup: (uibutton * )  button{
    int groupindex= (int) Button.tag;     int flag=0;//is used to control the re-instantiate button          if ([_ state[@ (Groupindex)] intvalue]==0) {        [_state setobject
: @ (1)  forkey:@ (Groupindex)];
        flag=0;     }else{        [_state setobject:@ (0)
 forkey:@ (Groupindex)];
        flag=1;
           &nbsp}       //Refresh the current group
    NSIndexSet * set=[[NSIndexSet alloc] initWithIndex:groupIndex];          [_tableview reloadsections:set withrowanimation: UitableViewrowanimationnone];          uiimageview * imageview=_headimageview[@ (Groupindex)
];
         //analog animations, each time refreshed so that the affine changes are restored to their original state     if (flag) {         imageview.transform=cgaffinetransformrotate (
Imageview.transform, m_pi_2);    &NBSP}          [uiview animatewithduration:0.3  animations:^{                  if (flag==0) {            imageview.transform=
Cgaffinetransformmakerotation ( m_pi_2);         }else{         
   imageview.transform=cgaffinetransformmakerotation (0);         }     }];    }

After the completion of the effect is as follows:

Animation Instant Effect

The title of the group in iOS custom UITableView Sectionview

Title bar height of section-(CGFloat) TableView: (uitableview *) Tableview heightforheaderinsection: (Nsinteger) Section {    if  (section == 0)        
 return 46;
    else         return 30.0f; }    -(uiview *) TableView: (uitableview *) Tableview viewforheaderinsection: (Nsinteger)
Section {    cgrect headerframe = cgrectmake (0, 0, 300, 30);
    cgfloat y = 2;     if  (section == 0)  {       
 headerframe = cgrectmake (0, 0, 300, 100);
        y = 18;    &NBSP}     uiview *headerview = [[uiview alloc]
 initwithframe:headerframe]; &nbsP;   uilabel *datelabel=[[uilabel alloc] initwithframe:cgrectmake (20, y,
 240, 24)];//Date label     datelabel.font=[uifont boldsystemfontofsize:16.0f];
    datelabel.textcolor = [uicolor darkgraycolor];
    datelabel.backgroundcolor=[uicolor clearcolor];     uilabel *agelabel=[[uilabel alloc] initwithframe:cgrectmake (216, y
,  88, 24)];//age label     agelabel.font=[uifont systemfontofsize:14.0];
    agelabel.textalignment=uitextalignmentright;
    agelabel.textcolor = [uicolor darkgraycolor];
    agelabel.backgroundcolor=[uicolor clearcolor];           nsdateformatter *dateformatter = [[
nsdateformatter alloc] init];     dateformatter.dateformat = @ "MM DD,YYYY";     datelabel.text = [nsstring stringwithformat:@ "%@",[dateformatter 
stringfromdate:[nsdate date]]];
    agelabel.text = @ "1 years old  2 days";
          [headerview addsubview:datelabel];
    [headerview addsubview:agelabel];
    return headerview; }