このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

1から始めるSwift言語。SwiftでiPhoneApp製作 その3 「Image View」

Swift

2016.02.12

この記事は最終更新日から1年以上が経過しています。

という事で、今回も前回の

1から始めるSwift言語。SwiftでiPhoneApp製作 その2 「Label」「TextField」

の続きとなります。

Image View

テキストばかり表示しても面白くないですよね。

という事でで、今回は画像を表示する「Image View」に関してです。

 

スクリーンショット 2016-02-11 21.47.35

画像ファイルは一番左カラム(Navigator Area)のプロジェクトフォルダに格納する事によって呼び出す事ができます。

今回は、こちらの可愛らしい子猫のイラストをお借りして「Image View」に表示していきます。

 

スクリーンショット 2016-02-11 21.47.46

かわいいですね。

画像ファイルを一番左カラム(Navigator Area)にドラッグアンドドロップで格納する事ができます。

その際にこのようなダイアログが表示します。

とりあえずは以下の様にデフォルトで大丈夫かと思います。

スクリーンショット 2016-02-11 21.48.48

cat.pngが格納できたのが確認できます。

スクリーンショット 2016-02-11 21.48.57

一番右カラム(Utility Area)の右下にUIkitのリストで「Image」と検索すると、

スクリーンショット 2016-02-11 21.49.15

「Image View」がヒットします。

スクリーンショット 2016-02-11 21.49.20

こちらを、例のごとく「View Controller」の方にドラッグアンドドロップで配置。

スクリーンショット 2016-02-11 21.49.29

配置したらオブジェクトを選択し、一番右カラム(Utility Area)のImage Viewで「Image」の項目から追加した

cat.pngが選択できますので選択。

スクリーンショット 2016-02-11 21.49.46

スクリーンショット 2016-02-11 21.49.55

すると、いとも簡単に画像が配置できます。

かわいいですね。

スクリーンショット 2016-02-11 21.49.59

でも、表示(アスペクト比)がおかしいので設定を行います。

設定はImage Viewオブジェクトを選択した状態で、

一番右カラム(Utility Area)のViewの「Mode」から変更が行えます。

デフォルトでは、「Scale To Fill」が選択されていました。

スクリーンショット 2016-02-11 21.50.07

これを「Aspect Fit」に変更します。

スクリーンショット 2016-02-11 21.50.21

確認すると、綺麗に表示されました。

スクリーンショット 2016-02-11 21.50.54

かわいいですね。

一番右カラム(Utility Area)のViewの「Mode」は以下の通りとなっております。

Image View Mode

Scale to Fill:縦横の比率を変え全体表示

Aspect Fit:縦横の比率をそのままに長い辺を基準に全体表示

Aspect Fill:縦横の比率をそのままに短い辺を基準に全体表示

Redraw:Aspect Fillと同様だが、UIImageViewのサイズ変更に追随してリサイズ

Center:画像サイズを変えず中央配置

Top:画像サイズを変えず上辺を揃える

Bottom:画像サイズを変えず下辺を揃える

Left:画像サイズを変えず左辺を揃える

Right:画像サイズを変えず右辺を揃える

Top Left:画像サイズを変えず上辺・左辺を揃える

Top Right:画像サイズを変えず上辺・右辺を揃える

Bottom Left:画像サイズを変えず下辺・左辺を揃える

Bottom Right:画像サイズを変えず下辺・右辺を揃える

となっております。

とりあえずは「Aspect Fit」を選択しておけば良いかと思います。

表示に関しては、選択してどの様に変わるか触ってみると良いかと思います。

と、今回もSwiftナッシングとなりましたが、次回いよいよ記述していきますよー!

Swiftを始めようと思った方の参考になればとー。

ではでは。

Comment

Related Article

1から始めるSwift言語。SwiftでiPhoneApp製作 その7 基本的なデータ型、Optional型、値型と参照型(ClassとStruct)

2016.02.19

1から始めるSwift言語。SwiftでiPhoneApp製作 その6 PlaygroundでSwift記述

2016.02.15

1から始めるSwift言語。SwiftでiPhoneApp製作 その5 AutoLayout Constraints

2016.02.14

1から始めるSwift言語。SwiftでiPhoneApp製作 その4 「Button」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その3 「Image View」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その2 「Label」「TextField」

2016.02.11

1から始めるSwift言語。SwiftでiPhoneApp製作 その1

2016.02.11

CATEGORY LIST

LATEST NEWS

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US