Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I found another relatively simple way to solve that problem. By using this method we will not required to alter our cell which is almost always related to data array index, potentially causing mess in our view controller.</p> <p>First, we add this following properties to our controller class:</p> <pre><code>@property (strong, nonatomic) NSMutableArray* collapsedSections; @property (strong, nonatomic) NSMutableArray* sectionViews; </code></pre> <p><code>collapsedSections</code> will save collapsed section numbers. <code>sectionViews</code> will store our custom section view.</p> <p>Synthesize it:</p> <pre><code>@synthesize collapsedSections; @synthesize sectionViews; </code></pre> <p>Initialize it:</p> <pre><code>- (void) viewDidLoad { [super viewDidLoad]; self.collapsedSections = [NSMutableArray array]; self.sectionViews = [NSMutableArray array]; } </code></pre> <p>After that, we must connect our UITableView so it can be accessed from within our view controller class:</p> <pre><code>@property (strong, nonatomic) IBOutlet UITableView *tblMain; </code></pre> <p>Connect it from XIB to view controller using <code>ctrl + drag</code> like usually.</p> <p>Then we create view as custom section header for our table view by implementing this UITableView delegate:</p> <pre><code>- (UIView*) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { // Create View CGRect frame = CGRectZero; frame.origin = CGPointZero; frame.size.height = 30.f; frame.size.width = tableView.bounds.size.width; UIView* view = [[UIView alloc] initWithFrame:frame]; [view setBackgroundColor:[UIColor blueColor]]; // Add label for title NSArray* titles = @[@"Title 1", @"Title 2", @"Title 3"]; NSString* selectedTitle = [titles objectAtIndex:section]; CGRect labelFrame = frame; labelFrame.size.height = 30.f; labelFrame.size.width -= 20.f; labelFrame.origin.x += 10.f; UILabel* titleLabel = [[UILabel alloc] initWithFrame:labelFrame]; [titleLabel setText:selectedTitle]; [titleLabel setTextColor:[UIColor whiteColor]]; [view addSubview:titleLabel]; // Add touch gesture [self attachTapGestureToView:view]; // Save created view to our class property array [self saveSectionView:view inSection:section]; return view; } </code></pre> <p>Next, we implement method to save our previously created custom section header in class property:</p> <pre><code>- (void) saveSectionView:(UIView*) view inSection:(NSInteger) section { NSInteger sectionCount = [self numberOfSectionsInTableView:[self tblMain]]; if(section &lt; sectionCount) { if([[self sectionViews] indexOfObject:view] == NSNotFound) { [[self sectionViews] addObject:view]; } } } </code></pre> <p>Add <code>UIGestureRecognizerDelegate</code> to our view controller .h file:</p> <pre><code>@interface MyViewController : UIViewController&lt;UITableViewDelegate, UITableViewDataSource, UIGestureRecognizerDelegate&gt; </code></pre> <p>Then we create method <code>attachTapGestureToView:</code></p> <pre><code>- (void) attachTapGestureToView:(UIView*) view { UITapGestureRecognizer* tapAction = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onTap:)]; [tapAction setDelegate:self]; [view addGestureRecognizer:tapAction]; } </code></pre> <p>Above method will add tap gesture recognizer to all of section view we created before. Next we should implement <code>onTap:</code> selector</p> <pre><code>- (void) onTap:(UITapGestureRecognizer*) gestureRecognizer { // Take view who attach current recognizer UIView* sectionView = [gestureRecognizer view]; // [self sectionViews] is Array containing our custom section views NSInteger section = [self sectionNumberOfView:sectionView]; // [self tblMain] is our connected IBOutlet table view NSInteger sectionCount = [self numberOfSectionsInTableView:[self tblMain]]; // If section more than section count minus one set at last section = section &gt; (sectionCount - 1) ? 2 : section; [self toggleCollapseSection:section]; } </code></pre> <p>Above method will invoked when user tap any of our table view section. This method search correct section number based on our <code>sectionViews</code> array we created before.</p> <p>Also, we implement method to get wihch section of header view belongs to.</p> <pre><code>- (NSInteger) sectionNumberOfView:(UIView*) view { UILabel* label = [[view subviews] objectAtIndex:0]; NSInteger sectionNum = 0; for(UIView* sectionView in [self sectionViews]) { UILabel* sectionLabel = [[sectionView subviews] objectAtIndex:0]; //NSLog(@"Section: %d -&gt; %@ vs %@", sectionNum, [label text], [sectionLabel text]); if([[label text] isEqualToString:[sectionLabel text]]) { return sectionNum; } sectionNum++; } return NSNotFound; } </code></pre> <p>Next, we must implement method <code>toggleCollapseSection:</code></p> <pre><code>- (void) toggleCollapseSection:(NSInteger) section { if([self isCollapsedSection:section]) { [self removeCollapsedSection:section]; } else { [self addCollapsedSection:section]; } [[self tblMain] reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade]; } </code></pre> <p>This method will insert/remove section number to our <code>collapsedSections</code> array we created before. When a section number inserted to that array, it means that the section should be collapsed and expanded if otherwise.</p> <p>Next we implement <code>removeCollapsedSection:</code>, <code>addCollapsedSection:section</code> and <code>isCollapsedSection:section</code></p> <pre><code>- (BOOL)isCollapsedSection:(NSInteger) section { for(NSNumber* existing in [self collapsedSections]) { NSInteger current = [existing integerValue]; if(current == section) { return YES; } } return NO; } - (void)removeCollapsedSection:(NSInteger) section { [[self collapsedSections] removeObjectIdenticalTo:[NSNumber numberWithInteger:section]]; } - (void)addCollapsedSection:(NSInteger) section { [[self collapsedSections] addObject:[NSNumber numberWithInteger:section]]; } </code></pre> <p>This three method is just helpers to make us easier in accessing <code>collapsedSections</code> array.</p> <p>Finally, implement this table view delegate so our custom section views looks nice.</p> <pre><code>- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 30.f; // Same as each custom section view height } </code></pre> <p>Hope it helps.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload