iOS 개발 무작정 따라하기 - Address Book 4

지난번에 이어 그룹(Group)을 새로 추가하는 부분에 대해 진행하도록 하자.
잘 기억이 나질 않거나, 지난 강의까지 진행하지 않았다면, 아래URL을 참조하여 진행하도록 하자.

2012/12/11 - [dev - just follow] - iOS 개발 무작정 따라하기 - Address Book 1

2012/12/19 - [dev - just follow] - iOS 개발 무작정 따라하기 - Address Book 2

2012/12/21 - [dev - just follow] - iOS개발 무작정 따라하기 - Address Book 3

이런 좋은 플러그인이 있었는지도 모르고 ㅠㅠ

◼ 그룹이 필요한 것은 뭘까?

Push 기능을 이용해서, ViewController 에서 AddGroupViewController 로 미는 부분까지 진행하였다.
오늘은 AddGroupViewController에 대한 정의를 간단히 해보고자 한다. 
일단, 해당 클래스(혹은 뷰컨트롤러)는 어떤 것을 담당하는 것일까?  복잡할 수도 있는 MVC(Model, View, Controller)에 대한 개념은 집어치우더라도, 본 화면에서는 무엇을 해야할까? 라는 것은 정의해야할 것이다.

바로 이 부분에 대한 이야기다.
추후에 아이디어가 더 떠오른다면 더 추가할 수도 있겠지만, 지금 당장으로는
이 페이지는 "새로운 그룹을 추가하는 페이지야!" 라는 것을 강력하게 어필하고 싶다. 자 그럼 짧은 코드 한줄을 넣어보자.

AddGroupViewContoller.m 에서 상단 이미지를 참조하여 self.navigationItem.Title = @"새로운 그룹 추가"; 라는 코드를 추가하였다.  그리고 Run을 시켜보자.(다른 말로는 빌드라고도 한다.)

ViewController 화면상에서 상단네비게이션바의 + 버튼을 클릭하면, 상단이미지와 같은 결과물이 나올 것이다.  이로써, 우리는 사용자에게, "본 페이지는 [새로운 그룹 추가] 하는 기능을 담당하는 페이지에요!"라고 강력하게 표현할 수 있게 되었다.

새로운 그룹을 추가하는 페이지인데, 어떤 기능들이 필요할까? 라고 잠시 고민해보자.
여러분들의 생각과 필자의 생각은 다를 수도 있겠지만, 일단 "그룹의 이름" 이 필요하다는 것은 이견이 없을꺼라 생각된다.  또 무엇이 필요할까? 추후에 검색기능을 사용하기 위해서 일단 태그라는 정보도 집어넣도록 하자.  그리고, 옵션으로 그룹을 설명할 메모도 필요할 것이다. 마지막으로 이 그룹엔 이런 이미지를 넣고 싶어.. 하는 그룹에 꼭 맞는 (혹은 어울리는) 사진을 넣을 수도 있다.

정리하자면, 새로운 그룹을 추가할 때 필요한 [정보]는 아래와 같다.
그룹의 이름 - groupName
그룹의 태그 - groupTag
그룹의 메모 - groupMemo
그룹의 사진 - groupPicture

Group을 추가할때 필요한 항목들을 기억하고 다음으로 넘어가자.

◼ 그룹을 생성할 때 필요한 것들을 정의해볼까?

앞서 4가지의 정보가 필요하다고 정리했고, 이제부터는 해당 정보에 대해 클래스 내에 정의내리는 작업을 진행할 것이다. 백번의 설명보다 한번의 실행이 나으리! (백설이 불여일타...) 라는 강의모토대로 바로 하단 이미지를 참조하길 바란다.

AddGroupViewController.h 파일을 선택한 후, 상단 이미지를 참조한 코드를 작성하자.
IBOutlet이 뭘까요? 라는 고민따위는 재껴두고 일단 따라만 해보자.  나중에는 직관적으로 '아~ 저게 뭐였구나?' 라고 알게 되길 바래본다.  그게아니면 말고... 

그 후 이번엔 .xib 파일 (AddGroupViewController.xib)에 파일을 수정해야한다. 본격적으로 XIB를 수정하기에 앞서, 선행되어야할 과제가 있는데 일단 그 과제들을 수행해보자.
ViewController.xib 을 먼저 선택하자.

선택하였다면 상단 이미지와 같은 결과가 나올 것이다.

그럼 위 이미지의 붉은 태두리를 참조해보자. 
왼쪽 붉은 태두리안의 View를 선택한 후, 우측 붉은 태두리와 동일한 부분을 찾아보자.
첫번째 탭인 Identity이다.  그 아래 Use Autolayout이라는 부분이 Check되어있다면 그 부분을 먼저 해제한다.  필자와 동일한 버젼의 Xcode를 사용하고 있다면, 해당 기능이 체크되어있을 것이다.

일단은 Autolayout이라는 기능을 사용하지 않기 때문에, 체크를 해제하고 진행할 것이다.  해당 프로젝트 내에서 모든 XIB파일들은 바로 이 Autolayout을 해제하고 진행 할 것이기 때문에, 새롭게 XIB를 생성할때 꼭 기능을 꺼두도록 하자.

오토레이아웃 기능을 껐다면, 다음으로 넘어가자. 이번엔 4번째 Tab인 Simulated Metrics를 보면, Top Bar가 None으로 되어있을 것이다.  하지만 우리는 이번 어플리케이션에서 UINavigationController을 사용한다.  그렇기 때문에, Rect를 잡기 수월하기 위해서 미리 시뮬레이트 메트릭스 상에서도 NavigationBar를 존재하도록 셋팅할 것이다.

Top Bar의 None 박스를 연 후에, Navigation Bar를 선택한다.

그럼 상단 이미지와 같은 결과물을 얻을 수 있을 것이다.  

여기까지 잘 진행했다면 다시 한번 실행해보자 (Run, Build와 같은 뜻)

별반 차이가 있진 않을 것이다.  원래 그게 정상이니 너무 깊게 생각하진 말자.  ViewController.xib를 수정했다면, 다음으로 AddGroupViewController.xib파일을 수정할 것이다.

오토레이아웃 기능을 꺼두는 것은 위와 동일하다.

상단 이미지를 참조해서 동일한 결과값이 나타나도록 한다.
Simulated Metrics에서 Size는 Retina 3.5 Full Screen 으로 변경했으며, Top Bar 또한 ViewController.xib와 동일하게 Navigation Bar를 추가했다.  지금까지 진행했다면 다시한번 빌드해보도록 하자.  역시 별 차이점이 발견되지 않는다.  일단 빌드가 되고 시뮬레이터가 실행이 된다면 그게 지극히 정상적이니 걱정하지 말고 다음으로 넘어가도록 하자.

◼ UI Object를 올려보자.

이제 필요한 UI 객체들을 올려보도록 하자.  상단 이미지를 참고해서 Label이라는 녀석을 찾는다.  누구나 쉽게 UI Object를 이용할 수 있게끔 되어있다.  다시한번 애플의 Xcode를 향해 박수!!

클릭앤 드랍으로 이용할 수 있다.  어디로 드랍해야할까?

답은 이미 여러분 마음속에 있을 것이다.  눈에 보이는 .. 내가 넣고 싶은 화면에 떨어트리면 된다.

그리고는 사이즈를 조금 늘려줄 것이다.
상단 이미지를 참조해서 늘려주면 된다.  객체의 사이즈도 클릭앤드레그 방식으로 손쉽게 조절할 수 있다.

UI객체를 올려두었다면, 상단 이미지를 참고해서 해당 객체의 속성값을 변경해보자.
일단 Group Name이라는 타이틀을 붙혔다.

여기까지 했다면, 이제 나머지는 무엇을 해야할 지 알것이다.
모르겠다고? 하단 이미지를 참고하자.

일단은 이렇게 4가지 타이틀을 UILabel을 이용해서 꾸며(?)보았다.  여기까지는 사실 맛보기일뿐이고 진짜 중요한 UI객체들은 이제부터 추가된다.  앞으로 나올 이미지들은 집중력있게 봐야할 것이다.

UITextField라는 객체를 추가할 것이다.  이름을 보고 짐작을 하는 분도 계시겠지만, 그렇지 않은 분들도 있을 것이다.  하지만... 자세한 설명은 생략한다!

View위에 올려둔 후, 상단 이미지를 참고해서 보기좋게 배치한다.  여기서 쉽게 짐작(?)할 수 있겠지만, 지금 배치한 이 UITextField는 Group Name을 담당할 것이다.  Group Tag 또한 동일한 객체인 UITextField를 이용해서 하나 더 배치해보자.

그 다음에는 Group Memo에 관련된 객체를 추가하자.  이번엔 UITextView 를 추가할 것이다.
이것 또한...자세한 설명은 생략한다.  너님들이 읽어 ㅠㅠ 영어임...

보기좋게(?) 사이즈도 줄이고, 위치도 잡아서 배치해보자.
이제 마지막 객체인 UIButton을 올릴 차례다.

UIButton 객체를 찾아서 뷰위에 올린다.

이번엔 사이즈를 좀 기형적(?)으로 보일 만큼 늘릴 것이다.  정확히 가로 168px, 세로 168px의 정사각형 형태의 Button을 만들었다.  이것을 이용해서 무엇을 할 것인지는 추후 밝혀질 것이다.

여기까지 진행했다면, 다시한번 어플을 실행해보자 (Command + R)

자 그럼 결과를 보자.
일단 지금으로써는 아무런 작동은 하지 않는다.  다만 우리는 우리가 조금전에 올린 UI 객체들을 시뮬레이터를 통해서 확인할 수 있는게 전부다. 하지만 다음강좌에서는 AddGroupViewController에서 직접 동작할 수 있게끔 프로그램을 추가하고 수정할 것이다. 

오늘 강좌에서 기본적인 동작하는 부분까지 진행하려 했지만, 분량이 좀 과한 것 같아서 나눠서 진행하려 합니다. 불가피하게 너무 많은 스크롤은 방문객에게 심적 압박감을 줄 수 있으므로 나누려 하니, 이점 양해해주세요!