(初心者向け)Swift3.0で初アプリ - 画像を表示してみる

Swift3.0を使って簡単なiPhoneアプリを作ってみます
[初心者向け）Swift3.0で簡単なiPhoneアプリを作ってみる](http://qiita.com/egplnt/items/e8da2b9af1037e179a57)で作ったシンプルなSwift3.0アプリに任意の画像を表示させてみます

#1. 画像を登録します
- アプリで表示させたい画像を用意します
- Xcodeを起動し、画面左側のナビゲーターから「Assets.xcassets」を選択します。ナビゲーターペインが表示されていない場合、Xcode画面右上のアイコンから表示させます
- 表示させたい画像ファイルをドラッグ＆ドロップで登録します

![スクリーンショット 2017-06-21 15.43.56.png](https://qiita-image-store.s3.amazonaws.com/0/125842/227f702f-7a92-4c55-ac21-a6a1043af2bd.png)

- この画像を扱えるようにするために、ViewController.swift内に定義を追加します
- Xcode画面右上の二重丸のアイコンでViewController.swiftを開きます。画面左側のナビゲーターからViewController.swiftを開いても構いません
- ViewController.swiftに下記の行を追加します。ここで下記の例の"image7"は上のステップで追加した画像ファイルの名前になります

![スクリーンショット 2017-06-21 16.17.00.png](https://qiita-image-store.s3.amazonaws.com/0/125842/5e0bdea2-ae10-91c8-1995-7e0006584e3b.png)


```swift:ViewController.swiftへの画像ファイル定義の追加
    var img7 = UIImage(named:"image7")!
```
- これでViewControllerプログラム内でこの画像ファイルが「img7」という名前で扱えるようになりました

#2. 画像を表示する領域を設定します
- Xcodeのナビゲーターから「Main.storyboard」を開きます
- ラベルやボタンなどを再配置し、画面を表示する領域を用意します

![スクリーンショット 2017-06-21 15.45.37.png](https://qiita-image-store.s3.amazonaws.com/0/125842/1db101e4-65bc-a45f-6e50-19e32ad760bd.png)

- 画面右下のフィルターに"Image"と入力し"ImageView"を表示させます

![スクリーンショット 2017-06-21 15.46.36.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ae731e56-0f81-e6db-3ba5-6972b99ae0ab.png)

- ImageViewをストーリーボードへドラッグ＆ドロップして画像を表示させる領域を作ります

![スクリーンショット 2017-06-21 15.48.06.png](https://qiita-image-store.s3.amazonaws.com/0/125842/08d53394-8c08-f923-f082-116a9292ea62.png)

#3. 画像表示領域をViewControllerに接続します
- Xcodeの画面右上の二重丸をクリックし、ViewController.swiftを表示させます
- ストーリーボードに配置したImageViewを選択し、ドラッグしてViewController.swiftに接続します

![スクリーンショット 2017-06-21 15.59.07.png](https://qiita-image-store.s3.amazonaws.com/0/125842/62784e4b-ac2d-aef8-1753-69af9d81e0f5.png)

- 表示されるポップアップメニューでImageViewの名前として「image1」などを指定します

![スクリーンショット 2017-06-21 16.00.02.png](https://qiita-image-store.s3.amazonaws.com/0/125842/8abc5403-25c9-a471-5df0-479d1534a868.png)

- 「Connect」を押すとViewController.swift内に下記の記述が追加され、ImageViewが接続されます

![スクリーンショット 2017-06-21 16.01.01.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e63366f6-99d3-d230-d220-cbfbe270d97a.png)

```swift:ImageViewの接続
@IBOutlet weak var image1: UIImageView!
```

#4. 画像を表示させるボタンの追加
- 新たにボタン部品を登録し、「画像を表示」などの文字列を指定します

![スクリーンショット 2017-06-21 16.03.19.png](https://qiita-image-store.s3.amazonaws.com/0/125842/5811c0ba-7177-da61-b914-d29e74f2ebab.png)

- このボタンもViewController.swiftへドラッグ＆ドロップします

![スクリーンショット 2017-06-21 16.04.32.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0fc6cc30-ab66-81df-057b-b11efea541f4.png)

- ボタンのアクションを指定するため、「Connection」プルダウンから「Action」を選択します

![スクリーンショット 2017-06-21 16.04.45.png](https://qiita-image-store.s3.amazonaws.com/0/125842/a4ff9325-d129-abcf-75dc-1c005f9da03f.png)

- ボタンの名称として「button3」などを指定し、「Type」は「UIButton」を選択します

![スクリーンショット 2017-06-21 16.04.55.png](https://qiita-image-store.s3.amazonaws.com/0/125842/4abdee2a-28bd-d8b5-9af3-b193be6f1229.png)

- 「Connect」を選択し、ViewController.swiftに接続します

![スクリーンショット 2017-06-21 16.07.18.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ab33a2a1-3b40-afc4-8910-34a97b175bec.png)


```swift:画像表示用ボタンの接続
@IBAction func button3(_ sender: UIButton) {
    }
```

#5. ボタン押下時に画像を表示させます
- ViewController.swiftのボタンの定義に下記の行を追加します

![スクリーンショット 2017-06-21 16.18.51.png](https://qiita-image-store.s3.amazonaws.com/0/125842/a3b5e727-6185-04f3-24fe-bea0386a4f62.png)


```swift:ボタン押下時に画像を表示させる
        image1.image = img7
```
- この例では、button3が押されたときに、画像表示領域であるImageView:image1の画像イメージ（image)として、前項で登録したimg7画像を表示する、という定義になります

#6. シミュレーターおよびiPhone実機で動作を確認する
- シミュレーターで動作を確認します

![スクリーンショット 2017-06-21 16.00.02.png](https://qiita-image-store.s3.amazonaws.com/0/125842/f558b91e-be5a-4f10-1971-0019fce6a25a.png)

- iPhoneでも同様に確認します（略）

# 参考：押すたびに異なる写真を表示する
ボタンを押す毎に乱数で異なる写真を表示してみます。


```swift:
lass ViewController: UIViewController {

    @IBOutlet weak var label1: UILabel!    

    var img7 = UIImage(named:"image7")!
    var img8 = UIImage(named:"image8")!
    var img9 = UIImage(named:"image9")!    

    @IBAction func button1(_ sender: Any) {        
       let random = arc4random() % 10
        print(random)
        if ( random > 7 ) {
            view1.image = img9
        } else if ( random > 4 ) {
            view1.image = img8
         } else {
            view1.image = img7
        }
    }
```

#次のステップへ

#関連ページ