web-dev-qa-db-ja.com

iOS UITableView HeaderViewを追加する（セクションヘッダではない）

連絡先アプリのように、（セクションヘッダーではなく）テーブルヘッダーを追加します。 enter image description here

まさにそのようなもの - テーブルの上の画像の横にあるラベル。

すべてのビューをスクロール可能にして、テーブルの外側に配置できないようにします。

どうやってやるの？

iphoneiosuitableview
164
Assaf b

UITableViewはtableHeaderViewプロパティを持ちます。あなたがそこに望んでいるどんなビューにでもそれを設定してください。

新しいUIViewをコンテナーとして使用し、その新しいUIViewにテキストラベルとイメージビューを追加してから、その新しいビューにtableHeaderViewを設定します。

たとえば、UITableViewControllerでは、次のようになります。

-(void)viewDidLoad
{
     // ...
     UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:imageView];
     UILabel *labelView = [[UILabel alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:labelView];
     self.tableView.tableHeaderView = headerView;
     [imageView release];
     [labelView release];
     [headerView release];
     // ...
}
241
peterjb

あなたはそれをInterface Builderでかなり簡単にすることができます。テーブルを含むビューを作成し、そのテーブルに別のビューをドロップするだけです。これはテーブルヘッダビューになります。そのビューにラベルと画像を追加します。ビューの階層については、下の図を参照してください。 View Hierarchy in Interface Builder

191
Kirby Todd

In Swift：

override func viewDidLoad() {
    super.viewDidLoad()

    // We set the table view header.
    let cellTableViewHeader = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewHeaderCustomCellIdentifier) as! UITableViewCell
    cellTableViewHeader.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewHeaderCustomCellIdentifier]!)
    self.tableView.tableHeaderView = cellTableViewHeader

    // We set the table view footer, just know that it will also remove extra cells from tableview.
    let cellTableViewFooter = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewFooterCustomCellIdentifier) as! UITableViewCell
    cellTableViewFooter.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewFooterCustomCellIdentifier]!)
    self.tableView.tableFooterView = cellTableViewFooter
}
12
King-Wizard

また、Interface BuilderでUIViewのみを作成し、ImageViewとUILabelをドラッグアンドドロップして（目的のヘッダのように見せるため）、それを使用することもできます。

あなたのUIViewもあなたが望むやり方のように見えたら、あなたはXIBからそれをプログラム的に初期化してあなたのUITableViewに追加することができます。つまり、IBでENTIREテーブルを設計する必要はありません。 headerViewだけ（この方法で他のテーブルでもヘッダービューを再利用できます）

例えば、私は自分のテーブルヘッダの一つにカスタムのUIViewを持っています。ビューは "CustomHeaderView"というxibファイルによって管理され、私のUITableViewControllerサブクラスの次のコードを使用してテーブルヘッダーにロードされます。

-(UIView *) customHeaderView {
    if (!customHeaderView) {
        [[NSBundle mainBundle] loadNibNamed:@"CustomHeaderView" owner:self options:nil];
    }

    return customHeaderView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Set the CustomerHeaderView as the tables header view 
    self.tableView.tableHeaderView = self.customHeaderView;
}
11
iansari