Follow

Customising the Table of Contents

You can customise the table of contents using the tableOfContents variable inside the viewDidLoad method:

- (void)viewDidLoad {
  [super viewDidLoad];

To hide unsectioned items set:

[tableOfContents setHidesUnsectionedItems:YES];

Padding around the edge:

[tableOfContents setEdgeInsets:UIEdgeInsetsMake(10,10,10,10)];

To customise the font family, color, alignment and amount of lines:

  [tableOfContents.articleTitleLabel setFont:[UIFont fontWithName:@"Georgia" size:18]];
  [tableOfContents.articleTitleLabel setNumberOfLines:5];
  [tableOfContents.sectionTitleLabel setFont:[UIFont fontWithName:@"Arial" size:21]];
  [tableOfContents.sectionTitleLabel setNumberOfLines:5];
  [tableOfContents.sectionTitleLabel setTextColor:[UIColor colorWithRed:1 green:0.6 blue:0.2 alpha:1.0]];
  [tableOfContents.sectionTitleLabel setTextAlignment:UITextAlignmentLeft];

To set the background color of the article/section links:

  [tableOfContents.sectionTitleLabel setBackgroundColor:[UIColor colorWithRed:1 green:0.8 blue:0.6 alpha:0.6]];
  [tableOfContents.articleTitleLabel setBackgroundColor:[UIColor colorWithRed:1 green:0.8 blue:0.6 alpha:0.1]];

To set border colours and widths on article/section links:

  [tableOfContents setArticleBorderColor:[UIColor lightGrayColor]];
  [tableOfContents setSectionBorderColor:[UIColor lightGrayColor]];
  [tableOfContents setArticleBorderDimensions:UIEdgeInsetsMake(1,0,1,0)];
  [tableOfContents setSectionBorderDimensions:UIEdgeInsetsMake(5,0,5,0)];

To hide the first article border in a section:

[tableOfContents setHidesFirstArticleBorderInSection:YES];

Differentiating between sections

This is currently in beta and will not work with the current version of the framework. When released this section will be updated and may be altered.

It is possible to style the sections within the table of contents differently from one another. You will need to call this function in which you can specify styles according to the name of each section. You set the style in the if/else loop and then apply them to the elements at the end.

- (void)contents:(KGTableOfContentsControl*)contents willRenderItemType:(KGTableOfContentsItemType)type pageNumber:(NSUInteger)page inView:(UIView*)view {
  if (type == KGTableOfContentsSeparatorItem) return;
 
  NSString *section = [contents.dataSource sectionForPageNumber:page];
  UIColor *sectionBackgroundColor;
  if ([section isEqualToString:@"News"])
    sectionBackgroundColor = [UIColor redColor];  
  else if ([section isEqualToString:@"Sport"])
    sectionBackgroundColor = [UIColor blueColor];
 
  if (type == KGTableOfContentsSectionItem) {
    [view setBackgroundColor:sectionBackgroundColor];
  }
}
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk