오토레이아웃 구현하기(코드)
오토레이아웃이 무엇인지, 왜 필요한지 이해했다면 이번엔 직접 오토레이아웃을 구현해보도록 합시다.
오토레이아웃은 인터페이스 빌더에서 구현할 수도 있고, 코드를 이용해 프로그래밍적으로 구현할 수도 있어요.
이번 시간에는 코드를 이용해 구현하는 방법을 먼저 실습해 보도록 합시다.
학습 목표
1. Layout Anchor를 이용해 오토레이아웃을 구현할 수 있습니다.
2. NSLayoutConstraint와 Visual Format Language를 이용한 다른 방법에 대해서 이해합니다.
핵심 키워드
강의 영상
학습하기
NSLayoutConstraint
코드로 오토레이아웃을 구현하는 다른 방법인 NSLayoutConstraint 인스턴스 생성을 사용하여 제약조건을 지정하는 방법에 대해 알아봅시다.
NSLayoutConstraint 인스턴스 생성 제약조건의 설명입니다.
다음은 오토레이아웃 방정식입니다.
view1.attr1 = view2.attr2 * multiplier + constant
item.attribute = toItem.attribute * multiplier + constant
button과 textField에 기본간격(Standard Space, iOS 11 현재 8포인트)에 제약을 주기 위해 NSLayoutConstraint 인스턴스를 생성하는 코드입니다.
NSLayoutConstraint(item: button,
attribute: .right,
relatedBy: .equal,
toItem: textField,
attribute: .left,
multiplier: 1.0,
constant: 8.0)
NSLayoutConstraint 인스턴스 생성 코드입니다. NSLayoutConstraint(item: button,
attribute: .width,
relatedBy: .greaterThanOrEqual,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 50.0)
NSLayoutConstraint(item: purpleBox,
attribute: .left,
relatedBy: .equal,
toItem: self.view,
attribute: .left,
multiplier: 1.0,
constant: 50.0)
NSLayoutConstraint(item: purpleBox,
attribute: .right,
relatedBy: .equal,
toItem: self.view,
attribute: .right,
multiplier: 1.0,
constant: -50.0)
NSLayoutConstraint(item: topField,
attribute: .bottom,
relatedBy: .equal,
toItem: bottomField,
attribute: .top,
multiplier: 1.0,
constant: -10.0)
NSLayoutConstraint(item: maroonView,
attribute: .right,
relatedBy: .equal,
toItem: blueView,
attribute: .left,
multiplier: 1.0,
constant: 0.0)
NSLayoutConstraint(item: button,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 100.0).priority = UILayoutPriority(rawValue: 20)
NSLayoutConstraint(item: button1,
attribute: .width,
relatedBy: .equal,
toItem: button2,
attribute: .width,
multiplier: 1.0,
constant: 0.0)
NSLayoutConstraint(item: flexibleButton,
attribute: .width,
relatedBy: .greaterThanOrEqual,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 70.0)
NSLayoutConstraint(item: flexibleButton,
attribute: .width,
relatedBy: .lessThanOrEqual,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 100.0)
// button1
NSLayoutConstraint(item: button1,
attribute: .left,
relatedBy: .equal,
toItem: self.view,
attribute: .left,
multiplier: 1.0,
constant: 8.0)
// button2
NSLayoutConstraint(item: button2,
attribute: .left,
relatedBy: .equal,
toItem: button1,
attribute: .right,
multiplier: 1.0,
constant: 8.0)
// textField
NSLayoutConstraint(item: textField,
attribute: .left,
relatedBy: .equal,
toItem: button2,
attribute: .right,
multiplier: 1.0,
constant: 8.0)
NSLayoutConstraint(item: textField,
attribute: .width,
relatedBy: .greaterThanOrEqual,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 20.0)
NSLayoutConstraint(item: textField,
attribute: .right,
relatedBy: .equal,
toItem: self.view,
attribute: .right,
multiplier: 1.0,
constant: -8.0)
이번에는 Visual Format Language를 사용하여 제약조건을 지정하는 방법에 대해 알아보고,
위에서 NSLayoutConstraint를 이용해 만들었던 동일한 제약조건을 Visual Format Language를 이용해 만들어보겠습니다.
우선 들어가기에 앞서 "Visual Format Language"에서 사용 가능한 기호와 문자열에 관해 설명합니다.
H:[button]-8-[textField] 또는 H:[button]-[textField] H:[button(>=50)] H:|-50-[purpleBox]-50-| V:[topField]-10-[bottomField] H:[maroonView][blueView] H:[button(100@20)] H:[button1(==button2)] H:[flexibleButton(>=70,<=100)] H:|-[find]-[findNext]-[findField(>=20)]-|참고 링크
https://developer.apple.com
https://developer.apple.com
comment
코드로 레이아웃을 설정할 때는 visual format language와 NSlayoutConstraint중에서 자신에게 더 익숙하고 편한 걸 사용하면 되는걸까요?
코드 복붙했는데 빨간줄 많이 떠도 당황하지 마시고 아래와 같이 바꿔보세요. (저는 당황했기 때문에 다른 분들은 당황하시지 않길..)
UIButtonType -> UIButton.ButtonType
UIControlState -> UIControl.State
UIControlEvents -> UIControl.Event
NSLayoutAttribute -> NSLayoutConstraint.Attribute
NSLayoutRelation -> NSLayoutConstraint.Relation
UIFontTextStyle -> UIFont.TextStyle
각각의 layoutConstraint를 active시키는 방법도 있지만
NSLayoutConstraint.activate 메소드에 NSLayoutConstraint 배열을 전달하여 한번에 activate시킬 수 있습니다.
Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
디버깅 창에는
2020-04-28 09:08:38.096368+0900 yagom_boostcourse[11281:164820] [plugin] AddInstanceForFactory: No factory registered for id <CFUUID 0x600003b53dc0> F8BB1C28-BAE8-11D6-9C31-00039315CD46
Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file /Users/nam-yun-woo/Documents/IOS/yagom_boostcourse/yagom_boostcourse/ViewController.swift, line 41
2020-04-28 09:08:38.315623+0900 yagom_boostcourse[11281:164820] Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file /Users/nam-yun-woo/Documents/IOS/yagom_boostcourse/yagom_boostcourse/ViewController.swift, line 41
(lldb)
라는 오류가 나왔습니다. 어떤종류의 오류일까요? 빌드는 성공한다고 나오는데 빌드중에 오류가 나옵니다.
코드는 분명 똑같이 작성했는데 ( 혹시나 하고 올려주신 코드로 붙여넣기도 해보았습니다 ! ) 세로 모드는 예쁘게 잘 나오는데 가로 모드는 첨부한 사진과 같이 나옵니다. 재생정지 버튼의 아래와 타임 레이블의 위를 가지고 설정한 addTimeLabel 함수의 top변수의 constant를 줄여도 봤습니다. 극단적으로 1로도 줄여보았는데 세로 모드에서는 재생정지 버튼의 바로 아래에 붙지만 가로 모드에서는 8일 때와 다름없이 첨부한 사진처럼 작동하였습니다. 뭐가 문제일까요?
NSLayoutAttribute.centerY -> NSLayoutConstraint.Attribute.centerY
VFL로 safe layout guide, top/bottom layout guide를 사용할 수 있는 방법이 있나요? 이 것들과 제약사항을 만드려면 VFL과 병행해서 NSLayoutConstraint를 사용해야 할까요?
button.addTarget(self, action: #selector(self.touchUpPlayPauseButton(_:)), for: UIControlEvents.touchUpInside)
button에서 Target을 추가할때 action 부분의 method는 UIButton type을 가지는 arg가 필요한데 _: 를 사용하는 이유가 궁금합니다!
@IBAction func touchUpPlayPauseButton(_ sender: UIButton) {
}
부분에서 touchUpPlayPauseButton() method에 arg를 넣지않고 _:로 하는 이유는 무엇인지 궁금합니다.
NSLayoutConstraint(item: button,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 0.0).priority = UILayoutPriority(rawValue: 20)
button의 너비는 100포인트이고 우선도는 20으로 설정합니다. (Priority)
이 부분에서 너비를 100 포인트 설정하는데 있어서 constant: 0.0 해주는게 맞나요..?ㅜㅜ
constant: 100.0이 되어야 할 것 같은데 잘못 이해하고 있는건가요??
안녕하세요 NSLayoutConstraint 사용 할때 item 기준으로 constant에 부호 붙이는 기준을 알고싶습니다...
NSLayoutConstraint 사용 시, 제가 올바르게 이해했다면...
bottomField의 top을 기준으로 간격을 설정하는 내용이라 아래 상수 값이 음수가 되어야 할 것 같은데요.
확인 한 번 부탁 드리겠습니다.
영상에서 알려주는 코드는 어디서 확인할 수 있습니까?