31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UICollectionViewCell の大きさについて

Last updated at Posted at 2015-11-21

はじめに

今度 Swift でアプリ作ることになって TableView みたいな見た目を
CollectionView で作ってみようと思っていざ作ったけど何かおかしい。

UICollectionViewCellの幅ってどうやって決めるの?

今更感もある。でも使わないと知らないものだ。
そもそも TableView で作れと。

以下備忘録。Swift 本格的にやっていこうかな。
クラスメソッドの書き方もわからなかったのでついでに。

UICollectionViewCell の設定

iOS 6 から導入された UICollectionView は今まで色々使ってきたけど,
いわゆるタイルみたいな使い方しかしたことなく,セルの幅と高さは
Storyboard の設定で直接数字いじって決めてたわけです。

原因がわかった。セルの Width が 600 になってたから。
CollectionView の方はできても セルは AutoLayout の設定ができない。
セルの中はしっかりできますけどね。どうやったらいいのか調査。

CollectionViewCell の長さを可変にする

結論から言うと,UICollectionViewDelegateFlowLayout の
デリゲートメソッドを使うだけだった。返り値は CGSize で
TableView 見たくするために Width はディスプレイサイズの幅,
Height は適当に 120 にした。Util のとこは後の項参照です。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        
	// Util からでディスプレイサイズ取得
	// Width はそれを使い,高さは適切な値で返してやる
	let returnSize = CGSize(width: Util.returnDisplaySize().width, height: 120)
	
	return returnSize
}

あとは通常通り,必須のデリゲートメソッドを設定すればいい。
これで数値にこだわらずに書けるようになりそうだなー。
Objective-C も同じように書けるはず。機会あれば使おう。

追記(2017/05/28)
Swift3 だと下記のようになる。最近は extension を使って分けて書いている。

HogeViewController.swift
extension HogeViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 例えば端末サイズの半分の width と height にして 2 列にする場合
        let width: CGFloat = UIScreen.main.bounds.width / 2
        let height = width
        return CGSize(width: width, height: height)
    }
}

クラスメソッドの書き方

1回目は直書き,同じファイルで2回目使う場合はメソッド作成,
違うファイルでも使う場合は Util で。最近やっと定着してきた。
それも Objective-C の話で今回初めて Swift で使う機会きたので書く。
まぁだいたい Util に入れるものって決まってたりしますけどね。

今回はディスプレイサイズが欲しかったので,
Util.swift でクラスメソッド書く。

Util.swift
class Util: NSObject {
	/**
     * 使用端末のディスプレイサイズを返す
     * @return displaySize (.width と .height)
     */
    class func returnDisplaySize() -> CGSize {
        let displaySize = UIScreen.mainScreen().bounds.size

        return displaySize
    }

ちなみに Objective-C だと下記。
Swift の方はファイルも一つだし楽だったかもなー。

Util.h
@interface Util : NSObject

+(CGSize)returnDisplaySize;

@end

Util.m
@implementation Util

+(CGSize)returnDisplaySize {
    CGSize displaySize = [[UIScreen mainScreen] bounds].size;
    
    return displaySize;
}

@end

CGSize size = [Uitl returnDisplaySize]; // 呼ぶとき

おわりに

今回は Swift での UICollectionViewCell の可変について書いた。
ついでにクラスメソッドについても書いた。
一度確認すればもう迷うこともないかな。
画面サイズが 4 種類にもなった影響もあって UI 周りの再勉強が
必要だと感じる。iPad Pro が出て今まで特に考えなくてもよかった,
iPad アプリの改修に頭抱えている現場も意外とありそうだなー
とか思ったり思わなかったり。

ご覧いただきありがとうございました。
もっとこうした方が適切とかありましたらコメントお願いいたします。

31
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?