読者です 読者をやめる 読者になる 読者になる

ニペブ - iPhone / iOSアプリ開発

iPhone / iOS アプリ開発方法と技術情報、入門レベルの初心者向けの記事を書いています。

(iOS/iPhoneアプリ開発) UITableViewを使って横スクロールビューを作成

完成イメージ

完成イメージは次の通りです。
f:id:nipe880324:20131219155500p:plain:w320

環境

StoryBoardの作成

まずは、次のようにStoryBoardを作成します。
f:id:nipe880324:20131219160859p:plain

  1. 横するロール表示するテーブルビュー(UITableView)を追加
  2. そのテーブルビューにセル(UITableViewCell)を追加
  3. テーブルビューのサイズを調整
  4. セルのidentifier(Reuse identifier)に値を設定(今回は"cell"を入れた)
  5. StoryBoardとViewController.hの2つのビューを表示し、「Ctrl + ドラッグ」を使って、上記のテーブルビューをViewController.hに追加

ViewController.hに次のような記述が記載されます。

@property (weak, nonatomic) IBOutlet UITableView *tableView;

ViewController.hの作成

次に、ViewController.h を作成します。
詳細はコメントを確認してください。

#import <UIKit/UIKit.h>

@interface HorizonTableViewController : UIViewController
<UITableViewDataSource> // UITableViewを表示させるためのDataSourceを宣言
{
    // セルに表示するデータを保持する変数
    NSArray *dataArray;
}

@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end

ViewController.mの作成

次に、ViewController.m を作成します。

キモとなる箇所は、次の2カ所で、テーブルビューとセルの表示を横向きにしています。

    // テーブルビューを横向きに設定
    self.tableView.center = CGPointMake(self.tableView.frame.origin.x + self.tableView.frame.size.height / 2, self.tableView.frame.origin.y + self.tableView.frame.size.width / 2);
    self.tableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);
    // セルのコンテンツを横向きに設定
    cell.contentView.transform = CGAffineTransformMakeRotation(M_PI / 2);


実際のソースコードです。
細かくコメントを記載してますのでそれを見れば大体分かると思います。

#import "HorizonTableViewController.h"

@interface HorizonTableViewController ()

@end

@implementation HorizonTableViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // テーブルビューにデータソースを設定
    self.tableView.dataSource = self;

    
    // テーブルビューを横向きに設定
    self.tableView.center = CGPointMake(self.tableView.frame.origin.x + self.tableView.frame.size.height / 2, self.tableView.frame.origin.y + self.tableView.frame.size.width / 2);
    self.tableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);

    // テーブルビューの区切り線をなくす
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    
    // セルに表示するデータを定義
    dataArray = @[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10"];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


# pragma mark UIView's DataSource

// セルの数を返す(必須)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // セルに表示するデータの数を返す
    return [dataArray count];
}

// セルの値を返す(必須)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // UITableViewCellの作成
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];

    // セルに値を設定
    cell.textLabel.text = [dataArray objectAtIndex:indexPath.row];
    
    // セルのコンテンツを横向きに設定
    cell.contentView.transform = CGAffineTransformMakeRotation(M_PI / 2);
    return cell;
}

@end


UITableViweなどのUIKitに関するサンプルのソースコードGithubに置いてあります。よろしければ、覗いてみてください。
yanagi0324/test-uikit · GitHub

参考情報


分かりづらい箇所やご質問などありましたら、 コメントやメールアドレスにご連絡いただけると嬉しいです。