テーブルビューの使用方法まとめ

UITableViewの使用サンプル

テーブルビューの使用例をまとめたサンプルを作成しました。このサンプルでは、UITableViewControllerを使用せず、UIViewControllerUITableViewのデリゲートを指定し使用しています。

カスタムセルや編集モードの使用例をはじめ、使用頻度の高いデリゲートメソッドを搭載していますので、テンプレートとしてもご使用いただけます。

下記よりサンプルのダウンロードが行えます。

ダウンロード

サンプルの主な機能

  1. ヘッダー追加
  2. フッター追加
  3. スクロール位置の保持と復元
  4. セルをフリックした際の編集モード追加
  5. 編集モード時の削除ボタンの文言変更
  6. カスタムセルの使用方法

その他の機能

  1. セルの背景指定
  2. セルの選択時の背景指定
  3. セルの右側に矢印アイコンを指定
  4. オフセットの指定
  5. セルが選択されていた場合に選択を解除
  6. テーブルビューの更新時にスクロールバーが点滅するよう指定

使用前に必要な手順(ヘッダファイルにデリゲート指定追加)

1
2
3
@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

カスタマイズ例

ヘッダー追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ヘッダー配置
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    // ヘッダー画像配置
    UIImageView *headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 64)];
    headerImageView.image = [UIImage imageNamed:@"header.png"];

    return headerImageView;
}

// ヘッダーの高さ指定
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 64;
}

フッター追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// フッター配置
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    // ヘッダー画像配置
    UIImageView *footerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
    footerImageView.image = [UIImage imageNamed:@"footer.png"];

    return footerImageView;
}

// フッターの高さ指定
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 30;
}

スクロール位置の保持と復元

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];

    // テーブルビューの最後の位置を保持
    _lastScrollOffset = [_myTableView contentOffset];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // テーブルビューを最後に保存した位置までスクロールする
    [_myTableView setContentOffset:_lastScrollOffset];
}

セルをフリックした際の編集モード追加

1
2
3
4
5
6
7
8
9
10
11
// テーブルビューの編集モード
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // ここで配列などデータの削除を行う


        // 削除ボタンを押下されたボタンの行を削除
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }
}

編集モード時の削除ボタンの文言変更

1
2
3
4
5
// 削除ボタンの文言変更
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return @"削除";
}

カスタムセルの使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// セルの定義
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    int index = [indexPath indexAtPosition:[indexPath length] - 1];
    NSString *CellIdentifier = @"ユニークな文字列をここに指定します";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        // セル内容更新
        [self updateCell:cell atIndexPath:indexPath];
    }
    return cell;
}

// セル内容の定義
- (void)updateCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath
{
    // セルのボーダーライン配置(既定のだと左端に余白が出来てしまうため)
    UIView *borderline = [[UIView alloc] initWithFrame:CGRectMake(0, 59, 320, 1)];
    borderline.backgroundColor = [UIColor colorWithRed:0.9f green:0.9f blue:0.9f alpha:1.0f];
    [cell.contentView addSubview:borderline];

    // ここに画像やラベルを配置しカスタマイズ

}

セルの背景指定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = @"ユニークな文字列をここに指定します";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        // セルの背景指定
        UIView *cellBackgroundView = [[UIView alloc] init];
        cellBackgroundView.backgroundColor = [UIColor whiteColor];
        cell.backgroundView = cellBackgroundView;

        // セル内容更新
        [self updateCell:cell atIndexPath:indexPath];
    }
    return cell;
}

セル選択時の背景指定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = @"ユニークな文字列をここに指定します";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        // セル選択時の背景指定
        UIView *cellSelectedBackgroundView = [[UIView alloc] init];
        cellSelectedBackgroundView.backgroundColor = [UIColor colorWithRed:0.95f green:0.95f blue:0.95f alpha:1.0f];
        cell.selectedBackgroundView = cellSelectedBackgroundView;

        // セル内容更新
        [self updateCell:cell atIndexPath:indexPath];
    }
    return cell;
}

セルの右側に矢印アイコンを表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = @"ユニークな文字列をここに指定します";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        // セルの右側に矢印アイコンを表示
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        // セル内容更新
        [self updateCell:cell atIndexPath:indexPath];
    }
    return cell;
}

オフセットを指定(320*50px の広告を画面下部に表示する際は下記のように指定)

1
_myTableView.contentInset = UIEdgeInsetsMake(0, 0, 50, 0);

セルが選択されていた場合に選択を解除

1
2
3
4
5
6
7
8
9
10
11
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    // テーブルビューのセルが選択されていた場合に選択を解除する
    NSIndexPath *selection = [_myTableView indexPathForSelectedRow];
    if (selection) {
        [_myTableView deselectRowAtIndexPath:selection animated:YES];
    }
    [_myTableView reloadData];
}

テーブルビューの更新時にスクロールバーが点滅するよう指定

1
2
3
4
5
6
7
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // テーブルビューが更新された時にスクロールバーが点滅するよう指定
    [_myTableView flashScrollIndicators];
}

ソースコード

ViewController.h

1
2
3
4
5
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

ViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
#import "ViewController.h"

@interface ViewController ()

@property UITableView *myTableView;     // テーブルビュー
@property NSArray     *myList;          // テーブルビューに表示するリスト
@property CGPoint     lastScrollOffset; // テーブルビュー最後のスクロール位置

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
  
    // テーブルビューに表示するリスト登録
    [self setMyList];

    // テーブルビュー配置
    [self setMyTableView];
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];

    // テーブルビューの最後の位置を保持
    _lastScrollOffset = [_myTableView contentOffset];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    // テーブルビューのセルが選択されていた場合に選択を解除する
    NSIndexPath *selection = [_myTableView indexPathForSelectedRow];
    if (selection) {
        [_myTableView deselectRowAtIndexPath:selection animated:YES];
    }
    [_myTableView reloadData];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // テーブルビューを最後に保存した位置までスクロールする
    [_myTableView setContentOffset:_lastScrollOffset];

    // テーブルビューが更新された時にスクロールバーが点滅するよう指定
    [_myTableView flashScrollIndicators];
}

#pragma mark - My List

// テーブルビューに表示するリスト登録
- (void)setMyList
{
    _myList = @[@"Apple", @"Grapes", @"Lemon", @"Cherry", @"Grapefruit", @"Pineapple",
                @"Banana", @"Strawberry", @"Blueberry", @"Orange", @"Mellon"];
}

#pragma mark - My Table View

// テーブルビュー配置
- (void)setMyTableView
{
    // 初期化
    _myTableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] style:UITableViewStylePlain];

    // デリゲート指定
    _myTableView.delegate = self;

    // データ・ソース指定
    _myTableView.dataSource = self;

    // 背景色指定
    _myTableView.backgroundColor = [UIColor whiteColor];

    // ボーダーラインを指定(今回は使用しない)
    _myTableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    // オフセットを指定(今回はオフセットを無しに指定)
    _myTableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

    // IDを指定
    [_myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];

    // ビューに追加
    [self.view addSubview:_myTableView];
}


#pragma mark - Table View delegate method

// セルの定義
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // インデックス保持
    int index = [indexPath indexAtPosition:[indexPath length] - 1];

    // セルのユニークID登録
    NSString *CellIdentifier = [_myList objectAtIndex:index];

    // セル初期化
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        // セルの背景指定
        UIView *cellBackgroundView = [[UIView alloc] init];
        cellBackgroundView.backgroundColor = [UIColor whiteColor];
        cell.backgroundView = cellBackgroundView;

        // セルの選択時の背景指定
        UIView *cellSelectedBackgroundView = [[UIView alloc] init];
        cellSelectedBackgroundView.backgroundColor = [UIColor colorWithRed:0.95f green:0.95f blue:0.95f alpha:1.0f];
        cell.selectedBackgroundView = cellSelectedBackgroundView;

        // セルの右側に矢印アイコンを表示
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        // セル内容更新
        [self updateCell:cell atIndexPath:indexPath];
    }
    return cell;
}

// セル内容の定義
- (void)updateCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath
{
    // インデックス保持
    int index = [indexPath indexAtPosition:[indexPath length] - 1];

    // セルのタイトル指定
    cell.textLabel.text = [_myList objectAtIndex:index];
    cell.textLabel.textColor = [UIColor colorWithRed:0.4f green:0.4f blue:0.4f alpha:1.0f];
    cell.textLabel.font = [UIFont fontWithName:@"Futura-Medium" size:16];

    // セルのボーダーライン配置(既定のだと左端に余白が出来てしまうため)
    UIView *borderline = [[UIView alloc] initWithFrame:CGRectMake(0, 59, 320, 1)];
    borderline.backgroundColor = [UIColor colorWithRed:0.9f green:0.9f blue:0.9f alpha:1.0f];
    [cell.contentView addSubview:borderline];

    // ここに画像やラベルを配置しカスタマイズできます



}

// セルタップ時のイベント
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 画面遷移前のスクロール位置を保持
    _lastScrollOffset = [_myTableView contentOffset];

    // ここで画面遷移などを行う



}

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

// セルのセクション数を設定
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

// セル高さを設定
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 60;
}

// セルの背景色指定
- (void)tableView:(UITableView *)tableView  willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.backgroundColor = [UIColor colorWithRed:0.988f green:0.988f blue:0.988f alpha:1.0f];
}

// ヘッダー配置
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    // ヘッダー画像配置
    UIImageView *headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 64)];
    headerImageView.image = [UIImage imageNamed:@"header.png"];

    return headerImageView;
}

// ヘッダーの高さ指定
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 64;
}

// フッター配置
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    // ヘッダー画像配置
    UIImageView *footerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
    footerImageView.image = [UIImage imageNamed:@"footer.png"];

    return footerImageView;
}

// フッターの高さ指定
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 30;
}

// テーブルビューの編集モード
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // インデックス保持
        // int index = [indexPath indexAtPosition:[indexPath length] - 1];

        // ここで配列などデータの削除を行う



        // 削除ボタンを押下されたボタンの行を削除
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }
}

// 削除ボタンの文言変更
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return @"削除";
}

@end

関連記事

お薦めの参考書

絶対に挫折しない iPhoneアプリ開発「超」入門 増補改訂第4版
Swiftについて知りたい開発者の方のみならず、プログラミング未経験者の方にも参考になる内容になっています。Swiftの基礎を一から丁寧に解説されており、この書籍があればネットで調べる手間をかなり省くことができると思います。

   このエントリーをはてなブックマークに追加

About

Masaki Hirokawa (@dolice_apps)

デザインエンジニア 廣川政樹の開発ブログ。Objective-Cや Javaなど iPhone/Androidアプリ開発に関する技術情報を掲載しています。

iPhone apps

  • リラックス・ヒーリング(無料)
  • 望みが叶う!引き寄せの法則アプリ(無料)
  • ミステリー - 怖い話や不思議な体験、都市伝説まとめ
  • 浮世絵壁紙 - 美しい日本画ギャラリー(無料)
  • アート壁紙HD(無料)
  • 綺麗な壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)
  • クールな壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)

Android apps

  • 浮世絵壁紙 - 美しい日本画ギャラリー
  • 綺麗な高画質壁紙

Objective-C Classes

Tag Cloud

ActionScript(9) ActionScript3(7) Ad(4) Adfurikun(2) AdMob(9) Android(10) Animation(17) AppDelegate(3) ARC(1) ArrayList(1) AVAudioPlayer(4) AVAudioSession(1) AVFoundation(3) Banner(2) Bitmap(1) Camera(4) CGAffineTransform(4) CGBlendMode(2) CGContextRef(1) CGImageRef(1) Classes(44) CLLocationManager(1) ConnectivityManager(1) ContentResolver(1) CoreLocation(2) Delegate(3) Device(7) Display(1) DisplayMetrics(1) Download(101) Facebook(6) Foundation(72) Framework(2) Google Analytics(1) Handler(1) iAd(6) ImageView(1) In-AppPurchase(1) iOS(12) iOS 7(15) iOS 7.1(3) iOS 8(1) iPad(7) iPhone(21) iPhone 6(4) Java(7) JavaScript(2) LINE(4) Localize(1) Magazine(1) MediaStore(1) MFComposeViewController(1) Nend(1) NetworkInfo(1) NSArray(23) NSCalendar(3) NSData(2) NSDate(7) NSDateComponents(2) NSDateFormatter(2) NSDictionary(12) NSEnumerator(1) NSIndexSet(1) NSInteger(6) NSMutableArray(17) NSMutableDictionary(5) NSMutableOrderedSet(7) NSMutableString(4) NSMutableURLRequest(1) NSNotificationCenter(1) NSNumber(1) NSObject(1) NSOrderedSet(7) NSRange(2) NSSelectorFromString(1) NSSet(6) NSString(19) NSTimer(4) NSTimeZone(1) NSURL(7) NSURLConnection(1) NSURLRequest(2) NSUserDefaults(7) NSXMLParser(2) Objective-C(222) PHP(1) Products(14) QuartzCore(3) RSS(2) Runnable(1) Sample(51) Screensaver(9) SDK(2) ShareCompat(1) Social(10) StoreKit(1) Twitter(6) UIAccelerometer(3) UIActionSheet(1) UIActivityIndicator(1) UIActivityIndicatorView(3) UIActivityViewController(1) UIAlertView(5) UIApplication(7) UIButton(4) UIColor(3) UIDatePicker(5) UIDevice(6) UIDeviceOrientation(1) UIEvent(6) UIImage(15) UIImagePickerController(4) UIImageView(12) UIKit(58) UILabel(7) UINavigationBar(4) UINavigationItem(1) UIPasteboard(4) UIScreen(1) UIScrollBar(1) UIScrollView(1) UISlider(3) UIStoryboardSegue(3) UISwitch(1) UITabBar(3) UITableView(4) UITextField(2) UIView(11) UIViewAnimationTransition(1) UIViewController(4) UIWebView(5) WindowManager(1) Xcode(48) Xcode 5(8) Xcode 5.1(2)