iPhone5のレイアウト

2012/09/28
iPhone5になって一番厄介なのが、解像度の変更でしょうか? なにせアスペクト比が変わってしまいましたから・・・

iPhone4 と iPhone5のRetina解像度

iPhone4 Retina: 640 x 960 iPhone5 Retina: 640 x 1136

最初は、機種判別とかviewの画面サイズを取得してレイアウトを考えてましたが、実はInterfaceBuilderだけでほとんどの事が解決できるかと思います。 実際はステータスバーを利用する事が多いと思うので、ステータスバーの高さ分のレイアウトを考慮する必要があります。

IBでRetina4 Full Screenを設定

まずはInterfaceBuilderでviewを Simulated Metrics > Retina4 Full Screen に設定するとiPhone5の解像度(640 x 1136)でレイアウトできます。 というか、こうしないとiPhone5で表示されないと思います(上下黒枠)。

UI位置はIBのAutoSizingを利用する

Retina4 Full Screenのレイアウトにしたら、今まで個人的にあまり気にしていなかった「AutoSizing」の利用です。 ちなみに、AutoLayoutにすると色々崩れるので利用しない方がいいような気がしました。 「AutoSizing」は、viewのサイズが変更された時にその中のUIがどういう位置取りをするか設定するものです。 iPhone5で基本レイアウトしておき、各UIパーツ毎に「AutoSizing」を設定します。

iPhone5で起動

レイアウトそのままで表示

iPhone4で起動

「AutoSizing」の設定によりUIが自動で位置調整して表示
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel 7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加