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

Swift3.0を使って簡単なiPhoneアプリを作ってみます
初心者向け）Swift3.0で簡単なiPhoneアプリを作ってみるで作ったシンプルなSwift3.0アプリに任意の画像を表示させてみます

#1. 画像を登録します

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

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

ViewController.swiftへの画像ファイル定義の追加

    var img7 = UIImage(named:"image7")!

• これでViewControllerプログラム内でこの画像ファイルが「img7」という名前で扱えるようになりました

#2. 画像を表示する領域を設定します

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

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

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

#3. 画像表示領域をViewControllerに接続します

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

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

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

ImageViewの接続

@IBOutlet weak var image1: UIImageView!

#4. 画像を表示させるボタンの追加

• 新たにボタン部品を登録し、「画像を表示」などの文字列を指定します

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

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

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

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

画像表示用ボタンの接続

@IBAction func button3(_ sender: UIButton) {
    }

#5. ボタン押下時に画像を表示させます

• ViewController.swiftのボタンの定義に下記の行を追加します

ボタン押下時に画像を表示させる

        image1.image = img7

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

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

• シミュレーターで動作を確認します

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

参考：押すたびに異なる写真を表示する

ボタンを押す毎に乱数で異なる写真を表示してみます。

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

#次のステップへ

#関連ページ