[iPhone] 簡単な UITableView の作成 (Objective-C)

iPhone では Table View が多用されています。
ドキュメントも apple developer にありますが、
最初から読んで理解は大変です
まずは簡単に作ってみましょう。
また、今回はstoryboardやIBはなるべく使わずにコードで記述していきます。
 
(関連ページ)

sponsored link

UITableView

 
UITableView 作成
環境:
Mac: 10.9.1
Xcode: 5.0.2
iPhone:  iOS 7.0.4
 
最終的にはこんな感じです…
 
IMG_0046

Table View 作成の流れ

 

  1. プロジェクトの作成
    • 簡単なプロジェクト Single View Application を作成
    • こちらに作り方があります▶︎ Single View Application

     

  2. Story board からView Controller の削除
    • default の View Controller を消して Table View Controller に入れ替える

     
    tableView_a
     

    • ViewController に TableView を貼り付けてもできます。

     

  3. ViewController.h, ViewController.m の削除
    • これで View Controller など何もなくなりました
    • Main.storyboard と AppDelegate は残します

     

  4. Table View Controller を配置
    • default の代わりに配置します

     
    tableView_b
     

  5. New File で TableViewController.h, TableViewController.m を作成
    • New File… から Objective-C class で作成
    • Subclassは UITableViewController を選択

     

    スクリーンショット 2014-02-15 10.21.40 スクリーンショット 2014-02-15 10.22.01 

  6. TableViewController ファイルとストーリーボードの Table View Controller をつなぐ
    • storyboard の Table View Controller を選択し
    • Attributes Inspector の Custom Class で新しく作ったクラスを選択
    • この場合は同じ名前ですが、作ったクラス名がリストにのっています。

     

    スクリーンショット 2014-02-15 10.31.55 

  7. TableViewController にコードを追加
      • 配列の設定 NSArray* arrayText;
      • section の数を設定
      • 行数を設定
      • 配列の要素を Cell にセット

     

  8. ステータスバーに先頭Cellがかぶらないようにする
  9. Cellの背景色の変更

 

TestTableView.h

 
UITableViewDataSource, UITableViewDelegateの追加
 

 

TestTableView.m

 
配列 arrayText を作成して要素を10個入れます。
NSArray *arrayText = @[@”123 ABC”, @”345 DFG”, @”378 HIJ”, @”901 KLM”, @”234 NOP”,
@”567 QRS”, @”890 TUV”, @”123 WXY”, @”456 ZAB”, @”789 CDE”];

– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ }

section数を設定 section とはいわゆるテーブルの行をまとめたグループを指す 今回はsectionは1つなので return 1 とする
 

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ }

行数を設定 テーブルの section 毎の行数、今回は10
配列の要素10個を各行に割り振る
 

– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ }

Cell、いわゆるテーブルの行を UITableViewCellStyleDefault というセルスタイルで作成する
配列の要素をcellに設定する indexPath.raw で行番号を表せる
 

 

iOS7 からの変更点

 
– iOS7から全画面を使うレイアウトがでファオルとなり、ステータスバーに Table View のトップのセルが被ってしまいます。 ステータスバーに Table View が被らないようにするためには、

  1. Table View を選択、show the File inspectorから the Use Autolayout のチェックを外し
  2. show the size inspector の Scroll view size, content inset を例えば20に設定

 
– 背景の色を変える場合の追加コード

  1. show the Attributes inspector の View にある background の色を変更
  2. TestTabelView.m に以下を追加

 

 

ページのトップへ戻る
 
sponsored link

シェアする

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

フォローする