Accordion Section Header Text Alignment


#1

I have created an accordion with multiple sections.  I am trying to align the header text to left.  I have tried using     sectionHeader.sectionTitleLabel.textAlignment = NSTextAlignment.Left and/or    

var section = SEssentialsAccordionSection(frame: CGRectMake(0, 0, accordian.bounds.size.width, 30), andHeader: sectionHeader)
    section.header.sectionTitleLabel.textAlignment = NSTextAlignment.Left
Nothing worked.  Any help regarding this appreciated.

Thanks


#2

Don’t know why this works, but it does:

    SEssentialsAccordionSection *section = [[SEssentialsAccordionSection alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, MENU_HEADER_HEIGHT) andTitle:name];
    
    section.header.style.font = [UIFont fontWithName:@"Nunito-Regular" size:fontSize];
     section.header.sectionTitleLabel.textAlignment = NSTextAlignmentLeft;
     section.header.sectionTitleLabel.adjustsFontSizeToFitWidth = YES;
     section.header.sectionTitleLabel.minimumScaleFactor = 0.5;        // Resize the text to make it fit if necessary
 
    CGRect frame = section.header.sectionTitleLabel.frame;
    
     section.header.sectionTitleLabel.autoresizingMask = UIViewAutoresizingNone; //UIViewAutoresizingFlexibleWidth;
    frame.origin.y = 0;
    frame.origin.x = MENU_TITLE_OFFSET; // Indent the text a little
     frame.size.height = MENU_HEADER_HEIGHT;
     frame.size.width = self.bounds.size.width - 2*MENU_TITLE_OFFSET;
     section.header.sectionTitleLabel.frame = frame;

    section.header.sectionTitleLabel = nil; // THIS LINE forces it to resize and draw label which makes it work

Unfortunately, it messes up the style in the open or close section so that I can’t have the title change colors when open or closed.  However, if that doesn’t affect you, this definitely gets the text left aligned.


#3

Can someone tell us how to left align the text and still be able to have the text change colors when open or closed?

If I change the fontColor in the open and close section delegate methods, it only works if I remove the line in my previous post where I set the title label to nil.

When I set the label to nil, the color of the text remains whatever color I first use in the above routine.  If I don’t set the label to nil, the color of the text changes when I open and close the headers.  

I want both text alignment and color changes!


#4

Greetings Programs!

I would suggest using a custom header which will solve your problem.

Using the AccordianHowToCustomHeaderApp, add two properties for the two labels in the CustomHeader class:

// CustomHeader.h
@property (nonatomic, retain) UILabel *lineOne;
@property (nonatomic, retain) UILabel *lineTwo;

// CustomHeader.m
@synthesize lineOne, lineTwo;

// Remove the "UILabel *" type from the instantiation of the two labels so it
// uses the property.

In ViewController.h, make sure to set the delegate:

accordion.delegate = self;

and then add the didOpenSection/didCloseSection delegate methods:

- (void)accordion:(SEssentialsAccordion *)accordion didOpenSection:(SEssentialsAccordionSection *)section
{
	// Remember to cast the header to the custom class.
	((CustomHeader *)section.header).lineOne.textColor = [UIColor blueColor];
	((CustomHeader *)section.header).lineTwo.textColor = [UIColor redColor];
}

- (void)accordion:(SEssentialsAccordion *)accordion didCloseSection:(SEssentialsAccordionSection *)section
{
	// Remember to cast the header to the custom class.
	((CustomHeader *)section.header).lineOne.textColor = [UIColor redColor];
	((CustomHeader *)section.header).lineTwo.textColor = [UIColor blueColor];
}

Wg


#5

Here’s the header using your code:

//
// GieblerHeader.h
//

#import <ShinobiEssentials/ShinobiEssentials.h>

@interface GieblerHeader : SEssentialsAccordionSectionHeader

@property (nonatomic, retain) UILabel *titleLabel;

@end

//
// GieblerHeader.m
//

#import "GieblerHeader.h"

#define MENU_TITLE_OFFSET 30
#define MENU_HEADER_HEIGHT 100
#define FONT_SIZE 8

@implementation GieblerHeader

@synthesize titleLabel;

- (id)initWithFrame:(CGRect)frame andTitle:(NSString *)title
{
    if (self = [super initWithFrame:frame andTitle:@""]) {
        [self configureHeaderWithText:title];
    }
    
    return self;
}

- (void)configureHeaderWithText:(NSString *)title
{
    CGRect titleFrame = self.sectionTitleLabel.bounds;
    titleFrame.origin.y = 0;
    titleFrame.origin.x = MENU_TITLE_OFFSET; // Indent the text a little
    titleFrame.size.height = MENU_HEADER_HEIGHT;
    titleFrame.size.width = self.frame.size.width - (2 * MENU_TITLE_OFFSET);

    titleLabel = [[UILabel alloc] initWithFrame:titleFrame];
    titleLabel.font = [UIFont fontWithName:@"Nunito-Regular" size:FONT_SIZE];
    titleLabel.autoresizingMask = UIViewAutoresizingNone; //UIViewAutoresizingFlexibleWidth;
    titleLabel.textAlignment = NSTextAlignmentLeft;
    titleLabel.adjustsFontSizeToFitWidth = YES;
    titleLabel.minimumScaleFactor = 0.5;
    titleLabel.textColor = [UIColor redColor];
    titleLabel.text = title;
    
    [self addSubview:titleLabel];
}

@end

Instantiate with:

SEssentialsAccordionSectionHeader *header = [[GieblerHeader alloc] initWithFrame:CGRectMake(0, 0, 400, 100) andTitle:@"Hello World!"];
    SEssentialsAccordionSection *section = [[SEssentialsAccordionSection alloc] initWithFrame:header.bounds andHeader:header];
    [accordion addSection:section];

And delegate methods:

- (void)accordion:(SEssentialsAccordion *)accordion didOpenSection:(SEssentialsAccordionSection *)section
{
    // Remember to cast the header to the custom class.
    ((GieblerHeader *)section.header).titleLabel.textColor = [UIColor blueColor];
}

- (void)accordion:(SEssentialsAccordion *)accordion didCloseSection:(SEssentialsAccordionSection *)section
{
    // Remember to cast the header to the custom class.
    ((GieblerHeader *)section.header).titleLabel.textColor = [UIColor redColor];
}

Wg


#6

Thanks for the help.  I had already added additional labels which I could change colors for, but I was hoping to use the internal label instead of placing an additional label over it.


#7

Unfortunately, you won’t be able to get away from the default alignment of the default label and will need to use a custom header.

Similar to your original code, the following will add a label with the correct orientation without the need for a custom header (and you shouldn’t experience the issue you had with the color and nil text). In addition, it will also remove the default label. However, you will not be able to change the alignment in the didOpenSection/didCloseSection delegate methods as you are with the custom header.

SEssentialsAccordionSection *section = [[SEssentialsAccordionSection alloc] initWithFrame:CGRectMake(0, 0, 100, 50)
                                                                                         andTitle:@"Hello World"];

// Create a label with the same frame and text as the default one.
UILabel *label = [[UILabel alloc] initWithFrame:section.header.sectionTitleLabel.frame];

// Set a tag for it.
label.tag = 99;

// Set the alignment.
label.textAlignment = NSTextAlignmentLeft;

// Set the label text.
label.text = section.header.sectionTitleLabel.text;
[label sizeToFit];

// Remove the default title label.
UIView *headerView = section.header.sectionTitleLabel.superview;
[section.header.sectionTitleLabel removeFromSuperview];

// Add the new title label.
[headerView addSubview:label];

// If you set the default title label property to the new label, it will
// lose the alignment and will be overridden with the default alignment.
//section.header.sectionTitleLabel = label;

// Create the content that shows when the section is opened

[self.accordion addSection:section];

- (void)accordion:(SEssentialsAccordion *)accordion didOpenSection:(SEssentialsAccordionSection *)section
{
    // Get the custom label we added to the header.
    UILabel *textLabel = (UILabel *)[section.header viewWithTag:99];
    
    textLabel.textColor = [UIColor blueColor];
    
    // Even with adding a new label, setting the alignment will not work here.
    //textLabel.textAlignment = NSTextAlignmentRight;
    //
    // But this will work in the custom header.
    //((GieblerHeader *)section.header).titleLabel.textAlignment = NSTextAlignmentRight;
}

Wg


#8

Thank you.  This is very helpful.  It seems to that this must be easily implemented rather than going through all the above :slight_smile: