今回はUIImageViewの使い方をメモしていきます
Contents
UIImageViewとは
UIImageViewとは画像を扱う先にほぼ必須のUIです。
アプリで開発で扱う頻度はかなり高さそうなので、完璧にマスターしたいところです。
画像の指定方法
まずは貼りたい画像をプロジェクトに落とし込む必要があります。
その方法は二つあります。
①ゴリゴリ系
[File]
↓
[Add File To “プロジェクト名”]
（私はPlayingAppという名前のプロジェクトになっていますがお気になさらず！）
そしてお好きな画像を選択してください。
②スマート系
『Assets.xcassets』を開いてください。
まっさらな画面になっているかと思います。
そこにドラック＆ドロップでお好きな画像を引っ張ってきてください。
このような画面になれば成功です！
画像を取り込むと
Storyboardで指定できるようになります。
UIImageViewを選択した状態でimageをクリックで
取り込んだ画像を指定できます。
このようになれば成功です！
でもあれれ？なんかアスペクト比がおかしいぞ？？
という方はContent Modeを調節しましょう。
Content Mode
UIImageViewにはContent Modeというものがあります。
簡単に言えばアスペクト比関係を設定するところです。
デフォルトでは『Scale to Fill』になっています。
Scale to Fill
UIImageViewの大きさにぴったりはまるように画像を合わせます。
画像のアスペクト比は変わり、隙間はできません。
Aspect Fit
アスペクト比を保ったまま、
画像の辺の長い方を基準に画像に当てはめます。
隙間ができます。
Aspect Fill
アウペクト比を保ったまま、
画像の辺の短い方を基準に当てはめます。
隙間はできませんが,UImageViewから画像がはみ出ます。
代表的なものはこの三つです。他にもまだまだあります。
コードでの画像の指定方法
次にコード上で画像を設定します。
Storyboardに新しいUIImageViewを配置しました。
この上のUIImageViewを編集していきます。
まずはコードと結びつけましょう。
『imageView』という名前でoutlet接続しましょう。
そしてこのように編集してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import UIKit class ViewController: UIViewController{ @IBOutlet weak var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() let beautifulImage = UIImage(named: "HIRO95_yuubaenokage_TP_V") imageView.image = beautifulImage } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } |
UIImage(named: “画像名”)
このようにしてUIImageに画像名を入れてインスタンス化します。
UIImageViewでなくUIImageであるのがミソです。
そして、
|
1 |
imageView.image = beautifulImage |
によって実際にimageViewに画像を設定してます。
