Scroll Views : 스위프트 Swipt 해석가이드

오늘 다뤄볼 해석가이드는 바로 'Scroll Views' 입니다 ! 

먼저 Preview !

많이 볼 수 있는 화면이죠?

한 번 함께 만들어 볼게요.  원교재는 488p ~ 500p 입니다

Create a new Xcode project를 눌러 'ScrollingForm'이라는 제목을 넣어주세요.

(저는 포스팅용으로 이름에 Posting을 넣었어요)

Main.storyboard를 열어서 왼쪽 밑 Object library에서 Scroll View를 찾아 View Controller에 드래그 해주세요

하단 우측에 보면 두번째를 보면 Add New Constrains가 있는데 이건 크기를 조절하는거구 

크기가 다른 디바이스에서도 같은 비율의 위치에 있게 할 수 있는 기능을 합니다.

그림처럼 상하좌우 모두 0으로 설정하고 'Add 4 Constrains' 클릭 ! 하고 그대로 두고 넘어가 주세요.

다시 Object Library -> vertical Stack View -> scroll View 안에 드래그 해주시구 Add New Constraints 에 상하좌우 0 하구 Add 4 Constrains 클릭!

자 , 이렇게 빨간줄이 떳죠? 당황하지 마시구 vertical stack view를 펴주세요 !

다시 Object Library -> View -> Vertical Stack View 안에 드래그!

view가 작게 생겼으니 이제 Label 과 text field를 넣을게요

사진처럼 파란색 점선의 가이드라인이 생기는데 그대로 걱정마시구 넣어주시고 ~

View의 크기도 가이드라인을 따라서 줄여주시고 ~

마지막으로 아래처럼 Label과 TextField를 View의 크기에 맞게 손으로 늘려주세요ㅎㅎ

자, 이제 Label과 TextField의 크기도 디바이스에 관계없이 일정한 비율의 크기로 설정해 주어야 합니다.

Label을 눌러 Add New Constrains에서 상하좌우 8

텍스트 필드는 상하좌우 값을 아래처럼 다르게 해주세요

좌,우 = 8 아래 = 20 (3개만 설정)

자, Label과 TextField 크기 설정에 빨간선 신경안쓰셔도 되고, 위에 사진이 햇깔릴 수 있어요

이 사진을 보면 왼쪽 목록에 View가 파란 박스로 되어있죠?

저거를 누르고 Control키를 누르고 오른쪽 미리보기 화면에 드래그를 하면 하늘색 선이 나오는데 

책에서는 ! 제일 바깥의 View에 드래그를 놓고 Equal Widths를 누르라고 되있는데 그러지 마시구

Scroll View에 다가 가져다 놓아주세요. 그럼 저렇게 검정색 Popover창이 뜨는데 Equal Widths 버튼을 누르면 이제 펴집니다.

이제 거의 다 왔어요!

Label과 TextField가 들어있는 View, 위에 사진에 좌측 파란색 블록이 되어있는 View를 복사! (Command + C) 붙이기! (Command + V) 를 7번 해서 8개로 만들어 주세요

이렇게 Equal Widths까지 정확하게 따라오시면 자동으로 밑으로 추가가 됩니다 !

그러면 8개의 Label 이름을 각각 지정해주세요

(Ex. First Name, Last Name, Address Line 1, Address Line 2, City, State, Zip Code, Phone Number)

TextField의 이름도 Label과 똑같이 설정 !

그럼 이제 앱을 실행해 보세요 

그럴듯한 앱이 만들어 졌나요?

하지만 문제가 있어요. TextField에 글자를 쳐도 박스 안에 글자가 있는 다음에 타이핑되는 문제랑,

키보드 보다 아래에 있어 가려져 있는 항목에는 타이핑이 불가능 하다는 점 ㅠ ...

*자, 여기부터가 이제 중요해요 !*

따라오세용

우선 택스트 필드 설정을 바꾸겠습니다. 책에는 없어서 엄청 해맸어요 ㅠ...

Text Field의 설정창에 들어간 화면인데, 우측 중간에 ClearButton 항목을 보면 "Clear when editing begins' 체크박스가 체크 해제 되있는 걸 체크 !

그럼 이제 타이핑 안되는 문제가 해결되었습니다

두번째 , 키보드 문제

왼쪽의 ViewController.swift창에 들어가세요! (들어간 화면이고 이름바꾸는 창이 되있는 캡쳐는 실수 ㅎㅎ)

이제 이 곳에 본 책 페이지 497p, 498p의 코드를 입력할건데요. 여기서 정말 힘들었습니다. 책에 설명되어 있지 않은 부분 때문에 힘들었어요 ㅠㅠ 

이 코드를 그대로 넣어주시면 키보드 문제가 해결이 되는데요. 문제는 아래 쪽 코드에 scrollView에 문제가 있다는 빨간색 경고창이 뜹니다.

(책에 notification을 notificiation으로 타이핑 되있는건 오타이니 책 오류에요 ㅎ)

네, 이것땜에 엄청 고생했어요. 책에는 안나와있어서 안되는 영어 실력으로 해석하고 또 해도 나오지 않았...

차분한 마음으로 보면 생각보다 간단하게 문제가 풀립니다.

바로

이겁니다 ㅎㅎ

눈치 채셨나요?

가이드 가볼게요 ! ㅎㅎ

Main.Storyboard상태에서 xcode 오른쪽 위를 보면 동그라미 두개가 겹처있는 버튼을 누르시면 위 사진처럼 인터페이스가 바뀝니다

저기서 좌측에 보시면 'Scroll View'에 파란색 박스가 되어있죠?

저 Scroll View를 Control키를 누른채 드래그하면 하늘색 선이 따라오죠 ! 그거를 

  이 부분에 드래그 해서 놓으면

이 화면이 나오는데 저기에 Name의 이름을 scrollView라고 치시고 Connect를 누르는 순간 경고창이 사라지는 마술을 경험하실 수 있습니다 !!

(override fund viewDidLoad() {

super.viewDidLoad()

여기에 registerForKeyboardNotifications()를 써넣어 주세요.

}

이제 앱을 실행을 하시면 우리의 Scrolling Form 앱이 완성됩니다.

유용한 기능이고 앱에 적용이 가능하겠죠?

첫번째 해석 가이드 포스팅을 마치겠습니다

첫번째를 하면서 드는 생각은 시작하길 잘했다는 생각이 드네요.

저도 해석을 하면서 진행하면 미숙한 영어실력에 힘든데 

혹여나 영어이기 때문에 이렇게 유용하고 재밌는 개발프로그램을 포기하시는 분들이 없길 바라며 ...!

~애플앤마블이었습니다. 마치겠습니다~

#스위프트 #Swipt #apple #애플 #imac #macbook #iphone #ipad #swipt3

#코딩 #코드 #프로그래밍 #애플앤마블

Apple Education. ‘App Development with Swift.’ Apple Inc. - Education, 2017. iBooks. https://itun.es/kr/SoKQib.l]