Custom view is not fit to header in UItableview

Question

Hi i have tried to set custom view on tableview header but custom view is not fit to header.

Custom view is coming like below image,in this image custom view is orange color and header view is gray color.But i want fit custom view is full of header view.

please help.

myCode:

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

        UIView *sectionView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, _TableList.frame.size.width, 80)];
        header = [[HeaderView alloc] initWithFrame:CGRectMake(sectionView.frame.origin.x, sectionView.frame.origin.y, sectionView.frame.size.width, sectionView.frame.size.height)];
        [sectionView addSubview:header];
        sectionView.tag=section;
        sectionView.backgroundColor = [UIColor grayColor];

        UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
        [sectionView addGestureRecognizer:headerTapped];

        return  sectionView;
    }

Why are you using two views? Just keep headerView and set its frame like this - UIView *sectionView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, _TableList.bounds.size.width, 80)]; — Bharat Modi, Jul 21 '16 at 06:31
Hi Bharat Modi,I am taking custom view for avoiding programatic coding on header when applying fields on this — , Jul 21 '16 at 06:39
Hi user3182143, sorry for not replying.you code is useful but not my requirement.if you don't mid.please tel me how to fit custom view on header for reducing programatic code when adding fields on custom view. — , Jul 21 '16 at 07:10

Jaimish · Accepted Answer · 2016-07-21T11:20:34.987

3

If you use Xib to load custom view as a section header then do the code like below:

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    HeaderView *headerview = [[[NSBundle mainBundle] loadNibNamed:@"SecHeader"
                                                            owner:self
                                                          options:nil] objectAtIndex:0];
    headerview.frame = CGRectMake(0, 0, tableView.frame.size.width, 80);

    UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
    [headerview addGestureRecognizer:headerTapped];

    return headerview;
}

edited Jul 21 '16 at 11:20

answered Jul 21 '16 at 11:14

Jaimish

629
5
15

Happy to help you! @Anilkumar – Jaimish Jul 21 '16 at 11:28
@Anilkumar If the story board solution helped you then upvote that also...Thanks – Jaimish Jul 21 '16 at 11:31

score 1 · Answer 2 · answered Jul 21 '16 at 06:25

1

You can use UITableViewHeaderFooterView. Create your custom view as subclass of UITableViewHeaderFooterView. Use proper constraints .Now use this view as header view.

YourHeaderView *YourHeaderView = [self.tableView dequeueReusableHeaderFooterViewWithIdentifier:@"YourHeaderViewIdentifier"];

answered Jul 21 '16 at 06:25

Vishal Sonawane

2,637
2
16
21

I have same bug, my customHeaderView width is off screen when I start it on iPhone 5, but how do I make constraints between my customHeaderView: UITableViewHeaderFooterView & tableView width? Should I do it in func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {...} – Konstantin Feb 23 '19 at 06:12
@Konstantin Your customHeaderView is nothing but UITableViewHeaderFooterView. So when you will apply constraints to its subviews they should work fine. – Vishal Sonawane Feb 25 '19 at 08:36
I think I figured out what's causing this problem, my customHeaderView has xib which is UITableViewCell instead of UIView, but I haven't tried it. Still Header width is bigger than iPhone screen width, when used on 5 or 5s etc. – Konstantin Feb 25 '19 at 08:39

score 1 · Answer 3 · answered Jul 21 '16 at 06:25

Try to use autolayout

[header setTranslatesAutoresizingMaskIntoConstraints:NO];
NSDictionary *views = NSDictionaryOfVariableBindings(header);
NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[header]-|" options:0 metrics:nil views:views];
NSArray *verticalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[header]-|" options:0 metrics:nil views:views];
[sectionView addConstraints:horizontalConstraints];
[sectionView addConstraints: verticalConstraints];

and your code will look like below

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

        UIView *sectionView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, _TableList.frame.size.width, 80)];
        [header setTranslatesAutoresizingMaskIntoConstraints:NO];
        header = [[HeaderView alloc] init];
        [sectionView addSubview:header];

        NSDictionary *views = NSDictionaryOfVariableBindings(header);
        NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[header]-|" options:0 metrics:nil views:views];
        NSArray *verticalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[header]-|" options:0 metrics:nil views:views];

        [sectionView addConstraints:horizontalConstraints];
        [sectionView addConstraints: verticalConstraints];

        sectionView.tag=section;
        sectionView.backgroundColor = [UIColor grayColor];

        UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
        [sectionView addGestureRecognizer:headerTapped];

        return  sectionView;
    }

thanks for replying,i applied this code but same problem coming. — , Jul 21 '16 at 06:32

score 0 · Answer 4 · answered Jul 21 '16 at 06:24

in viewForHeaderInSection

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *labelSection;
UIView  *viewSection = [[UIView alloc]init];
viewSection.frame = CGRectMake(0, 0, tableview.frame.size.width, 20);
labelSection = [[UILabel alloc]init];
labelSection.textAlignment = NSTextAlignmentLeft;
labelSection.frame = CGRectMake(10, 5, tableview.frame.size.width, 20);

[labelSection setBackgroundColor:[UIColor clearColor]];
[labelSection setFont:[UIFont boldSystemFontOfSize:15]];
NSString *name = @"section title";
labelSection.text = name;
[viewSection setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"imageName"]]];
[labelSection setTextColor:[UIColor whiteColor]];
[viewSection addSubview:labelSection];
return viewSection;
}

score 0 · Answer 5 · answered Jul 21 '16 at 10:42

If you use the story board then create an view as a tableview cell

Drag and drop 2 tableview cell
Design one cell as an header view and other cell will use as tableview listing cell. And give auto layout of sub views of each cell.

Now give Different cell identifier to each cell from interface like below

Now use this cell in view for section in header view delegate of tableview.

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static NSString *identifier = @"SectionHeader";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

    return cell;
}

Hope It helps!

Custom view is not fit to header in UItableview

myCode:

5 Answers5