m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

swiftの学習(UICollectionView)

結果

f:id:m_shige1979:20141123223342p:plain
ただ、画像をサムネのような感じで表示するシンプルなものタップなどはできないので役には立たないかと…

要約

カメラとかのギャラリーみたいなやつを作りたいんだけど…
tableviewじゃないよね

ということでいろいろと探しました

Objective-Cとかならあったような気がしたけどよくわからないので手間取った

手順

プロジェクトをシングルページアプリケーションで作成

f:id:m_shige1979:20141123223647p:plain
※基本なにもしません

CollectionViewCell.swiftを新規作成

これを作成してセルのレイアウトを用意する

//
//  File.swift
//  swiftSample14
//
//  Copyright (c) 2014年 m_shige1979. All rights reserved.
//

import UIKit

class CollectionViewCell: UICollectionViewCell {
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    let textLabel: UILabel!
    let imageView: UIImageView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        imageView = UIImageView(frame: CGRect(x: 0, y: 10, width: frame.size.width, height: frame.size.height*2/3))
        imageView.contentMode = UIViewContentMode.ScaleAspectFit
        contentView.addSubview(imageView)
        
        let textFrame = CGRect(x: 0, y: 5, width: frame.size.width, height: frame.size.height/3)
        textLabel = UILabel(frame: textFrame)
        textLabel.font = UIFont.systemFontOfSize(UIFont.smallSystemFontSize())
        textLabel.textColor = UIColor.blueColor()
        textLabel.textAlignment = .Center
        contentView.addSubview(textLabel)
    }
}
ViewController.swiftを編集

collectionviewのデータソースなどを追加してviewのデータや出力セルなどを設定する

//
//  ViewController.swift
//  swiftSample14
//
//  Copyright (c) 2014年 m_shige1979. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate{
    
    @IBOutlet var collectionView: UICollectionView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 20, left: 5, bottom: 5, right: 5)
        layout.itemSize = CGSize(width: 70, height: 70)
        collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        collectionView!.dataSource = self
        collectionView!.delegate = self
        collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView!.backgroundColor = UIColor.whiteColor()
        
        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 80
    }
    
    
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int{
        return 1
    }
    
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
        
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as CollectionViewCell
        cell.backgroundColor = UIColor.blackColor()
        cell.textLabel?.text = "\(indexPath.section):\(indexPath.row)"
        cell.imageView?.image = UIImage(named: "sample.jpg")
        return cell
        
    }
    // セルをクリックした時に発生するイベント
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath){
        println("\(indexPath.section):\(indexPath.row)")
    }
}

今回はサンプルの画像を用意

実際はiosの画像ディレクトリを取得して画像を読み込みたいけどよくわからないので…

f:id:m_shige1979:20141123224539p:plain

所感

あとはこれにナビゲーションや画像ビューワのようにすれば簡単なアプリとして出来そう。
始めてiosアプリを作成している人にとってはviewなどでいろいろと手間取るようなので調べることは大切のようです。