前回の続き。今回はヘッダとフッタの配置について説明。

サンプル: https://github.com/stack3/STProgrammaticLayoutViewSample

前回使ったサンプルのMenu画面からHeader & Footerを選択してください。

f:id:eimei23:20130114131145p:plain

f:id:eimei23:20130114131152p:plain

ヘッダ(青)、フッタ(赤)が上端、下端に固定されて、かつ、回転時に幅が合わさるようになっています。

コードを見てみましょう。

STLayoutHeaderFooterViewController.mの内容

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];
    
    CGRect bounds = self.view.bounds;
    
    CGRect headerViewFrame;
    headerViewFrame.origin.x = 0;
    headerViewFrame.origin.y = 0;
    headerViewFrame.size.width = bounds.size.width;
    headerViewFrame.size.height = 50;
    UIView *headerView = [[UIView alloc] initWithFrame:headerViewFrame];
    _headerView = headerView;
    _headerView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    _headerView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:_headerView];

    CGRect footerViewFrame;
    footerViewFrame.origin.x = 0;
    footerViewFrame.origin.y = bounds.size.height - 50;
    footerViewFrame.size.width = bounds.size.width;
    footerViewFrame.size.height = 50;
    UIView *footerView = [[UIView alloc] initWithFrame:footerViewFrame];
    _footerView = footerView;
    _footerView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;
    _footerView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_footerView];
}

ヘッダの配置

ヘッダのx,yは0にしてheightは50としています。幅はbounds.size.width、つまりSuperviewの幅と合わせます。Superviewのサイズが変わった時に、幅が自動調整されるようにautoresizingMaskへUIViewAutoresizingFlexibleWidth(幅伸縮)を設定しています。高さは変わらないのでUIViewAutoresizingFlexibleHeightは設定しません。

フッタの配置

フッタもheightは50。yはbounds.size.height – 50することで下端に配置しています。autoresizingMaskへUIViewAutoresizingFlexibleWidthを指定する理由はヘッダと同じです。

UIViewAutoresizingFlexibleTopMarginは、Superview上端との間隔をSuperviewの高さに合わせて可変するということです。つまりviewDidLoadでフッタに指定したx座標は、Superviewのheightが小さくなればその分上に、大きくなればその分下に移動することになります。これによりSuperviewのheightが変わった時にフッタは下端に固定されるように見えます。

なれないうちは、下端(Bottom)だからUIViewAutoresizingFlexibleBottomMarginを指定しがちですが、Flexible(可変)という単語を意識して間違わないようにしましょう。今回は下端の間隔を可変したいのではなく上端の間隔を可変したいわけですから。

Autoresizing Maskの基本的な考え

Autoresizing Maskは、幅、高さ、Superviewとの間隔、いずれも可変する場合に指定するということです。固定するために指定するものはありません。フッタが下端に固定されているのは、実際は上端との間隔が可変しているからです。

ヘッダとフッタの間に配置

次にサンプルのMenuからVerticalを選択してください。

f:id:eimei23:20130114150421p:plain

f:id:eimei23:20130114150435p:plain

ヘッダとフッタの間にTableViewが表示されています。回転したときはサイズが可変してヘッダとフッタの間におさまるようになっています。

コードを見てみましょう。

STLayoutVerticalViewController.mのviewDidLoadの内容

    CGRect tableViewFrame;
    tableViewFrame.origin.x = 0;
    tableViewFrame.origin.y = headerViewFrame.size.height;
    tableViewFrame.size.width = bounds.size.width;
    tableViewFrame.size.height = bounds.size.height - headerViewFrame.size.height - footerViewFrame.size.height;
    UITableView *tableView = [[UITableView alloc] initWithFrame:tableViewFrame style:UITableViewStylePlain];
    _tableView = tableView;
    _tableView.dataSource = self;
    _tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
    [self.view addSubview:_tableView];

yをヘッダの下に合わせて、高さはSuperviewの高さからヘッダとフッタの高さを引いた値にしています。これでヘッダとフッタの間にTableViewが配置されます。あとはSuperviewのサイズが変わった時のためのAutoresizing Maskの設定。Superviewに合わせて幅と高さが可変するのでUIViewAutoresizingFlexibleWidthとUIViewAutoresizingFlexibleHeightを設定しています。

その5へ続く