#23 Viewの背景を画像にする方法1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11


##part1
`Assets.cassests`に画像をドロップする．

<img width="502" alt="スクリーンショット 2020-02-05 午後10.39.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/3f4d291b-abd8-3e10-ecd4-e77958ad16bb.png">

###追記
画像が選択された状態で，`Attributes inspector`の`Scales`を`Single Scale`にする．

<img width="259" alt="スクリーンショット 2020-02-24 午後2.25.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/79c48335-fdd5-d480-5c21-8209289d0912.png">



##part2
`UIImageView`と検索する．

<img width="682" alt="スクリーンショット 2020-02-05 午後10.40.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/8b15f829-5e6b-ccfa-af65-317418bc9e06.png">



##part3
`UIImageView`を`View`に全て覆うように置く．

<img width="411" alt="スクリーンショット 2020-02-05 午後10.40.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/d19fa828-61bc-c018-0fad-c712709a62a2.png">



##part4
`UIImageView`に以下の4つの制約を付ける．

<img width="266" alt="スクリーンショット 2020-02-05 午後10.41.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/bea7c563-9f92-1c3b-30ab-cc3bf46297eb.png">



##part5
すると`UIImageView`がズレるので，もう一度`View`に全て覆うようにする．

<img width="369" alt="スクリーンショット 2020-02-05 午後10.41.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/209fd533-c23d-a825-cb87-3c4f1f601afc.png">



##part6
その状態で，`Selected Views`の`Update Constraint Constants`を選択する．

<img width="245" alt="スクリーンショット 2020-02-05 午後10.41.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/d03bbc9e-9ce4-9d52-4260-417b9017773a.png">



##part7
そのまま`UIImageView`を選択した状態で，`Attributes inspector`の`Image`から，先程追加した画像を選択する．

<img width="259" alt="スクリーンショット 2020-02-05 午後10.41.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/5f5a5466-98d8-55b9-e469-5c733e44edba.png">



##part8
`UIImageView`を選択した状態で，`Attributes inspector`の`Content Mode`で`Scale To Fill`を選択する．

<img width="259" alt="スクリーンショット 2020-02-05 午後10.42.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/114f73d6-efc4-df20-d2d2-be6815ecdff9.png">



##part9
ラベルやボタンよりも後に`UIImageView`を配置すると，ラベルやボタンが隠れてしまうので，下の写真のように，`UIImageView`を`Safe Area`の直下にドラッグ・ドロップする．

<img width="272" alt="スクリーンショット 2020-02-05 午後11.04.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/0440affc-b6ee-4898-4f97-1131d0ee4d24.png">

<img width="273" alt="スクリーンショット 2020-02-05 午後10.42.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/b640fd7b-7e0a-fa33-de27-04c44d503dd1.png">



##part10
以下のように，`UIImageView`が再背面に移動している事を確認する．

<img width="359" alt="スクリーンショット 2020-02-05 午後10.43.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/45c43460-faa5-9e32-8897-757021e0e3a8.png">



##part11
`Label Label`を選択して，`Attributes inspector`の`Shadow`を`System Background Color`にする．

<img width="317" alt="スクリーンショット 2020-02-05 午後10.44.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/34eb9077-3d8c-7367-7972-3e253bf4a595.png">



##part12
`Label Label`を選択した状態で，`Attributes inspector`の`Shadow Offset`の`Width`と`Height`を`-1`にする．

<img width="261" alt="スクリーンショット 2020-02-05 午後10.44.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/580313c8-b031-8c76-c4b6-04c9ad7e9f13.png">



##part13
`Button!`を選択して，`Attributes inspector`の`Font`の`Style`を`Bold`にする．

<img width="260" alt="スクリーンショット 2020-02-05 午後10.45.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/cd4f1ba3-84f8-1018-4c0f-47885ecd0f7d.png">