Help us understand the problem. What is going on with this article?

【Objective-C】UITableViewのHeader、Footerを固定させない

こんにちは!
先日、UI改修をしている中で、「テーブルビューのスクロール時にヘッダーとフッターを一緒にスクロールさせたい!」ということがありました...

「ヘッダー、フッターのどちらかを固定しない」という記事はあったのですが、どちらも固定しない記事は見つけられなかったので、私がした対処を書いておきます。

コード

InitialViewController.m
#import "InitialViewController.h"

@interface InitialViewController () <UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation InitialViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;

    [self scrollViewDidScroll:self.tableView];
}


// MARK: - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellName = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellName forIndexPath:indexPath];
    cell.textLabel.text = [NSString stringWithFormat:@"%ld - %ld", indexPath.section, indexPath.row];
    return cell;
}


// MARK: - UITableViewDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 5;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"Header - %ld", section];
}

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"Footer - %ld", section];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat sectionHeaderHeight = self.tableView.sectionHeaderHeight;
    CGFloat sectionFooterHeight = self.tableView.sectionFooterHeight;
    CGFloat bottomHeight = scrollView.contentSize.height - self.tableView.frame.size.height;

    if (offsetY <= sectionHeaderHeight && offsetY >= 0) {
        scrollView.contentInset = UIEdgeInsetsMake(-offsetY, 0, -sectionFooterHeight, 0);
    } else if (bottomHeight-sectionFooterHeight > scrollView.contentOffset.y && offsetY >= 0) {
        scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, -sectionFooterHeight, 0);
    } else if (offsetY >= bottomHeight) {
        scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0);
    } else if (offsetY >= sectionHeaderHeight) {
        scrollView.contentInset = UIEdgeInsetsMake(-offsetY, 0, -sectionFooterHeight, 0);
    }
}

@end

gitHubにもあげています!!
https://github.com/IshibaSeiko/UntrackingHeaderTable.git

解説

まず、ViewDidLoadに [self scrollViewDidScroll:self.tableView]; を書きます。
初期表示の際にヘッダーやフッターが表示されないように、更新しておきます!

そして、 - (void)scrollViewDidScroll:(UIScrollView *)scrollView では何をやっているかというと...

if (offsetY <= sectionHeaderHeight && offsetY >= 0) {
        scrollView.contentInset = UIEdgeInsetsMake(-offsetY, 0, -sectionFooterHeight, 0);
    }

スクロールした領域がテーブルのトップからヘッダーまでの時、スクロールビューの領域をスクロールした分広げます。

IMG_0004.png

if (bottomHeight-sectionFooterHeight > scrollView.contentOffset.y && offsetY >= 0) {
        scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, -sectionFooterHeight, 0);
    }

テーブルの一番下のセルから、テーブルの一番下が表示領域に入っているときは、スクロールビューの領域を上はヘッダー分、下はフッター分広げます。
IMG_0005.png

if (offsetY >= bottomHeight) {
        scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0);
    }

テーブルの一番下までスクロールしたときは、スクロールビューの領域をヘッダー分広げます。
IMG_0006.png

if (offsetY >= sectionHeaderHeight) {
        scrollView.contentInset = UIEdgeInsetsMake(-offsetY, 0, -sectionFooterHeight, 0);
    }

ヘッダーより下にスクロールしたときは、スクロールビューの領域を上はスクロールした分、下はフッター分広げます。
IMG_0007.png

下手すぎて絵の意味がないかもしれませんが、、、こんなイメージです。

参考にした記事

この、テーブルビューのヘッダー、フッターを固定せず、スクロールさせる対応をするにあたって、
下記の記事を参考にさせていただきました。ありがとうございます。

UITableViewでSectionHeader/SectionFooterを残さない方法
https://qiita.com/Yuta/items/a804a25d82ade964b315

UITableViewでセクションフッターをページ下部に残さない・固定しない方法
http://yandr.randy.boy.jp/?eid=9

まとめ

今後のために、とりあえずまとめておきました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした