XcodeでUITableViewを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeでUITableView（テーブルビュー）を追加する方法を初心者向けに解説します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UITableViewとは

UITableViewは「テーブル」とう名称の通り、画面を「行（Row）」に分けて管理するViewです。

この画像はメールアプリのアカウントの一覧ですが、このように一覧形式で表示させることができます。この際、各行をタップした時に詳細画面へ移動する使い方が一般的です。

 

 

UITableViewを配置する

UITableViewを配置してみましょう。

最初にSingle View Applicationを作成します。ストーリーボードには1つのViewControllerが配置され、そのクラスであるViewController.hとViewController.mが作成されています。

この2つを一旦削除します。

 

その上でストーリーボードにNavigationControllerを配置します。すると、TableViewがroot segueで作成されした。

 

ここで、TableViewをroot viewにします。このようにする理由は、TableViewを表示して終わりというアプリは少なく、TableViewの行をタップした時にsegueで画面遷移を行うことが多いので、予めsegue対策としてNavigationControllerを使うからです。

また、ViewController.hと.mをそのままにすると、UIViewControllerのサブクラスとして定義されて、UITableViewのクラスとして指定できないために削除しました。

 

ここで、メニューのFile→New→Fileと進んで、新規ファイルを作成しましょう。

 

表示されるダイアログでObjective-C Classを選択します。

 

UITableViewControllerを基底クラスとして、新しいクラスを作成します。

 

それをTableViewControlerのクラスとして割り当てましょう。

これで配置ができました。

 

 

[PR] iPhoneアプリ開発コース

UITableViewの使い方

ここからは、実際にテーブルが使えるように設定していきます。

まず、UITableViewにはデータソースの概念があります。これはテーブルに表示するデータをどこから取得するかというですが、先ほど作成したTableViewControlerのサブクラスを使うのが一般的です。また、行をタップされたなどのイベントを扱うために、delegateも設定します。

 

tableViewController.hでは

@interface tableViewController : UITableViewController<UITableViewDataSource, UITableViewDelegate>

と宣言します。

 

次にInterfaceBuilderでTableViewのIBOutletを作成します。

 

ここでは、myTableという名前にしました。

 

また、tableViewController.mのviewDidLoadで、myTableのdelegateとdataSourceを設定します。また行の選択も許可しましょう。

myTable.delegate = self;
myTable.dataSource = self;
myTable.allowSelection = YES;

 

この際、viewDidLoadの中でテーブルに表示するデータを取得しておきます。SQLite3データベースから取得しても良いですし、CoreDataから取得でも構いません。今回は次のViewに遷移することを考えてAppDelegateにNSMutableArrayを用意して、そこにデータが格納されているものとします。

 

テーブルにはSectionという概念があり、異なる属性のデータ群を分けることができますが、今回はSectionの数は1つとします。

– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return 1;
}

 

また、上述のデータを格納したNSMutableArrayの名前をarrayDataSourceとすると、表示する行の数はarrayDataSourceのcountに等しくなります。

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
AppDelegate *appdelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];

// Return the number of rows in the section.
return [appdelegate.aryDataSource count];
}

 

同じように、各行（cell）の設定を行いましょう。

– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
AppDelegate *appdelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];
static NSString *CellIdentifier = @”Cell”;
UITableViewCell * cell = [[ UITableViewCell alloc ]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
cell.textLabel = [appdelegate.aryDataSource objectAtIndex:indexPath.row];
}

この時「行」を示すのはindexPath自体ではなく、indexPath.rowというプロパティであることに注意してください。

 

続いて、行がタップされた時に遷移するUIViewをストーリーボード上で作成します。

ViewControllerを一つ配置しましょう。

 

次にTableViewのPrototype Cellsから右ドラッグでViewControllerにsegueを作成します。

 

segueの種類は「push」にしてください。

 

最後にsegueを選んでsegueにidentifireを付けます。ここでは「MainDetail」と命名しました。

 

この際、行のアクセサリーボタンまたは行そのものをタップされた時に、AppDelegateのaryPointに選択された行を記憶して、先ほど命名したMainDetailのsegueを実行します。

-(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath
{
AppDelegate *appdelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];
appdelegate.aryPoint = (int)indexPath.row;
[self performSegueWithIdentifier:@”MainDetail” sender:self];
}

-(void)tableView:
(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
AppDelegate *appdelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];
appdelegate.aryPoint = (int)indexPath.row;
[self performSegueWithIdentifier:@”MainDetail” sender:self];
}

あとはUIViewControllerを基底としたクラスを作成して、先ほど作成したViewControllerのクラスとして設定し、ViewControllerでappdelegate.aryPointを参照して必要な処理を記述するだけです。

今回の記事は以上です。

 

Xcodeの他のUIパーツも追加したい場合は、XcodeでUITextFieldを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。