[iPhone] Table View を作る (Objective-C)

iPhoneなどスマホでは画面のサイズと縦長という特徴のためリスト表示UIが多用されています。iOSではUITableViewを使って以下のようなリスト表示が可能です。
 
UITableView sample

Objective-C
Xcode 9.4

 

storyboard を使って作る UITableView

 
リスト形式で要素を順次追加可能でスマホのGUIとして重宝されています。簡単なサンプルを作ってみましょう。
 

 

UIImageView と UILabel の配置

 
最初に簡単なプロジェクト(Single View Application)を作成します。
 
storyboad にて View Controller にTable View を置きます
 
Table View on storyboard
 
その上に Table View Cell を追加します
 
Table View Cell on storyboard
View Controller Scene が
「View」>「Table View」>「Table View Cell」>「Content View」
となるようにします。
 
そして、その Cell にUIImageView と UILabel を2つ入れます。また見やすくするため、Cell の background を gray にしたり、UIImageViewとLabelのサイズを適宜調整します。
 
Prototype Cells

 

Cell の Identifier や Tag の設定

 
Table View Cell を選択し、Attributes inspector から
Identifier に名前をつける。(例えば「tableCell」)
 
Table View Cell Identifier
 
Image View を選択しAttributes inspector で
「View」にある Tag を「1」に設定
 
Tag number set on UIImageView
 
Label を選択
Attributes inspector で
「View」にある Tag を「2」と「3」に設定
 
Tag number set on UILabel

 

コードの記述

 
UITableViewDelegate, UITableViewDataSource を設定
ViewController.h


 
ViewController.m

  1. 画像を8枚プロジェクトに追加し、その名前を配列 NSArray *imgArray とします
     
    put images into Assets.xcassets
     
  2. 同じくラベルの情報をそれぞれ配列に入れます
  3. セクションは1個、要素は8個に設定
  4. セルの要素を設定では、UIImageView は viewWithTag:1 でインスタンスを生成
  5. 同じくラベルも設定した Tag に合わせて生成します

ただし、このままだと残念なレイアウトになることがあります。セルの高さを設定してみましょう。
 


 
とりあえず、決め打ちでセルの高さを120.0fにしましたが、画面サイズ、画像サイズに応じて計算したほうがいいでしょう。

 

storyboard とコードを接続

 
UITableView を table と結び
detaSource と deleate を view と接続します
 
connections between the storyboard and each elements
これでビルド実行すると Tabel View が表示されます。
 

関連ページ:

Reference:
UITableView – UIKit | Apple Developer Documentation


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

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

フォローする