Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > UICollectionviewでタイル状にセルを並べる

UICollectionviewでタイル状にセルを並べる

SwiftサラリーマンのFacebookページでUICollectionviewに関する情報を教えていただいたので記事にしてみました(佐藤様ありがとうございます!)。 このコントロールの存在をしらなかったので、なるほど、、、と調査してみました。さて、このサンプルは同じ四角形だけのものをつくりましたが、 タイル状にセルを並べることができるようです。UITableViewに構造が似ています どうやらそれぞれのセルの大きさを可変にすることもできるようです。まだまだ表面上の説明記事ですが、また都度追加していけたらと思います!

サンプル画像

参考:054 UICollectionViewのCellをカスタマイズする
参考:【iOS Swift入門 #101】Storyboardを使わずにCollectionViewを作成する。AutoLayoutも使う。

やってみた

サンプル画像

Storyboardを使わない簡単なサンプルです。UITableViewと仕組みはほぼ同じなのかと思います。 Delegateを受け取る為のCellの個数やCellのオブジェクトを返す関数は必須です


import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    
    var myCollectionView : UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSizeMake(50, 50)//大きさ
        layout.sectionInset = UIEdgeInsetsMake(16, 16, 32, 16)//マージン
        layout.headerReferenceSize = CGSizeMake(100,30)
        myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        myCollectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        self.view.addSubview(myCollectionView)
        
    }
    
    //Cellがクリックされた時によばれます
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        println("選択しました: \(indexPath.row)")
    }
    
    //Cellの合計数
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 50
    }
    
    //Cellオブジェクトを返す。ここでカスタムセルにしたりするとそれぞれ変更できる。
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! UICollectionViewCell
        cell.backgroundColor = UIColor.redColor()
        
        //-----
        //おまけ、Swiftサラリーマンのおっさんの顔
        let url = NSURL(string:"http://swift-salaryman.com/files/image/page_top.gif");
        var err: NSError?;
        var imageData = NSData(contentsOfURL:url!,options: NSDataReadingOptions.DataReadingMappedIfSafe, error: &err)!;
        var img = UIImage(data:imageData);
        let iv = UIImageView(image:img);
        iv.frame = CGRectMake(0, 0, 50, 50);
        iv.backgroundColor = UIColor.greenColor();
        cell.addSubview(iv);
        //-----
        
        return cell
    }
    
}

Swiftサラリーマンおっさんの顔画像は不要かと思いますので、上記おまけと記載している箇所は削除してください。

カスタマイズ

特になし。(今後ここにCellの大きさが可変できるサンプルを追加したい)

まとめ

よくニュースサイトなんかでタイルに表示しているアプリが多くありますがUITableViewを利用しているのかと 思っていましたが、どうやらこのUICollectionViewを利用しているようです。

↓こんな記事もありますよ!

Pintoを1年利用してほんとにプログラマーの背筋がピンとなった(P!nto)

猫背どうにかならないかな、、、、。プログラマーとしての職業上日中8割9割は画面と押し問答している私は、 熱中すればするほど画面に食い入り知らず知らずに前のめりの姿勢に。姿勢が悪い、、、、分かってるんだけど、やめられない。

新しくなったLawsonの無料WiFiを試してみた

ネットでローソン無料Wifiを調べていたのですがネットを接続するにはアプリが必要との誤情報が多かった(今まではアプリが必要だった)ですが、2015年の6月からはアプリの必要ありません。 Wifiで接続して登録すればPCからでも利用できました。手順を記載してまいります。

AppleWatchをNSFileCoordinatorとKeychainでデータ交換

前回の記事(ナターシャさんのサンプルデモを元に解説)の続きです。今記事はNSUserDefaultではなく、 NSFileCoordinatorとKeychain sharingを利用しての解説です。ナターシャさんのサンプルに関して前記事をご参照ください。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!