CODEWITHSUNDEEP
iosobjective-cuitableviewheightpadding
Jordan H
Jordan H

Reputation: 55705

Add padding (or increase height) between section index titles in UITableView

I have implemented a section index for my UITableView via the methods sectionIndexTitlesForTableView: and sectionForSectionIndexTitle:. I only have a few sections, and by default they are vertically centered on screen with very little space between each index title. I have seen in other apps where they increase the amount of space between the indexes, not dramatically but at least a few points to give them some breathing room, and increase accuracy when the user tries to tap on the one they want. I would like to know how I can accomplish that?

This is exactly what I want to obtain - notice the extra space between the indexes on the right:

enter image description here

Upvotes: 3

Views: 4542

Answers (1)

KDeogharkar
KDeogharkar

Reputation: 10959

What you can do is add extra spaces suggested in this answer.

First, let's create an array with the fake index.

NSArray *array = self.mydataArray; // here are your true index
self.sectionsTitle = [NSMutableArray array];
int n = array.count;

// In IOS 7 all index of the items are clumped together in the middle,
// making the items difficult to tap.
// As workaround we added "fake" sections index
// reference: https://stackoverflow.com/questions/18923729/uitableview-section-index-spacing-on-ios-7

for (int i = 0; i < n; i++){
    [self.sectionsTitle  addObject:array[i]];
    [self.sectionsTitle  addObject:@""];
}

Then, you can implement tableview delegate methods with the following approach:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    // In IOS 7 all index of the items are clumped together in the middle,
    // making the items difficult to tap.
    // As workaround we added "fake" sections index
    // reference: https://stackoverflow.com/questions/18923729/uitableview-section-index-spacing-on-ios-7
    if ([sectionsTitle[section] isEqualToString:@""]){
        return 0;
    }
    return x; // return your desire section height 
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    // In IOS 7 all index of the items are clumped together in the middle,
    // making the items difficult to tap.
    // As workaround we added "fake" sections index
    // reference: https://stackoverflow.com/questions/18923729/uitableview-section-index-spacing-on-ios-7
    if ([sectionsTitle[section] isEqualToString:@""]){
        return nil;
    }else{
       // return your desire header view here, 
       // if you are using the default section header view, 
       // you don't need to implement this method
    }

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
    return self.sectionsTitle;
}

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
    // In IOS 7 all index of the items are clumped together in the middle,
    // making the items difficult to tap.
    // As workaround we added "fake" sections index
    // reference: https://stackoverflow.com/questions/18923729/uitableview-section-index-spacing-on-ios-7
    if ([title isEqualToString:@""]){
         return -1;
    }
    return [sectionsTitle indexOfObject:title];
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // In IOS 7 all index of the items are clumped together in the middle,
    // making the items difficult to tap.
    // As workaround we added "fake" sections index
    // reference: https://stackoverflow.com/questions/18923729/uitableview-section-index-spacing-on-ios-7
    if ([sectionsTitle[section] isEqualToString:@""]){
        return 0;
    }
    return // your logic here;
}


Hope it will help.

Upvotes: 2

Related Questions