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

とりあえずnull

プログラミングの勉強日記

UIパーツを配置なら避けては通れないならマスターしちまえ!CGRectの使い方とコツのまとめ

相変わらずWebのフロントばかり触っていると、捉え方が幾分違うiOSの世界に戸惑うばかりです。そんな状態ですがCGRectについて学んでみた。

位置を指定するCGRectの基本的な使い方

UIViewやUIViewのサブクラスのオブジェクトの位置を指定する時に使えるクラスであるCGRect。要するにUIパーツなどの配置を決める時に必要なやつ。座標をしてくれるってだけのクラス。引数にはx軸の開始位置, y軸の開始位置, オブジェクトの横幅, オブジェクトの縦幅の4つを指定することができる。

// (x, y) = (0, 0)からwidth100, height100のオブジェクトの形を指定
CGRect sample = CGrectMake(0, 0, 100, 100);

// UILabelにて位置とサイズを指定してみる
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.frame = CGRectMake(0, 0, 100, 100);

CGRect・CGPoint・CGSize

CGRectの他にもCGPointとCGSizeという指定用のクラスがあるっぽい。CGPointは開始位置を指定できるクラス。CGRectでいう1番目、2番目の引数にあたる部分。CGSizeはサイズを指定するクラス。CGRectでいう3番目、4番目の引数にあたる部分。というわけでCGRectはCGPointとCGSizeの両方をまとめて指定できる便利なクラスってことらしい。

参考URL: サイズ指定(CGRect CGPoint CGSize) - iPhoneアプリ開発の虎の巻

画面サイズごとに自動で横幅調整する際のチップス

iPhone4系, iPhone5系, iPhone6系で画面サイズ(ピクセル)が異なります。絶対値指定でCGRectを安易に使って配置しちゃいますとあるデバイスでは奇麗にみえても、別のサイズのデバイスでは隠れてしまう現象が起きかねません。そんな不幸を解決するには以下のような準備必要とのこと。

// 画面のフル横幅とフル縦幅を取得し、iPhone4系, iPhone5系, iPhone6系の最小公倍数で分割して単位を決める
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenRatioWidth = screenRect.size.width / 320; // 横幅の基本単位
CGFloat screenRatioHeight = screenRect.size.height / 568; // 縦幅の基本単位

例) 使い方

// 基本単位の設定
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenRatioWidth = screenRect.size.width / 320; // 横幅の基本単位
CGFloat screenRatioHeight = screenRect.size.height / 568; // 縦幅の基本単位

// 余白の設定
CGFloat padding_w = screenRatioWidth * 10; // 横余白の基本単位
CGFloat padding_h = screenRatioWidth * 10; // 縦余白の基本単位

// ラベルの基本サイズ設定
CGFloat viewLabelWidth = (self.view.frame.size.width - padding*2);
CGFloat viewLabelHeight = (self.view.frame.size.height - padding*2);

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(padding, padding,viewLabelWidth, viewLabelHeight )];

label.backgroundColor = [UIColor redColor]; // 背景色指定
[self.view addSubview:label]; // 画面出力

出力結果:
f:id:noriven:20150408023531p:plain
ちゃんと縦横に余白が均等に作られているのが確認できるかと思います。

WebフロントのCSSなどとは考え方が違っていて指定もめんどくさいし、なんだかんだ絶対値指定を画面サイズごとに単位を変えながら余白をうまく利用して無理矢理やらわざるをえない感じがあって辛い。