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を利用しているようです。

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

GはGoogle他のアルファベットを勝手に妄想してみる

さて昨日はGoogleが衝撃的な発表でAlphabetという親会社をつくって、Googleはアルファベットの中のGがGoogleとの 位置づけで今後展開していくとの事。ネーミングもですが、今後の期待を大きく感じる、またわかりやすく好印象だったのか株価も 大きく上がったとのことでした。さて、その他残りのアルファベットはどんな風になるのかなぁと勝手に歩きながら妄想してみました。

外部ブラウザでURLを開く

アプリから外部ブラウザ(Safari)でURLを開く方法を記載します。内部的に利用する場合はWebViewを利用します。

AppleWatchアプリの申請

AppleWatchアプリの申請が4月1日から始まりましたので、少しトライしてみました。ハマった箇所を共有です。 アプリをArchiveしてValidateしてから2パターンの不具合、あとはアップロードには成功したのですが、Itunesに反映されなかった 現象を共有です
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!