UIImageViewとは

UIImageViewとは画像を扱う先にほぼ必須のUIです。

アプリで開発で扱う頻度はかなり高さそうなので、完璧にマスターしたいところです。

画像の指定方法

まずは貼りたい画像をプロジェクトに落とし込む必要があります。

その方法は二つあります。

①ゴリゴリ系

[File]

↓

[Add File To “プロジェクト名”]

（私はPlayingAppという名前のプロジェクトになっていますがお気になさらず！）

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-08-0-24-27

そしてお好きな画像を選択してください。

②スマート系

『Assets.xcassets』を開いてください。

まっさらな画面になっているかと思います。

そこにドラック＆ドロップでお好きな画像を引っ張ってきてください。

このような画面になれば成功です！

画像を取り込むと

Storyboardで指定できるようになります。

UIImageViewを選択した状態でimageをクリックで

取り込んだ画像を指定できます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-08-0-37-58

このようになれば成功です！

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-08-0-42-03

でもあれれ？なんかアスペクト比がおかしいぞ？？

という方はContent Modeを調節しましょう。

Content Mode

UIImageViewにはContent Modeというものがあります。

簡単に言えばアスペクト比関係を設定するところです。

デフォルトでは『Scale to Fill』になっています。

Scale to Fill

UIImageViewの大きさにぴったりはまるように画像を合わせます。

画像のアスペクト比は変わり、隙間はできません。

Aspect Fit

アスペクト比を保ったまま、

画像の辺の長い方を基準に画像に当てはめます。

隙間ができます。

Aspect Fill

アウペクト比を保ったまま、

画像の辺の短い方を基準に当てはめます。

隙間はできませんが,UImageViewから画像がはみ出ます。

代表的なものはこの三つです。他にもまだまだあります。

コードでの画像の指定方法

次にコード上で画像を設定します。

Storyboardに新しいUIImageViewを配置しました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-08-1-03-25

この上のUIImageViewを編集していきます。

まずはコードと結びつけましょう。

『imageView』という名前でoutlet接続しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-08-1-07-20

そしてこのように編集してください。

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()
        
    }
    
    
    
    
        
    
}