이미지 뷰 앱 만들기 2

지난 글에는 이미지 뷰 앱 화면구성을 했으면, 이번에는 아웃렛 변수, 액션함수 추가 및 구현을 해보겠습니다.

이미지 뷰 앱 만들기 1

 

---

아웃렛 변수, 액션함수 추가하기

아웃렛 변수와 액션 함수를 아래와 같이 추가해 줍니다.

추가하는 방법을 모르시는 분들은 아래 글을 보고 오시면 됩니다 😄

아웃렛 변수와 액션 함수 추가하기

 

---

이미지 뷰 앱의 기능 구현하기

기능 구현에 필요한 변수들을 추가해 주겠습니다.

var isZoom = false // 확대 여부를 나타내는 변수
var imgOn : UIImage? // 켜진 전구 이미지가 있는 UIImage 타입 변수
var imgOff : UIImage? // 꺼진 전구 이미지가 있는 UIImage 타입 변수

✅ 추가 

액션 함수를 추가할때 Type을 UIButton으로 해주세요 제가 까먹고 못했었네요...

---

잠깐 알고가는 옵셔널 변수

위 코드를 보면 '?'가 붙은 것을 볼 수 있습니다.

이 물음표를 삭제하면 바로 에러가 발생하게 되는데 물음표의 존재를 잠깐 알아보겠습니다.

이것은 C나 오브젝티브-C에는 존재하지 않고 오직 스위프트에만 있는 '옵셔널(Optionals)'이라는 개념입니다.

옵셔널은 어떤 값이 존재하지 않는다는 것을 나타낼 때 사용합니다.

즉, nil(=null)이거나 값의 존재 여부를 알 수 없다는 것을 의미합니다.

스위프트에서는 변수를 선언할 때 변수에 반드시 nil이 아닌 값을 할당해야 하지만 옵셔널 타입을 사용해서 변수에 값이 없다는 것을 알릴 수 있습니다.

C에서 변수를 선언하고 초기값을 주지않고 null로 선언하는 거랑 같은 의미라고 생각하면 쉬울 것 같네요. "값이 없을 수 있다"라는 의미로?를 붙여주는 것입니다.

옵셔널로 선언된 변수에 값이 할당되면 그 값은 '옵셔널에 래핑(wrappend)되었다'라고 하며, 이 값은 "!"를 사용해 강제 언래핑(force unwrapping)하여 접근할 수 있습니다.

// 예시 1
var index: Int?

index = 3

if index != nil {
	print(index!)
}

// 예시 2
var index: Int!

index = 3

if index != nil {
	print(index)
}

---

이제 추가한 변수들에 이미지를 넣어보도록 하겠습니다.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        imgOn = UIImage(named: "lamp_on.png")
        imgOff = UIImage(named: "lamp_off.png")
        imgSheep = UIImage(named: "Sheep1sik.jpeg")
        
        lamp_OnOff.image = imgOn
        Sheep_View.image = imgSheep
        
    }

 

viewDidLoad 함수 내에 위와 같이 추가해 줬습니다.

📝 viewDidLoad 함수란?

viewDidLoad 함수는 내가 만든 뷰를 불러왔을 때 호출되는 함수로, 부모 클래스인 UIViewController 클래스에 선언되어 있습니다. 뷰가 불려진 후 실행하고자 하는 기능이 필요할 때 이 viewDidLoad 함수 내에 코드를 입력하면 됩니다.

 

이미지 지정이 잘 되었는지 확인을 해보기 위해 앱을 실행하면 아래와 같이 나오는 것을 볼 수 있습니다.

---

버튼 클릭 시 동작 함수

이제 Expansion 버튼을 클릭했을 때 동작하는 함수를 구현해 보겠습니다.

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

 @IBAction func Sizeimage(_ sender: UIButton) {
        let scale:CGFloat = 2.0
        var newWidth:CGFloat, newHeight:CGFloat

    }

변수를 선언하면 경고메세지가 나올텐데 이 경고 메세지는 선언한 상수나 변수를 한번도 사용하지 않아서 발생한 경고메세지 이므로 일단 무시해 주세요. 나중에 해당 상수나 변수를 코드 내에서 사용하면 자동으로 무시됩니다 !!

 

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

아래와 같이 코드를 추가해 주세요.

    @IBAction func Sizeimage(_ sender: UIButton) {
        let scale:CGFloat = 2.0
        var newWidth:CGFloat, newHeight:CGFloat
        
        if (isZoom) {
            
        } else {
            
        }
        isZoom = !isZoom
    }

앞에 만든 if문 안에 확대와 축소를 해줄 코드를 넣어보겠습니다.

    @IBAction func Sizeimage(_ sender: UIButton) {
        let scale:CGFloat = 2.0 //이미지를 확대할 배율값
        var newWidth:CGFloat, newHeight:CGFloat // 확대와 축소를 했을때 가로 세로 길이를 저장할 변수
        
        if (isZoom) {
            newWidth = Sheep_View.frame.width/scale // isZoom 값이 true일때 가로크기에 scale 값을 나누어 할당
            newHeight = Sheep_View.frame.height/scale // isZoom 값이 true일때 세로크기에 scale 값을 나누어 할당
            Expansion.setTitle("Expansion", for: .normal) // 버튼의 텍스트를 "Expansion"로 변경
        } else {
            newWidth = Sheep_View.frame.width*scale // isZoom 값이 false일때 가로크기에 scale 값을 곱해서 할당
            newHeight = Sheep_View.frame.height*scale // isZoom 값이 false일때 세로크기에 scale 값을 곱해서 할당
            Expansion.setTitle("Reduction", for: .normal) // 버튼의 텍스트를 "Reduction"로 변경
        }
        Sheep_View.frame.size = CGSize(width: newWidth, height: newHeight) //CGSize 메서드를 활용하여 이미지 뷰의 프레임 크기 변경
        isZoom = !isZoom
    }

코드가 잘 작동하는지 확인해 봅시다.

실행을 해본 결과 작동은 잘 되네요.

저 같은 경우 2배로 확대했을 경우 사진이 잘려 scale 값을 1.9로 변경해 주었습니다.

자신이 잘리는 경우 배율에 맞게 조절해 주세요

---

스위치 클릭 시 동작 함수

이제 마지막으로 스위치를 클릭할 때 동작하는 함수를 구현해 보겠습니다.

스위치 클릭 시 동작 함수는 간단하게 if문으로 구현이 가능합니다.

    @IBAction func Switchimage(_ sender: UISwitch) {
        if sender.isOn {
            lamp_OnOff.image = imgOn
        } else {
            lamp_OnOff.image = imgOff
        }
    }

---

결과 확인

최종적으로 실행한 결과 영상입니다.

소박한 결과물이지만 알아보기에는 좋았던 것 같네요 😳😳

 다음글은 데이트 피커에 대해 알아보겠습니다