[iOS] IBOutlet Collection이란?

중복되는 오브젝트들에 동일한 코드를 적용하는 경우 IBOutlet Collection을 사용할 수 있다.

 

1차 세미나 과제인 구글 로그인 화면 구현인데, 

아래 그림과 같이 TextField가 3개 있고 borderWidth, borderRadius, borderColor가 모두 동일한 상황이다.

 

IBOutlet Collection을 사용하지 않고 각 IBOutlet에 커스텀 UI 코드를 적용시키면 

아래 코드처럼 중복되는 코드가 많아지고 난잡해진다..ㅠ 

(코드 리뷰 받기 전 나의 부끄러운 코드..)

override func viewDidLoad() {
  self.nextBtn.isEnabled = false
   self.nameTextField.delegate = self
   self.idTextField.delegate = self
   self.pwTextField.delegate = self

  self.nameTextField.layer.borderWidth = 1
  self.nameTextField.layer.borderColor = UIColor.lightGray.cgColor
  self.nameTextField.layer.cornerRadius = 10
  self.nameTextField.addLeftPadding()

  self.idTextField.layer.borderWidth = 1
  self.idTextField.layer.borderColor = UIColor.lightGray.cgColor
  self.idTextField.layer.cornerRadius = 10
  self.idTextField.addLeftPadding()

  self.pwTextField.layer.borderWidth = 1
  self.pwTextField.layer.borderColor = UIColor.lightGray.cgColor
  self.pwTextField.layer.cornerRadius = 10
  self.pwTextField.addLeftPadding()
}

 

그런데 이제 IBOutlet Collection을 사용해보자.

IBOutlet 만드는 것처럼 TextField에 마우스 갖다 대고 control 누른 뒤 코드로 끌어다준다.

그리고 Connection 부분을 Outlet Collection으로 변경시켜주면

많이 보던 IBOutlet이 생기는데 데이터 타입이 UITextField Array로 되어있다.

IBOutlet Collection은 말 그대로 여러개의 동일한 오브젝트들의 IBOutlet 배열이라고 생각해도 좋을 것 같다.

 

그리고 나머지 TextField들에 대해서도 똑같이 textFieldCollection을 연결해준다.

IBOutlet은 하나의 오브젝트만 연결할 수 있지만 IBOutletCollection은 하나의 IBOutlet에 여러 개의 오브젝트 연결이 가능하다.

세 개 오브젝트들이 모두 연결된 것 확인 가능

 

 

그러면 이제 textFieldCollection은 배열로 취급되기 때문에 반복문에 사용 가능해진다 😳

반복되던 UI코드를 IBOutlet Collection을 이용해 리팩토링한 코드는 아래와 같다.

func setTextFieldUI() {
  for i in textFieldCollection {
    i.delegate = self
    i.layer.borderWidth = 1
    i.layer.borderColor = UIColor.lightGray.cgColor
    i.layer.cornerRadius = 10
    i.addLeftPadding()
  }
}