2016-05-25

CollectionViewでセルを並べる

目標

ビューを生成
ビューにセルを表示
ビューのFlowLayoutを理解する
ビューのデリゲートメソッドとデータソースメソッドを理解する

ポイント

UICollectionViewFlowLayoutでセルの設定をする
データソースメソッド

・collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) ・func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int

デリゲートメソッド

・func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)

ソースコード

//デリゲートとデータソースクラスを継承する
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

//ビューを初期化
    var myCollectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        //layout セルのレイアウト設定に使用。セルの大きさやセルとセルの間の間隔を設定
        let layout = UICollectionViewFlowLayout()
        
        //ビューの生成
        myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        
       //セルの大きさを設定
        layout.itemSize = CGSize(width: 50, height: 50)
        //セル間隔を調節
        layout.sectionInset = UIEdgeInsets(top: 16, left: 36, bottom: 32, right: 36)
        
       //列間隔の最小値を変更
        layout.minimumInteritemSpacing = 10
        //行間隔の最小値を変更
        layout.minimumLineSpacing = 10

        //ヘッダーのサイズを指定
        layout.headerReferenceSize = CGSize(width: self.view.frame.width, height: 100)
        //再利用するセルクラスをコレクションビューに登録する
        myCollectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
        
        //デリゲートとデータソースをクラスに反映
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
    }

    //画面を更新するためのメソッド
    private func updateFrame() {
        
        self.myCollectionView.frame = self.view.frame
    }
    
    //セルがタップされた時に呼び出される
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print("Num: \(indexPath.row)")
        print("Value:\((collectionView))")
    }
    
    //セル数を指定する
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 100
    }
    

    //各セルごとの設定を記述するメソッド
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath) as UICollectionViewCell
        cell.backgroundColor = UIColor.orangeColor()
        return cell
    }

2016-05-20

Swift テーブルビュー

はじめに

入社2年目ののむそんが、修行のためswiftの勉強成果を垂れ流すお

今日はテーブルビューについてまとめるお

ビューを生成
テーブルにセルを表示
テーブルのセルタイプを理解
テーブルのデリゲートメソッドとデータソースメソッドを理解する

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
//初期値設定　myItems:セル内文字　myTableView:テーブルビュー格納用の変数 cellIdentifer:セル識別子
    private let myItems:NSArray = ["TEST1", "TEST2", "TEST3"]
    private let myTableView = UITableView()
    private let cellIdentifier = "myCell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
//ビューの位置、サイズを設定
        myTableView.frame = CGRect(x: 0, y: barHeight, width: displayWidth, height: displayHeight - barHeight)
//識別子の設定
        myTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: cellIdentifier)
//デリゲートの設定
        myTableView.dataSource = self
        myTableView.delegate = self

//ビューにテーブルビューを追加
        self.view.addSubview(myTableView)
    }



//セルをタッチした時のアクション　タッチした瞬間のみセルの色が変化する
//delegate :UITableViewDelegate
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
//セルの0番目のみセルの色がそのままになる。コメントアウト
//        if indexPath.row == 0 {
//            return
//        }
        tableView.deselectRowAtIndexPath(indexPath, animated: true)
        print("Num: \(indexPath.row)")
        print("Section: \(indexPath.section)")
        print("Value: \(myItems[indexPath.row])")
    }
//セクションの名前を指定
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "セクションナンバー \(section)"
    }
//セクションの中のセル数を指定
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return myItems.count
    }
//セクション数を指定
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
//セクションの数だけセル数(row)が増える　3x10=30個
        return 10
    }
//画面上にあるセルは画面外に消えると使い回される。使い回すための処理を追加
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        //cellは使い回される(１画面分のみ。画面外に消えたものは下に)
        let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath)
        
        cell.textLabel?.text = "\(myItems[indexPath.row])"
        return cell
    }

補足

下記の通り必須で呼び出す必要があるメソッドがある UITableViewDataSource　の場合

    public func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    public func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

なお、呼び出す必要があるかどうかは、メソッドがオプショナル(optional)かどうかで判断する。

書くの疲れたおー◟꒰◍´Д‵◍꒱◞