読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

UITableViewCellを使ってUITableView内のCellのレイアウトを変更する(その1)

xcode swift

概要

tiro105.hateblo.jp
の続き
UITableViewCellを使ってUITableView内のCellのレイアウトを変更する

詳細

UITableViewCell

UITableViewに表示する行(セル:UITableViewCell)の表示方法をカスタマイズできる
カスタマイズする方法は二通りある

  • 文字の大きさや色、行の幅などを変更する方法
  • セルの中身を自由にレイアウトする方法

文字の大きさや色、行の幅などを変更する方法

セルの種類を選んで使う方法
// UITableViewCellStyle...セルの種類、reuseIdentifier...セルID
var cell = UITableViewCell(style: UITableViewCellStyle, reuseIdentifier: String?)

セルの種類には以下の4つがある

UITableViewCellStyle.Default or Default textLabelが左、detailTextLabelは非表示
UITableViewCellStyle.Value1 or Value1 textLabelが左、detailTextLabelは薄く右に
UITableViewCellStyle.Value2 or Value2 textLabelが左に青く、detailTextLabelが中央に
UITableViewCellStyle.Subtitle or Subtitle textLabelが上に、detailTextLabelが下に
セルの高さを設定する
// tableViewオブジェクト
tableView.rowHieght = 100
セルの文字内容を変更する

テキストラベルの変更

// cellはUITableViewCellオブジェクト
cell.textLabel?.text = "\(indexPath.row)行目"

詳細テキストの変更

// cellはUITableViewCellオブジェクト
cell.detailTextLabel?.text = "\(indexPath.row)行目"
セルに画像を設定する
// cellはUITableViewCellオブジェクト
cell.imageView?.image = UIImage(named: "test.png")
セルの文字色変更
// cellはUITableViewCellオブジェクト
// テキストラベル
cell.textLabel?.textColor = UIColor.brownColor()
// 詳細テキストラベル
cell.detailTextLabel?.textColor = UIColor.brownColor()
セルの背景色変更
// cellはUITableViewCellオブジェクト
cell.backgroundColor = UIColor.brownColor()
フォントやサイズを設定
// cellはUITableViewCellオブジェクト
cell.textLabel?.font = UIFont.systemFontOfSize(20)
cell.detailTextLabel?.font = UIFont.systemFontOfSize(20)
セルのアクセサリを設定

cellの右端に詳細ボタンやチェックマークをつけるときに設定

// cellはUITableViewCellオブジェクト
cell.accessoryType = .Checkmark
UITableViewCellAccesoryType.None or .None アクセサリなし
UITableViewCellAccesoryType.DisclosureIndicator or .DisclosureIndicator 右向き矢印
UITableViewCellAccesoryType.DetailDisclosureButton or .DetailDisclosureButton 詳細ボタン
UITableViewCellAccesoryType.Checkmark or .Checkmark チェックマーク
UITableViewCellの使用例

テーブルビューをView Controllerに配置し、delegate,dataSourceはViewControllerに設定
ここらへんは前回の記事参照

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = UITableViewCell(style: .Default, reuseIdentifier: "myCell")
        cell.textLabel?.text = "\(indexPath.row)行目"
        
        // 文字色変更
        cell.textLabel?.textColor = UIColor.brownColor()
        
        // 文字サイズ変更
        cell.textLabel?.font = UIFont.systemFontOfSize(20)
        
        // チェックマークをつける
        cell.accessoryType = UITableViewCellAccessoryType.Checkmark
        
        return cell
    }
    
    // ステータスバー非表示
    override func prefersStatusBarHidden() -> Bool {
        return true;
    }

    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

こんな感じ
f:id:tiro105:20150324152632p:plain

UITableViewCellの使用例2

フォントリストをテーブルリストで表示してみる

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var fontNameArray:[String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // フォントファミリー名を調べて、配列に追加する
        for fontFamilyName in UIFont.familyNames() {
            for fontName in UIFont.fontNamesForFamilyName(fontFamilyName as String) {
                fontNameArray.append(fontName as String)
            }
        }
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fontNameArray.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "myCell")

        // 配列からこのせれウニ表示するフォント名を取得してフォント設定
        var fontName = fontNameArray[indexPath.row]
        cell.textLabel?.text = "ABCDE abcde 01234 あいうえお"
        cell.textLabel?.font = UIFont(name: fontName, size: 10)
        // 詳細テキストにフォント名を表示
        cell.detailTextLabel?.textColor = UIColor.brownColor()
        cell.detailTextLabel?.text = fontName
        
        return cell
    }
    
    // ステータスバー非表示
    override func prefersStatusBarHidden() -> Bool {
        return true;
    }

    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

こんな感じ
f:id:tiro105:20150324153836p:plain

参考

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】