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

XcodeのUIパーツ【UITableView(テーブルビュー)】を追加する方法を初心者向けに解説した記事です。UITableViewは、画面を「行」に分けて管理するビューです。各行をタップした時に詳細画面へ移動するのが一般的です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

今回は、XcodeUITableView(テーブルビュー)を追加する方法を初心者向けに解説します。

 

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

 

UITableViewとは

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

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

IMG_0407

 

 

UITableViewを配置する

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

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

XcodeScreenSnapz0015
XcodeScreenSnapz002

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

 

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

 

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

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

 

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

XcodeScreenSnapz004

 

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

XcodeScreenSnapz005

 

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

XcodeScreenSnapz006

 

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

XcodeScreenSnapz007

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

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UITableViewの使い方

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

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

 

tableViewController.hでは

@interface tableViewController : UITableViewController<UITableViewDataSource, UITableViewDelegate>

と宣言します。

 

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

XcodeScreenSnapz008

 

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

XcodeScreenSnapz009

 

また、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を一つ配置しましょう。
XcodeScreenSnapz010

 

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

XcodeScreenSnapz011

 

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

 

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

XcodeScreenSnapz014

 

この際、行のアクセサリーボタンまたは行そのものをタップされた時に、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アプリ開発オンラインブートキャンプを開催しています。