[IOS/UIKit] UIImageView에 이미지 띄우기

 

textfield에 이미지 이름을 검색했을 때 해당 이미지를 UIImageView를 사용해서 띄우는 기능을 구현해 보자!

 

 

 

 

1. 스토리보드 먼저 만들어주기

 

 

 

main 스토리보드에 Label, textField, UIImageView를 추가해 줬다.

 

불러올 이미지가 내가 스토리보드에서 설정한 UIImageView 규격에 꽉 차도록 나타났으면 해서

content Mode를 Aspect Fill로 맞추어 주었다.

 

이제 ViewController파일에서 핵심 기능인 textField와 UIImageView를 outlet으로 연결시켜 주자.

 

 

 

 

2. 필요한 변수 선언

var dog: UIImage?
    var karina: UIImage?
    var Lany: UIImage?
    var maru: UIImage?
    var oasis: UIImage?
    var yerinbaek: UIImage?
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        textField.delegate = self
        
        dog = UIImage(named:"dog")
        karina = UIImage(named: "karina")
        Lany = UIImage(named: "Lany")
        maru = UIImage(named: "maru")
        oasis = UIImage(named: "oasis")
        yerinbaek = UIImage(named: "yerinbaek")
    }

 

 

이미지는 내가 좋아하는 것들로 저장해봤다 ㅎ..

 

이미지는 Asstes 파일에 Image set으로 추가해줬기 때문에 UIImage 타입의 변수로 각 이미지를 다 선언해 주고,

viewDidLoad부분에서 Assets파일에 저장되어 있던 이름으로 이미지를 할당해 준다.

 

 

 

 

3. textField에 입력된 값을 UIImageView에 띄우기

 

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        if let searchText = textField.text{
            
            if searchText == "dog" {
                imageView.image = dog
            }
            else if searchText == "karina" {
                imageView.image = karina
            }
            else if searchText == "Lany" {
                imageView.image = Lany
            }
            else if searchText == "maru" {
                imageView.image = maru
            }
            else if searchText == "oasis" {
                imageView.image = oasis
            }
            else if searchText == "yerinbaek" {
                imageView.image = yerinbaek
            }
        }
        
        
        textField.resignFirstResponder()
        
        return true
    }

 

텍스트 필드에 입력 한 값을 return 버튼(엔터)을 눌렀을 때 이벤트를 처리하기 위해 textFieldShouldReturn 메서드를 사용했다.

 

searchText라는 변수를 설정해 주고 해당 변수가 이미지 변수로 설정한 이름이 같을 경우

imageView의 image에 해당 이미지를 할당하도록 조건문을 통해 코드를 구현해 줬다.

 

 

 

시뮬레이터 결과

 

 

이렇게 textField에 입력한 이미지가 보이는 것을 확인할 수 있다!!

 

 

 

4. 전체코드

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    var dog: UIImage?
    var karina: UIImage?
    var Lany: UIImage?
    var maru: UIImage?
    var oasis: UIImage?
    var yerinbaek: UIImage?
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        textField.delegate = self
        
        dog = UIImage(named:"dog")
        karina = UIImage(named: "karina")
        Lany = UIImage(named: "Lany")
        maru = UIImage(named: "maru")
        oasis = UIImage(named: "oasis")
        yerinbaek = UIImage(named: "yerinbaek")
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        if let searchText = textField.text{
            
            if searchText == "dog" {
                imageView.image = dog
            }
            else if searchText == "karina" {
                imageView.image = karina
            }
            else if searchText == "Lany" {
                imageView.image = Lany
            }
            else if searchText == "maru" {
                imageView.image = maru
            }
            else if searchText == "oasis" {
                imageView.image = oasis
            }
            else if searchText == "yerinbaek" {
                imageView.image = yerinbaek
            }
        }
        
        
        textField.resignFirstResponder()
        
        return true
    }
    
}

 

처음에 textField.delegate = self 코드를 빼고 작성했더니 textField에 이미지 값을 다 입력해 봐도 이미지가 나타나지 않았다.

 

이건 내가 아직 delegate에 대한 개념이 부족해서 생긴 일이었다.

UITextFieldDelegate를 채택하고서는 textField의 위임자를 정해주지 않아 아무런 실행이 되지 않았던 것이었다..

 

그래서 textField.delegate = self (여기서 self는 Viewcontroller를 뜻한다.)를 추가시켜 주니 제대로 동작되었다!

 

Delegate에 대해서도 추가적인 공부가 필요해 보인다.