UITableView section header on right instead of default on left

Question

I am working on an app where it is required that the Header of section should be on right instead of the default left.

I searched and many geeks suggested to implement:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static UIView *headerView;

    if (headerView != nil)
        return headerView;

    NSString *headerText = NSLocalizedString(@"البحث الأخيرة", nil);

    // set the container width to a known value so that we can center a label in it
    // it will get resized by the tableview since we set autoresizeflags
    float headerWidth = 150.0f;
    float padding = 10.0f; // an arbitrary amount to center the label in the container

    headerView = [[UIView alloc] initWithFrame:CGRectMake(300, 0.0f, headerWidth, 44.0f)];
    headerView.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    // create the label centered in the container, then set the appropriate autoresize mask
    UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(padding, 0, headerWidth - 2.0f * padding, 44.0f)];
    headerLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    headerLabel.textAlignment = UITextAlignmentRight;
    headerLabel.text = headerText;

    [headerView addSubview:headerLabel];

    return headerView;
}

However, when i try to increase the x-coordinate of Header view frame, it does not effect the position of the view. And its always in the centre of the table view.

I need the header to be on the right.

Instead of going with a flexibleWidth, can't you force it to be full width? Then the view will consume the full width and justify the text right. — bryanmac, Oct 01 '12 at 11:25
You already selected an answer that is mostly correct, but adding spaces to get a margin is a real hack. The proper way to solve your problem is to create an empty view (or one with a background color) and use that as the headerView. Then you add a UILabel to that container view, and offset it a bit from the right side. This concept - using an empty view as a container to place other views is a common and useful tool. — David H, Oct 01 '12 at 13:14
@DavidH you are right. The idea of adding spaces is not good. Though it worked for me for the time being. As I mentioned in my question that the view was always getting on centre where as I need it to be on the right. Setting the frame wasn't working. Also the label was Right-aligned. I understand that using a UIView is much better to have more customization options. Thanks for the comment! — Abdullah Umer, Oct 01 '12 at 15:40
and one thing more. Returning the UILabel as proposed by ilight gives exactly the same look as of the default. — Abdullah Umer, Oct 01 '12 at 15:41

score 15 · Accepted Answer · edited Feb 23 '18 at 11:31

15

This worked for me, however play with the frame's co-ordinates to align according to your needs

-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UILabel *label = [[UILabel alloc] init];
    label.text=@"header title";
    label.backgroundColor=[UIColor clearColor];
    label.textAlignment = NSTextAlignmentRight;
    return label;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 50;
}

edited Feb 23 '18 at 11:31

iHarshil

739
10
22

answered Oct 01 '12 at 11:28

ilight

1,622
2
22
44

1

Thanks! It worked :). However, the starting of text was almost touching the view border. I added some spaces to the text and now the text is nudged a bit towards the left. – Abdullah Umer Oct 01 '12 at 11:40
3

`UITextAlignmentRight` is deprecated, should use `NSTextAlignmentRight` – Ascendant Mar 04 '14 at 18:20

score 9 · Answer 2 · answered Dec 04 '15 at 23:50

I had trouble changing the text with the above solution, this worked for me and places with proper spacing from the trailing edge of the table view. PS Solution in Swift

UITableViewDataSource

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 30
}

UITAbleViewDelegate

func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return "Header Title"
}

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    let header: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    header.textLabel?.font = UIFont(name: "AvenirNext-Regular", size: 14.0)
    header.textLabel?.textAlignment = NSTextAlignment.Right

}

Ilker Baltaci · Answer 3 · 2012-10-01T11:31:22.183

firt of all i would not init the uiview with

 headerView = [[UIView alloc] initWithFrame:CGRectMake(300, 0.0f, headerWidth, 44.0f)];

Since your origin x coordinate will be 300.For header and footerviews set your origin coordinate to CGPoint (0.0) and just play with size.

Try to make the label as big as the view it self and set its alignment to right.

UIView *headerTitleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 40)];

UILabel *sectionTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, headerTitleView.frame.size.width, 40)];
sectionTitleLabel.backgroundColor = [UIColor clearColor];
sectionTitleLabel.textAlignment = UITextAlignmentright;

another possibility is add a UIlabel somewhere on the right side of the header view with center alignment.

score 0 · Answer 4 · answered Oct 01 '12 at 11:30

I'm not sure I understand the situation, but I'm assuming that you just want the label to be aligned right instead of left.

Adjusting the frame value for your header view won't work because the tableView is responsible for positioning it and it will ignore any values you set here.

Your only option is to work with the subviews of the headerView.

Example, setting your headerLabel position to be aligned to the right :

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static UIView *headerView;

    if (headerView != nil)
        return headerView;

    NSString *headerText = NSLocalizedString(@"البحث الأخيرة", nil);

    float headerWidth = 320.0f;
    float padding = 10.0f;

    headerView = [[UIView alloc] initWithFrame:CGRectMake(300, 0.0f, headerWidth, 44.0f)];
    headerView.autoresizesSubviews = YES;

    // create the label centered in the container, then set the appropriate autoresize mask
    UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, headerWidth, 44.0f)];
    headerLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth;
    headerLabel.textAlignment = UITextAlignmentRight;
    headerLabel.text = headerText;

    CGSize textSize = [headerText sizeWithFont:headerLabel.font constrainedToSize:headerLabel.frame.size lineBreakMode:UILineBreakModeWordWrap];
    headerLabel.frame = CGRectMake(headerWidth - (textSize.width + padding), headerLabel.frame.origin.y, textSize.width, headerLabel.frame.size.height);

    [headerView addSubview:headerLabel];

    return headerView;
}

UITableView section header on right instead of default on left

4 Answers4