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

Swift,Objective-Cプログラミング ~ iOS ~

Objective-C,Swift,Apple Watchなどのプログラミング

【iOS Swift入門 #101】Storyboardを使わずにCollectionViewを作成する。AutoLayoutも使う。

Swift

■Storyboardを使わずにCollectionViewを作成する。
Storyboardを使わずにCollectionViewを作成します。
まずはAutoLayoutを使わずに作成。

1.新規プロジェクト作成
Xcodeを起動
②File→New→Project
③Single View Applicationを選択
④Product Nameなど必要な情報を入力
※例
f:id:fjswkun:20150723224720p:plain

2.CollectionView作成
100個の赤いセルを表示するコレクションビューを作成します

①ViewController.swiftを開く
②下記のようにコーディング

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource {
    var collectionView:UICollectionView!
   
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
       
        // レイアウト作成
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.scrollDirection = .Vertical
        flowLayout.minimumInteritemSpacing = 5.0
        flowLayout.minimumLineSpacing = 5.0
        flowLayout.itemSize = CGSizeMake(100, 100)
       
        // コレクションビュー作成
        collectionView = UICollectionView(frame: view.frame, collectionViewLayout: flowLayout)
        collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collectionView.dataSource = self
        view.addSubview(collectionView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
   
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 100
    }
   
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as UICollectionViewCell
        cell.backgroundColor = UIColor.redColor()
        return cell
    }
   
   
}


③コーディングできたら、デバッグして確認しよう
下記のような画面が表示されます。
f:id:fjswkun:20150723225115p:plain

3.AutoLayoutの設定
上記のソースでは画面回転時の処理をしていないので、
画面回転すると表示が崩れてしまいます。
f:id:fjswkun:20150723225300p:plain

AutoLayoutを設定しよう。
①下記のように修正

import UIKit
 
class ViewController: UIViewController, UICollectionViewDataSource {
    var collectionView:UICollectionView!
   
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
       
        // レイアウト作成
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.scrollDirection = .Vertical
        flowLayout.minimumInteritemSpacing = 5.0
        flowLayout.minimumLineSpacing = 5.0
        flowLayout.itemSize = CGSizeMake(100, 100)
       
        // コレクションビュー作成
        collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: flowLayout)
        collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collectionView.dataSource = self
        view.addSubview(collectionView)
       
        // AutoLayout制約を追加
        setupConstraints()
    }
   
    private func setupConstraints(){
        var viewConstraints = [NSLayoutConstraint]()
       
        // コレクションビューの制約
        collectionView.setTranslatesAutoresizingMaskIntoConstraints(false)
        viewConstraints.append(NSLayoutConstraint(item: collectionView, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1.0, constant: 0.0))
        viewConstraints.append(NSLayoutConstraint(item: collectionView, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1.0, constant: 0.0))
        viewConstraints.append(NSLayoutConstraint(item: collectionView, attribute: .Leading, relatedBy: .Equal, toItem: view, attribute: .Leading, multiplier: 1.0, constant: 0.0))
        viewConstraints.append(NSLayoutConstraint(item: collectionView, attribute: .Trailing, relatedBy: .Equal, toItem: view, attribute: .Trailing, multiplier: 1.0, constant: 0.0))
       
        // ビューに制約を追加
        view.addConstraints(viewConstraints)
    }
   
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
   
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 100
    }
   
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as UICollectionViewCell
        cell.backgroundColor = UIColor.redColor()
        return cell
    }
   
   
}

デバッグして確認
③画面回転しても表示が崩れないことを確認
f:id:fjswkun:20150723225327p:plain

以上です。

サンプルのソースGitHubにアップしています。

ダウンロード後、下記のコミットIDでチェックアウトしてください。
コレクションビューの作成 de52d3e7b31cd09894592643670a34876b3b0373

以上です。

【参考情報】
iOSアプリ開発未経験の人向け
iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

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

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

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。

iPhoneアプリ開発塾

iPhoneアプリ開発塾

③中級者、上級者向け

詳解 Swift

詳解 Swift