[스위프트] 이미지 뷰를 화면에 출력하고 크기 변경하기2(예제)

2020 Xcode, 스위프트, 이미지 뷰를 화면에 출력하고 크기 변경하는 방법, 기능 구현

Xcode에서 이미지 뷰를 확대하는 기능을 구현해보겠습니다. 

※ 선행되어야 하는 화면 구성이 있으니 여기를 참고해주세요. ※ 

구성 방법과 소스 코드가 있습니다.  

 

STEP 1 소스 편집을 위해 보조 편집기를 열어줍니다.

- 화면 오른쪽 윗부분의 [Adjust Editor Options] - [Assistant]를 선택합니다.  

STEP 2 이미지 뷰에 아웃렛 변수 추가하기

- 드래그할 때 나타나는 연결선을 뷰 컨트롤러의 클래스 선언문 바로 아래에 놓으세요. 

- 아웃렛 변수는 일반적으로 클래스(class) 선언부 바로 아래에 추가합니다. 

 

STEP 3 이미지 뷰 아웃렛 변수 설정하기

나타나는 연결 설정 창에서 다음과 같이 지정하고 Connect 버튼을 누르면 이미지 뷰와 아웃렛 변수가 연결됩니다. 

 

 

 

STEP 4 버튼에 아웃렛 변수 추가하기

[확대] 버튼 역시 오른쪽 마우스로 클릭하고 드래그해주세요. 

STEP 5 버튼에 액션 추가하기

- 타입을 AnyObject이 아니라 UIButton으로 선택해주세요.

- 어떤 타입의 객체에서 액션이 발생했을 때, 이 액션 함수를 실행할 것인지를 설정하는 것입니다. 

여기까지 잘 따라오셨나요? 

이렇게 이미지 뷰 객체에 아울렛 변수를 추가하고 버튼 객체에 액션 함수를 추가하였습니다. 

//
//  ViewController.swift
//  imageViewSample
//
//  Created by hahehohoo on 2020/04/22.
//  Copyright © 2020 hahehohoo. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var imgView: UIImageView!
    @IBOutlet var btnResize: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


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

이제 버튼을 클릭했을 때 어떤 동작이 나올 수 있도록 코딩을 해보겠습니다. 

 

---

 

STEP 6 버튼에 액션 추가하기

코딩에 필요한 변수들을 뷰 컨트롤러의 클래스 선언문 바로 아래에 추가합니다. 

 

 

 

STEP 7 이미지 지정 후 보여 주기

- viewDidLoad 함수 안에 다음 코드를 입력해주세요.

- viewDidLoad 함수는 내가 만든 뷰를 불러왔을 때 호출되는 함수입니다. 즉 뷰가 불려진 후 실행하고자 하는 기능을 이 함수 안에 넣으면 됩니다. 

코드 설명

1 : UIImage 타입의 변수 imgLight에 파일명을 지정합니다. 이때 이미지 파일명은 프로젝트에 추가한 이미지의 파일명을 입력하면 됩니다. 2 : 이미지 뷰의 아울렛 변수 'imgView' 에 방금 선언한 'imgLight' 이미지를 지정합니다.  

 

 

STEP 8 버튼 클릭 시 동작하는 함수 코딩_상수, 변수 선언

- [확대] 버튼을 클릭했을 때 동작하는  btnResizeImage 함수를 코딩해 보겠습니다.

- 함수 내에서 사용할 상수와 변수를 선언합니다.

- CGFloat은 Xcode에서 Float을 재정의해 놓은 자료형이로 Float과 같다고 생각하시면 됩니다. 

- 경고 메세지가 나타나도 일단 무시하세요. 선언한 상수나 변수를 한번도 사용하지 않아서 발생한 것인데 나중에 사용하면 사라집니다. 

 

코드 설명

1 : 버튼을 클릭했을 때 이미지를 두 배로 확대할 것이므로 확대할 스케일 값을 보관한 scale 상수를 CGFloat타입으로 선언하고 값을 '2.0'으로 설정합니다. 

2 : 확대할 크기를 계산해서 보관할 변수 newWidth와 newHeight를 CGFloat타입으로 선언합니다. 

 

STEP 9 버튼 클릭 시 동작하는 함수 코딩_if문 구현

- isZoom의 상태에 따라 이미지 프레임 크기를 확대 또는 축소하고 버튼의 텍스트를 변경하는 코드를 작성하겠습니다. 

코드 설명

1 : 현재 상태가 '확대'일 때 (즉, isZoom 변수 값이 true일 때)

2 :  이미지 프레임의 가로, 세로 크기에 scale 값을 나누어 newWidth와 newHeight에 할당합니다.

3 :  버튼의 텍스트를 '확대'로 변경합니다. 

4 :  CGSize 메서드를 사용하여 이미지 뷰의 프레임 크기를 변경합니다. 

 

아래에 전체 코드 넣었습니다. 

//

//  ViewController.swift

//  imageViewSample

//

//  Created by hahehohoo on 2020/04/22.

//  Copyright © 2020 hahehohoo. All rights reserved.

//

 

import UIKit

 

class ViewController: UIViewController {

    var isZoom = false //확대 여부를 나타내는 변수

    var imgLight: UIImage? // 켜진 전구 이미지가 있는 UIImage 타입의 변수

    

    @IBOutlet var imgView: UIImageView!

    @IBOutlet var btnResize: UIButton!

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        imgLight = UIImage(named: "lamp_on.png")

        

        imgView.image = imgLight

    }

 

 

    @IBAction func btnResizeImage(_ sender: UIButton) {

        let scale:CGFloat = 2.0

        var newWidth:CGFloat, newHeight:CGFloat

    

        if(isZoom){ //true

            newWidth = imgView.frame.width/scale

            newHeight = imgView.frame.height/scale

            btnResize.setTitle("확대", for: .normal)

        }

        else { // false

            newWidth = imgView.frame.width*scale

            newHeight = imgView.frame.height*scale

            btnResize.setTitle("축소", for: .normal)

        }

        imgView.frame.size = CGSize(width: newWidth, height: newHeight)

        isZoom = !isZoom

    }

}

 

STEP 10 시뮬레이터 실행

 

 

완성

 

드디어 완성하셨습니다! 수고하셨습니다. 🐣🐣

 

 

 

--------------------------

iOS프로그래밍 학습을 위해

더 많은 예제 보러가기 

--------------------------