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

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

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

(iOS/iPhoneアプリ開発) UITableViewのセクションインデックスを使い電話帳のような遷移を作成

完成イメージ

完成イメージは次の通りです。
右側のセクションインデックスのタイトルをクリックすると、クリックした箇所に応じてテーブルビューが遷移します。
f:id:nipe880324:20131219161749p:plain:w240

("か"を押した後)
f:id:nipe880324:20131219161800p:plain:w240

環境

StoryBoardの作成

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

  1. UIViewControllerを追加
  2. 上記のControllerにUITableViewを追加
  3. 上記のTableViewにUITableViewCellを追加
  4. 上記のCellのidentifier(Reuse identifier)に識別子(今回は"Cell")を追加
  5. StoryBoardとViewController.hの2つのビューにし、「Ctrl + ドラッグ」を使って、上記のUITableViewをViewController.hに追加

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

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

ViewController.hの作成

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

#import <UIKit/UIKit.h>

@interface SectionTableViewController : UIViewController
<UITableViewDataSource>  // UITableViewを表示させるためのDataSourceを宣言
{
    // テーブルに表示する値を保持する変数
    NSArray *rowArray;
    // セレクションに表示する値を保持する変数
    NSArray *sectionArray;
}

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

@end

ViewController.mの作成

次に、ViewController.m を作成します。
UITableViewでは、セクション(section)の下にセル(row)があるという階層構造になっています。
各Sectionにはヘッダーとフッターが表示出来ます。
===========
TableView
L Section 1
L row 1 ... 各列を表示(UITableViewCellに対応)
L row 2
L row 3
L Section 2
L row 1
L row 2
L row 3
L Section 3
....
===========

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

#import "SectionTableViewController.h"

@interface SectionTableViewController ()

@end

@implementation SectionTableViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    
    // データの設定
    // section(row, row, ...,), section(row, row, ...), ... という構成のため2次元配列で宣言
    // 本来はDBやplistなどから取得すべき
    rowArray = @[@[@"あか", @"あえ",@"う", @"う", @"かう", @"う", @"う", @"う", @"う", @"う", @"えいや",@"おえ"],
             @[@"かき", @"かお", @"きく", @"け", @"こえ"],
             @[@"さ", @"さと", @"す", @"す", @"す", @"す", @"す", @"す", @"あ", @"す", @"す", @"す", @"す", @"す", @"す", @"す", @"せうゆ", @"そ"]];
    // セクションに表示する文字列
    sectionArray = @[@"あ", @"か", @"さ"];

    // データソースの設定
    self.tableView.dataSource = self;
    
    [UIApplication sharedApplication].applicationIconBadgeNumber = 1;

}

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


// セクションの数を返す
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [rowArray count];
}

// TableViewの各セクションのヘッダーに表示する文字列を返す
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"section header:'%@'", [sectionArray objectAtIndex:section]];
}


// セルの数を返す(必須)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [[rowArray objectAtIndex:section] count];
}

// セルの内容を返す(必須)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    cell.textLabel.text = [[rowArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    return cell;
}

// 右側のセクションインデックスに表示する値の配列を返す
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    // 右側のセクションインデックスの文字をクリックしたときに
    // テーブルビューはそのセクション番号に応じたセクションのトップに遷移する
    return sectionArray;
}

@end


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

参考情報

iPhone デベロッパーズ クックブック

iPhone デベロッパーズ クックブック

(6章 Advanced Tables の p171あたり)


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