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

m_shige1979のささやかな抵抗と欲望の日々

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

なんとなく作ったサイト

http://www.it-check-matome.info/


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などでいろいろと手間取るようなので調べることは大切のようです。

広告を非表示にする