Swift

Swift:UIImageViewの基本的な使い方のメモ


今回はUIImageViewの使い方をメモしていきます

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』を開いてください。

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

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

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

%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-27-31

 

 

画像を取り込むと

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

 

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

 

UIImage(named: “画像名”)

このようにしてUIImageに画像名を入れてインスタンス化します。

UIImageViewでなくUIImageであるのがミソです。

そして、

によって実際にimageViewに画像を設定してます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


コメントを残す

*