【Swift】UITableView | ポケットリファレンス サンプル付き

UITableView サンプル

サンプルで動作を確認 コピーペーストで確認できます。

import UIKit

// テーブルビューを利用するために、UITableViewDelegate、UITableViewDataSource プロトコルを実装
class ViewController: UIViewController , UITableViewDelegate, UITableViewDataSource  {
    
    // テーブルに表示する情報用
    private var tableDatas : [String] = []
    
    // テーブルビューを作成
    private var uiTableView : UITableView = UITableView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 表示用テストデータを作成
        for var i = 0; i < 100; ++i {
            tableDatas.append("TEST " + String(i))
        }
        
        // テーブルの表示位置と大きさを設定
        uiTableView.frame = CGRectMake( 0 , 0 , self.view.frame.width , self.view.frame.height )
        
        // データソース用のデリゲートを設定
        uiTableView.dataSource = self
        
        // テーブル用のデリゲートを設定
        uiTableView.delegate = self
        
        // テーブルの全セルの高さを設定
        uiTableView.rowHeight = 100
        
        // セル間の区切りのスタイルを設定
        uiTableView.separatorStyle = UITableViewCellSeparatorStyle.SingleLine
        // UITableViewCellSeparatorStyle.None
        // UITableViewCellSeparatorStyle.SingleLine
        // UITableViewCellSeparatorStyle.SingleLineEtched
        
        // セル間の区切りの色を設定
        uiTableView.separatorColor = UIColor.redColor()
        
        // セルの選択可能の有無
        uiTableView.allowsSelection = true
        
        // ヘッダーへ設定するビューを作成
        let uiLableHeader : UILabel = UILabel()
        uiLableHeader.frame = CGRectMake( 0 , 0 , 200 , 30 )
        uiLableHeader.text = "TableHeaderView"
        // ヘッダーへビューを設定
        uiTableView.tableHeaderView = uiLableHeader
        
        // フッターへ設定するビューを作成
        let uiLableFooter : UILabel = UILabel()
        uiLableFooter.frame = CGRectMake( 0 , 0 , 200 , 30 )
        uiLableFooter.text = "TableFooterView"
        // フッターへビューを設定
        uiTableView.tableFooterView = uiLableFooter
        
        // テーブルが編集可能状態を設定
        uiTableView.editing = true
        
        // テーブルがバウンド可能の有無
        uiTableView.bounces = true
        
        
        // 再利用する Cell の ID を設定
        uiTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        
        // ビューへテーブルをセットします。
        self.view.addSubview(uiTableView)
        
    }
    
    
    // ■ UITableViewDataSource デリゲート
    // セクション内に表示する行数を設定
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableDatas.count
    }
    
    // 表示する内容を作成
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        // 再利用するセルを取得
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
        
        // セルのデフォルトのテキストラベルの設定
        cell.textLabel!.text = tableDatas[indexPath.row]
        cell.textLabel!.textColor = UIColor.blueColor()
        cell.textLabel!.font = UIFont.systemFontOfSize(12)
        cell.textLabel!.textAlignment = NSTextAlignment.Left
        
        // セルのデフォルトの詳細用テキストラベルの設定
        cell.detailTextLabel!.text = "ラベルテキスト"
        cell.detailTextLabel!.textColor = UIColor.yellowColor()
        cell.detailTextLabel!.font = UIFont.systemFontOfSize(12)
        cell.detailTextLabel!.textAlignment = NSTextAlignment.Right
        
        // セルのデフォルトの画像を設定
        cell.imageView!.image = UIImage(named: "image.png")
        
        // セルのデフォルトのアクセサリーを設定
        cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator
        // UITableViewCellAccessoryType.None
        // UITableViewCellAccessoryType.DisclosureIndicator
        // UITableViewCellAccessoryType.DetailDisclosureButton
        // UITableViewCellAccessoryType.Checkmark
        // UITableViewCellAccessoryType.DetailButton
        
        // セル選択時のスタイルを設定
        cell.selectionStyle = UITableViewCellSelectionStyle.Blue
        // UITableViewCellSelectionStyle.None
        // UITableViewCellSelectionStyle.Blue
        // UITableViewCellSelectionStyle.Gray
        // UITableViewCellSelectionStyle.Default
        
        return cell
    }
    
    
    // セクションの数を設定
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return tableDatas.count
    }
    
    
    // ヘッダーセクションのタイトルを設定
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "ヘッダータイトル"
    }
    
    
    // フッターセクションのタイトルを設定
    func tableView(tableView: UITableView, titleForFooterInSection section: Int) -> String? {
        return "フッタータイトル"
    }
    
    
    // テーブルのセル修正完了時に呼ばれる
    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        print("セル修正完了")
    }
    
    
    // テーブルのセル移動完了時に呼ばれる
    func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath indexPath: NSIndexPath) {
        print("セル移動完了")
    }
    
    
    
    // ■ UITableViewDelegate デリゲート
    // セルの高さを個別に設定、
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        // セルが作成されるたびに呼ばれます。
        // セルの行が2行目の場合
        if indexPath.row == 2 {
            return 100
        }
        return 50
    }
    
    
    // ヘッダーのセクションの高さを個別に設定
    func tableView(tableView: UITableView, heightForHeaderInSection section: NSInteger) -> CGFloat {
        // 2個めのセクションの場合
        if section == 2 {
            return 100
        }
        return 50
    }
    
    
    // アクセサリーボタンタップ時に呼ばれる
    func tableView(tableView: UITableView, accessoryButtonTappedForRowWithIndexPath indexPath: NSIndexPath) {
        print("アクセサリーボタンタップ")
    }
    
    
    // セルタップ時に呼ばれる
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("\(indexPath.row) : 行目がタップされました。")
        print("\(tableDatas[indexPath.row]) : を タップ!")
    }
    
}


UITableView 概要

テーブルビューを利用時に使用します。

テーブルビューセルの区切りの種類

■ UITableViewCellSeparatorStyle

UITableViewCellSeparatorStyle.None
UITableViewCellSeparatorStyle.SingleLine
UITableViewCellSeparatorStyle.SingleLineEtched

セルのデフォルトのアクセサリーの種類

■ UITableViewCellAccessoryType

UITableViewCellAccessoryType.None
UITableViewCellAccessoryType.DisclosureIndicator
UITableViewCellAccessoryType.DetailDisclosureButton
UITableViewCellAccessoryType.Checkmark
UITableViewCellAccessoryType.DetailButton

セル選択時のスタイルの種類

■ UITableViewCellSelectionStyle

UITableViewCellSelectionStyle.None
UITableViewCellSelectionStyle.Blue
UITableViewCellSelectionStyle.Gray
UITableViewCellSelectionStyle.Default
おすすめの本

 

タイトルとURLをコピーしました