[iOS/부스트 코스] iOS 앱 프로그래밍: Music Player(4) - 오토 레이아웃 적용 / 코드로 View 생성
안녕하세요. 개발하는 정주입니다.
오늘은 오토 레이아웃 적용과 코드로 View 생성에 대해 포스팅하려고 합니다.
참고로 iOS에서는 인터페이스 빌더로 화면을 구성하는 방법과 코드로 화면을 구성하는 방법이 다릅니다.
스토리보드를 이용하면 눈에 보이기 때문에 화면 구성이 편리하다는 장점이 있지만 협업에서 머지 과정 중에 충돌이 자주 발생한다는 단점이 있습니다.
코드를 이용하면 직관성은 떨어져도 협업에서는 오히려 더 편하다고 합니다.
결론은 둘 다 사용해야 한다는 점! 화이팅입니다.
오토 레이아웃 적용 (인터페이스 빌더)
인터페이스 빌더로 오토 레이아웃 적용을 먼저 해보겠습니다.
하는 방법만 간단히 소개를 하고 넘어가겠습니다.
스토리보드에서 제약(Constraints)을 추가하고 싶은 View를 클릭하고 해당 버튼을 누르면 제약을 추가할 수 있습니다.
너비와 높이, 상하좌우 여백에 대한 제약을 추가할 때 사용합니다.
두 번째 버튼을 이용하면 정렬 제약을 추가할 수 있습니다. 화면의 가로 중앙 정렬, 세로 중앙 정렬은 물론이고 특정 뷰를 기준으로 시작점 맞추기, 중앙 정렬 등도 가능합니다.
제약이 잘못된 경우 스토리보드에서 빨갛게 표시를 해주기 때문에 어떤 제약이 부족한지 쉽게 파악이 가능합니다.
코드로 View 추가 & 오토 레이아웃 적용
인터페이스 빌더가 아닌 코드로 View를 추가하고 오토 레이아웃을 적용하는 방법에 대해 알아보겠습니다.
코드로 View를 만들 것이기 때문에 위에서 만든 View들은 모두 삭제해야 합니다.
포스팅에서는 Play/Pause 버튼만 작성하겠습니다.
let button: UIButton = UIButton(type: UIButton.ButtonType.custom)
button.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(button)UIButton을 생성하고 root view에 버튼을 추가합니다. ButtonType은 이미지를 넣어야 하므로 custom으로 생성합니다.
translateAutoresizingMaskIntoConstraints 속성은 false로 설정합니다. 해당 속성에 대한 자세한 포스팅은 따로 다루겠습니다.
일단은 자동으로 resizing 해주는 속성이고 코드로 View를 구현할 땐 기본으로 true로 되어 개발자가 추가한 제약과 충돌이 일어나 false로 설정해야 한다고만 알고 계시면 될 것 같습니다. 인터페이스 빌더에서는 기본값이 false이기 때문에 따로 건들지 않아도 됩니다.
button.setImage(UIImage(named: "button_play"), for: UIControl.State.normal)
button.setImage(UIImage(named: "button_pause"), for: UIControl.State.selected)버튼에 이미지를 설정합니다. UIControl.State를 이용해 버튼의 상태에 따라 다른 이미지를 설정할 수 있습니다.
button.addTarget(self, action: #selector(self.touchUpPlayPauseButton(_:)), for: UIControl.Event.touchUpInside)버튼에 이벤트를 추가하고 싶을 땐 addTarget()을 사용합니다. 이벤트로는 지난 시간 구현한 touchUpPlayPauseButton()을 등록합니다. 이때 주의할 점은 #selector로 메서드를 등록할 땐 Objective-C와의 연동성을 위해 method 앞에 @objc를 붙여줘야 합니다. 단, 스토리보드와 코드를 연결하는 IBOOO을 사용할 땐 이미 연동이 가능한 상태이므로 따로 @objc를 붙이지 않아도 됩니다.
let centerX: NSLayoutConstraint
centerX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
let centerY: NSLayoutConstraint
centerY = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 0.8, constant: 0)
let width: NSLayoutConstraint
width = button.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.3)
let ratio: NSLayoutConstraint
ratio = button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1)
centerX.isActive = true
centerY.isActive = true
width.isActive = true
ratio.isActive = true오토 레이아웃 적용 부분입니다. 오토 레이아웃과 앵커에 관해서는 제가 더 익숙해졌을 때 자세히 포스팅을 하도록 하겠습니다.
isActive는 직접 추가한 제약을 활성화하는 역할입니다.
참고 자료
translatesAutoresizingMaskIntoConstraints https://milyo-codingstories.tistory.com/55
IBAction과 objc https://stackoverflow.com/questions/49210002/any-differences-between-objc-and-ibaction-when-programmatically-creating-uibutt
addTarget 애플 공식 문서 https://developer.apple.com/documentation/uikit/uicontrol/1618259-addtarget
마무리 잡담
오늘은 iOS에서 아주 중요한 개념인 auto layout과 코드로 View를 만드는 방법에 대해 포스팅하였는데요.
중요한 내용인 만큼 추후 확실히 이해하여 포스팅을 다시 하도록 하겠습니다.
감사합니다!
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.
