4.6 얼굴앱 - 스토리보드 연결

 

UI로 어떻게 가져올 수 있을까

 

여기에 있는 스토리보드로 돌아가면

 

지금은 비어있지

 

여기에 아무것도 없어

 

지금은 오직 배경이 되는 뷰만 있지

 

이 FaceViewController 안에 변수(var)가 있다고 말했었지

 

그 변수는 이 뷰를 가르키지

 

오른쪽 클릭을 통해서 보여줄거야

 

여기에 있는게 보이지

 

마우스를 여기 위에 올리면

 

어떤 것이 하이라이팅되는지 보이지

 

이건 view라고 불리는 outlet이야

 

계산기앱에서 display라는 이름의 outlet 처럼

 

이건 UIView타입에 view라는 이름을 가진 outlet 또는 var야

 

이것은 여기에 연결되어 있어

 

자동으로 연결해주지

 

ctrl + 드래그 같은 것을 해주지 않아도 돼

 

하지만 우린 view에 코드를 추가로 적지 않을거기때문에

 

그 변수가 필요하진 않아

 

거기에 이런 변수가 있다는 것만 보여줄려고 했던거야

 

바깥으로 드래그해서 내 view를 추가할거야

 

여기 팔렛트 아래로 내려가면

 

분명 Face View를 찾지 못할거야

 

iOS는 Xcode를 빌드할 때 Face View를 알지 못하지

 

하지만 맨 아래로 내려가서 이 중 하나를 가져올 수 있어

 

이건 일반화된 UIView야

 

UIView의 하위클래스가 아닌 그냥 UIView야

 

바깥으로 드래그해서 여기에 놓을 거야

 

이제 멋진 걸 해볼건데 constraint를 조금씩 보여줄게

 

(*constraint: UI 배치상 제약사항 설정)

 

이것을 움직일거고 파란선을 이용할거야

 

맨 위쪽 구석에 놓을거고

 

다른 편 가장자리를 여기 아래 구석까지 내릴거야

 

이 때 파란선을 이용할거야

 

여기 파란선이 나타나는 것 보이지?

 

이 파란선들은 잘 알려진 지점에 도달하게 도와줘

 

여기서는 뷰의 가장자리가 되겠지

 

우린 FaceView가 전체 뷰를 가득 채웠으면 해

 

전체 ViewController의 view말이야

 

하지만 배운 것대로 파란선만으로는 충분하지않아

 

파란선은 시스템에게 내가 의도한 걸 말해준 것 뿐이야

 

제대로 할려면 ctrl키를 누른 채로 드래그를 해서

 

제약사항(constraint)이란 것을 걸어야 해

 

양 옆이나 위 아래 가장자리로 일일이 ctrl + 드래그 할 수 있겠지

 

하지만 더 간다한 방법이 있어

 

방향별 제약조건이 모두 파란선으로 되어있고 그것뿐이라면

 

Update Frames를 했던 아래에 같은 곳으로 가서

 

Reset to Suggested Constraints(제안조건으로 설정)를 해줘

 

이렇게 하면 제안하는 제약사항을 넣기위해 파란선을 사용할거야

 

어떻게 됐는지 보자

 

Inspector에서 바로 여기 있는 Size Inspector 탭으로 가면

 

뷰의 모든 제약사항을 볼 수 있어

 

Size Inspector에서 아래로 내려가보면

 

제약사항들을 볼 수 있어, 보이지?

 

여긴 모든 제약사항을 보여주고

 

여기 trailing(뷰의 오른쪽) 하나가 들어있는데 괜찮아 보이지

 

leading(왼쪽), top(위), bottom(아래)

 

모두 완벽해

 

내가 원하는 제약사항을 딱 맞게 넣어줘

 

왜냐하면 이건 파란선을 따라가기 때문이야

 

이제 우린 네 면이 가장자리에 붙도록 하는

 

제약사항이 설정된 뷰가 생겼어

 

완벽해!

 

왜냐하면 화면을 가로도 두던 세로로 두던

 

나의 bounds가 새로운 모양에 맞춰내기위해

 

지속적으로 사이즈를 바꿀거니까

 

한가지 더 해야할 일은 이 뷰는 그저 일반화된 UIView라는 거야

 

지금 이 상태로 실행하면 텅 비어있을거야

 

이 일반화된 UIView에는 drawRect( )가 없기 때문이지

 

FaceView엔 멋지게 얼굴을 그리는 drawRect( )를 해두었지만

 

하지만 이건 FaceView가 아니야

 

그럼 어떻게 이 뷰를 FaceView가 되도록 설정할 수 있을까?

 

이 ViewController를 FaceViewController로 설정했던 것과

 

완전히 똑같은 방법으로 할 수 있어

 

Identity Inspector로 가서 여기를ViewController 대신에

 

이렇게 view를 클릭하고 일반화된 UIView 대신에

 

여기 보이지?

 

FaceView로 바꿀거야

 

이해되니

 

이제 실행해보자

 

아이폰6 기기를 예시로 돌려보자

 

우리 얼굴의 두개골이 그려져 나타났으면 좋겠네

 

완벽해, 제대로 작동했어

 

너비나 높이보다 작게 전체가 그려진 두개골이 나왔지

 

화면을 가로로 돌리면

 

좌우로 길게 늘어나는군

 

이건 Faceview의 contentMode에 문제가 있있는거야

 

contentMode가 Scale To Fill로 설정되어있어

 

크기를 늘이거나 줄이는 것이지

 

우린 그걸 원하지 않으니까

 

다시 스토리보드로 돌아가서

 

여기에 있는 FaceView를 선택하고

 

Attributes Inspector로 가면

 

가장 먼저 나오는 것이 contentMode야

 

Scale To Fill로 되어 있는 게 보일거야

 

난 다시 그려지도록(Redraw)할거야

 

다시 말해 bounds가 바뀌면 drawRect( )을 다시 부른다는 거야

 

가로화면과 세로화면 모두에서 제대로 된 얼굴이 나오지

 

심지어 너비 값으로 높이를 바꾸기도 하지

 

작아지게 될테니까

 

한가지 좀 걸리는 게 있다면

 

Interface Builder 안에서는 얼굴을 볼 수 없어

 

어떻게 여기에 얼굴을 보이게 할 수 있을까?

 

여기에 나타나게 하는 것도 가능한데 그건 다음주에 할거야

 

스토리보드 상에서 커스텀 뷰를 볼 수 있게 만들면 좋을테니까