【 iPhone 】Swiftでアプリ開発 | UIImageViewApp

今回は、ボタンをタッチすると画面の背景画像が変わる、かんたんアプリのつくりかたです。

開発環境
iOS 12
Xcode 10
Swift 4.2

動画で確認できます

プロジェクトをつくる

XcodeでSingle View Appで新しいプロジェクトをつくります。


UIImageViewAppとでもしておいてください。


Main.storyboardを表示して、library PanelからImage ViewをView Controllerにドラッグして追加します。


Image Viewは場面いっぱいに広げてください。




使用する画像を、Assets.xcassetsフォルダに追加します。






Image Viewを選択したままAttributes InspectorのImageで画像を選びます。




Content ModeをAspect Fillにします。


Scale To Fit
・Image View のサイズと画像のサイズが同じになります。
・画像のサイズがImage Viewより小さいと横に伸びてしまいます。


Aspect Fit
・アスペクト比を維持したまま、画像のすべてが表示されるようにリサイズされます。
・画像のサイズがImage Viewより小さいと、その部分にすき間ができます。


AspectFill
・アスペクト比を維持したまま Image View に空きがないように、いっぱい表示されます。

基本的に、この３つが理解できてれば初めのうちは大丈夫だと思います、他のオプションについては下のリンクのUIImageView.ContentModeのドキュメントを見てください。





Buttonを追加してフォントとサイズを変更します。




Buttonの位置をAdd New Alignment ConstraintsでHorizontally in Constraintsとvertically in Constrainsを選んで画面の中央に持ってきます。




次に、ドラッグして画面の下の方に移動して、その後にResolve Layout IssuesをクリックしてUpdate Constraint Constantsを選びます。








Buttonとストーリーボードをつなげます。

Swiftコードを書きます

ViewController.swift

import UIKit

class ViewController: UIViewController {

    //UIImageViewとstoryboardをつなぐ背景画像をいれる変数
    @IBOutlet var BackgroundImage: UIImageView!

    //画像を入れる変数をつくる
    var image1: UIImage!
    var image2: UIImage!

    //画像を切り替えるため判定用の変数をつくり、初期値をfalseにする
    var flg = false
    
    //最初に呼び出される関数
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //変数にそれぞれ画像をいれる
        image1 = UIImage(named: "woman1")
        image2 = UIImage(named: "woman2")
       
    }

    @IBAction func touchButton(_ sender: Any) {
        
        //flgがtrueのときの処理
        if flg {

            //背景画像をimage1(つまりwoman1)にする
            BackgroundImage.image = image1

            //判定用の変数にfalseをいれる
            flg = false

        //flgがtrueでないときの処理
        }else{

            //背景画像をimage2(つまりwoman2)にする
            BackgroundImage.image = image2

            //判定用の変数にfalseを入れる
            flg = true
        }
        
    }
    
}

かんたんな、if { trueの時の処理 }~ else { falseの時の処理 }分で判定式をつくってます。


flg = true　→　woman1、flg = false　→　woman2なので判定用の変数flgには、次の画像のための真偽値を入れる。

---

UIImageView - UIKit | Apple Developer Documentation
contentMode - UIView | Apple Developer Documentation
UIImageView.ContentMode - UIView | Apple Developer Documentation

---