こんにちは。
開発の中山です。
UITableViewと言えばiOSにおけるUIの要ですが、このUITableViewで、セルを下から上に並べて表示する方法についてご紹介します。
そもそも下から上にセルを並べるというUIが一般的ではないということもあり、あいにくUITableViewにはそのようなAPIは用意されていません。かと言って自前で一から実装し直すのは、セルを再利用する仕組みなども考えると中々骨が折れそうです。
そこで今回は、UIViewのtransformプロパティというものを使います。これを使うと一見強引なビューの変形をすることができます。
では、実際にやってみましょう。
まず標準のテーブルビューです。
このテーブルビューのtransformプロパティに、180°回転させるCGAffineTransformをセットします。
- (void)viewDidLoad {
[super viewDidLoad];
_tableView.transform = CGAffineTransformMakeRotation(M_PI);
}
180°回転しましたが、セルの内容まで一緒に回転してしまっています。そこで、今度はセルを逆方向に回転させることでテーブルビューの回転を相殺させてみます。
- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath {
static NSString* cellIdentifier = @"Cell";
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
cell.transform = CGAffineTransformMakeRotation(-M_PI);
cell.textLabel.text = [NSString stringWithFormat:@"Cell %d", indexPath.row];
return cell;
}
見事に下から上にセルが並んでいます！と思いきや、実際に触ってスクロールしてみると、こんな風にスクロールバーが画面左側に表示されてしまいます。
そこで、今度はUIScrollViewのプロパティ、scrollIndicatorInsetsを変更してみます。scrollIndicatorInsetsは、スクロールバーをビューの端からどれだけ内側に表示するかというプロパティです。この場合、画面左側からビューの幅分だけググっと右側に押し込むとうまくいきそうです。ただし、テーブルビューは180°回転している状態なので、画面左から押し込むために変更する値はscrollIndicatorInsets.rightになることに注意して下さい。
- (void)viewDidLoad {
[super viewDidLoad];
_tableView.transform = CGAffineTransformMakeRotation(M_PI);
static CGFloat innerOffset = 9.0;
UIEdgeInsets insets = UIEdgeInsetsMake(
0.0, // top
0.0, // left
0.0, // bottom
CGRectGetWidth(_tableView.frame) - innerOffset // right
);
_tableView.scrollIndicatorInsets = insets;
}
うまくいきました。完成です。
ただ、tableHeaderViewは逆回転をしても画面下に表示されてしまったり、セクションヘッダのビューは逆回転できなかったりと、完全ではありません。完全な実装をするには一から再発明する必要がありそうです。
今回の方法を使った、透過的に使えるUITableViewとUITableViewCellのサブクラスのサンプルです。
ReversedTableViewSample
スプーキーズラボブログは株式会社スプーキーズの技術関連の情報を発信するブログです。プロダクト一覧、お問い合わせなどはスプーキーズラボのサイトをご覧ください。
バグ報告はコメントか、お問い合わせからお願いします。
設置サポートは有料でのみ受け付けています。その場合も、お問い合わせからお願いします。