LaunchScreen.xibで中央にロゴを表示させたい。５０％の正方形で。

# LaunchScreen.xibで中央にロゴを表示させたい。画面比率50%で。ロゴの縦横比は変えたくない。
##目的
・iPhoneやiPadの起動画面で中央にロゴを表示させたい。
・iOS8以上では、LaunchScreen.xibというものが使えるらしい。
・画面に合わせて、ロゴのサイズを変えたい。
・今回は上下左右に25%の余白を設ける。中央に画像イメージを置く。置きたい。
↓こんな感じ
![201509161002s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/564337a0-b50d-f9ea-6cfa-47bbcaa82e93.png)
##手順(作業記録)
###概要
↓Xcodeのプロジェクトを生成する
↓LaunchScreen.xibをいじって50%中央配置にする。
↓Imageの縦横比を変えずに配置する。
↓シミュレータで試してみる。
です。
###Xcodeのプロジェクトを生成する
・Xcode Version 6.4
・Single View ApplicationをCreate
・LaunchImageという名前のプロジェクトを作成。
・LaunchScreen.xibというものは自動生成される。
###LaunchScreen.xibをいじってImageを中央に配置する。
・どのようにはAppleのドキュメントとWebを見るとわかる。
・何％という比率でViewアイテムサイズを変更するにはView(A)とView(B)を関連付けして
　View(A)に対して、View(B)の高さは何％、幅は何％という具合にすると記載がある。
・基準になるViewが必要なようです。
・基準用のViewアイテムを2個、ImageViewを1個準備します。
![20150916134648ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/2e516b7e-e900-1ab2-e086-8e80fda91a8f.png)
↓の画面のように配置して、比率を与えることで中央に高さ幅50%のImageViewを配置する。
![20150916134649sx.png](https://qiita-image-store.s3.amazonaws.com/0/88911/f3a95f07-b212-8163-b62c-b5e64ecb11d7.png)
↓基準用View黒色の設定(左上下を0幅で付ける。幅8にする。※最後に0にする)
![20150916134723ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/cb719c87-51a9-6e69-6d7f-aa9d1de86afb.png)
↓UpdateFrameをすると設定値の通りに配置される。
![20150916134732ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/d4f8edeb-472a-88a6-83dc-3140119302e4.png)
↓基準用View青色の設定(上左右を0幅で付ける)(高さは別途設定)
![20150916134759ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/10e58dbc-de83-cdb0-a093-3c82659c27ae.png)
↓基準用View青色の設定(黒Viewと高さを同じにする)(View青とView黒の両方を選択)(青選択→⌘押し黒選択)
 その後FrameUpdate
![20150916134843s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/633af5c6-9086-f4a0-83d3-d3455e59f8de.png)　←黒と青の高さを同じにする。
![20150916134858s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/610d6c9d-5493-5c75-2d25-caeee7eaf558.png) ←フレームアップデート
![20150916134913s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/81575299-7e3d-3aa9-7c12-5ec6f1d5456d.png)　←青の高さを25%に
![20150916134930s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/531fdfbd-bd0a-5334-3f9c-8afab25eea53.png)　←青の高さを25%に
↑注意：FirstItemが青ViewならMultiplierは0.25です。黒の場合は逆に4にしないといけないかも。
↓ImageViewの設定(上を0幅で付ける)
![20150916135009s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/9260a548-a5f1-e34b-59b8-67285ff0f7dd.png)
↓ImageViewの設定(基準用View青とImageViewを中央揃え)
![20150916135039ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/a8fe6dc7-d758-819e-4851-f16e4f2a0de2.png)　←X軸の中央揃え(HorizontalCenters)(AlignCenterX)
↓ImageViewの設定(基準用View青と同じ高さ同じ幅)
![20150916135124s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/372a925c-f9f4-4586-4f0f-c7d13801a545.png)　←(EqualWidth,EqualHeight)
(ImageView UpdateFrameを行う)
↓ImageViewの高さと幅の比率を設定する。(基準用View青を基準にした比率)
![20150916135149s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/c9314eed-374a-4bb0-becb-02cbc84f0597.png) ←(幅の比率：EqualWidthを編集)
![20150916135206s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/4d4541af-6978-8085-7209-6e0dcaf10e14.png) ←(MultiPlierは0.5)(FirstItem==ImageView)
![20150916135215s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/a1e6539d-1186-6af5-9151-fa50a88b1069.png)　←(高さの比率：EqualHeightを編集)
![20150916135229s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/e86e9fab-a9de-3af9-5a64-c7dcceceb19e.png)　←(MultiPlierは2)(FirstItem==ImageView)
↓基準用View黒は幅を0にして白色にして、基準用View青は白色にして終了
![20150916170753s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/ff66ca26-6830-bf2d-6d80-29d034b8fa40.png)
↑たぶんできた。
##ImageViewに画像を設定して、縦横比は変わらないようにする。
###Images.xcassetsにLogoのイメージを追加する。
↓Images.xcassetsという入れ物に画像を追加して名前をつけてから使用する。(他に方法があるかも)
 2.ImageSetを追加する。
 5.追加した入れ物に画像をDrag&Dropで設定する。
 7.名前を付ける。
![20150916174332ss.png](https://qiita-image-store.s3.amazonaws.com/0/88911/962bd9b5-567b-f324-e134-0165b88f7bbb.png)
↓ImageViewに追加した画像を設定する。ImageのNameを設定する。
![20150916175544s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/ae4ce8e2-7517-ff20-35c0-b35dd0f53e15.png)
![20150916175605s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/325bdaea-cca7-558a-5cff-19cae555a5c2.png)
↓縦横比の維持設定(Mode:AspectFitを指定する→縦横比を変えず画像をImageViewサイズにFit)
![20150916180356s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/91586fae-e1b5-471c-7bef-54e2a0093d2b.png)
##エミュレータで実行してみる
・iPhone4s(青枠は加工してつけました)
![20150916181701s.png](https://qiita-image-store.s3.amazonaws.com/0/88911/0232676f-ea0b-6c8e-c8ab-381eac783cdc.png)
・iPad ratina Landscape(青枠は加工してつけました)
![20150916182401.png](https://qiita-image-store.s3.amazonaws.com/0/88911/e767fe0e-7063-3147-595d-2e0d4f06ab88.png)

##注意
・スマホアプリ初心者が実験的に試した結果です。記録用に記載しております。参考程度に。
　Webで調べればもっといい方法がありそうですが…