아이유 어플리케이션을 만들었습니다

스탠포드 아이폰 어플리케이션 강의 1강에서 보여주었던 라벨과 슬라이더를 이용한 예제도 해보았고

이제 과제 assignment1A를 함께 해보기로 합시다.


1강에 대한 강의자료나 과제는 아래의 링크에서 Lecture #1에서 다운받으실 수 있습니다.

http://www.stanford.edu/class/cs193p/cgi-bin/drupal/downloads-2010-winter


assignment1A PDF파일을 열어보면 과제를 혼자서 충분히 진행할수 있도록 설명이 잘 되어있습니다.

굳이 영문 해석하기가 귀찮으신 분들은 제 포스팅을 보면서 따라하셔도 좋습니다.

우리는 이런 어플을 만들것입니다.

코딩이 전혀 필요 없고, 어플리케이션 화면에 라벨과, 이미지뷰를 넣어보는것 입니다.

일종의 개발도구와 친해지기 위한 과제인 셈입니다.




자 그럼 한번 시작해봅시다.

File -> New Project로 새프로젝트를 생성합니다.

Window-based Application을 선택하고

적당한 프로젝트명을 적어서 새 프로젝트를 생성합니다.

생성된 프로젝트에서 Resource 폴더를 열고 MainWindow.xib를 더블클릭하여 인터페이스 빌더를 실행합니다.

인터페이스 빌더에 새하얀 어플리케이션 창이 뜨는군요.

자 이제 여기에 우리가 사용할 컴포넌트를 드래그앤드롭해서 넣어봅시다.

Tools -> Library 를 선택하여

Label과 Image View를 드래그앤드롭합니다.

Label의 속성을 한번 자세히 알아볼까요

화면의 드래그앤드롭한 Label을 선택한 다음에 Tools -> Attributes Inspector를 선택하면

Label에 대한 다양한 속성을 볼 수 있습니다.

폰트, 폰트 크기, 정렬방식, 색상 등 다양한 조절이 가능합니다.

적당한 크기로 Label을 조정해보세요.


자 이제 Image를 넣을 차례입니다.

일단 여기에 넣을 적당한 이미지를 찾아야 합니다.

저는 예쁜 아이유양이 나온 사진을 하나 저장해두었습니다.

자 이제 이 사진을 프로젝트 자원에 추가를 해야 합니다.

Project -> Add to Project를 선택합니다.

그리고 내가 저장한 이미지 파일을 선택하면 아래와 같은 창이 나타납니다.

여기서 Copy items into destination group's folder에 체크를 꼭 하세요.

체크를 해야 내 로컬컴퓨터에 저장된 이미지가 어플리케이션 파일안으로 포함됩니다.

여기서 체크를 하지 않으면 내 컴퓨터에서는 사진이 나타나지만 배포하게 될 경우 사진이 보이지 않게 됩니다.

사진이 프로젝트폴더에 포함이 되면 Resource 폴더에 내가 추가한 사진 파일이 목록에 나타나게 됩니다.


자 이제 이미지뷰 컴포넌트를 클릭하고 Tools -> Attributes Inspector 를 선택하면

Image View에 대한 속성을 볼 수 있습니다.

가장 상위의 image 속성에 버튼을 클릭하면 Resource 폴더의 내가 추가한 파일의 목록이 나타납니다.

내가 업로드한 사진의 파일명을 클릭하면 Image View에 해당 사진이 나타납니다.

그리고 Mode에서 image view에 나타나는 사진 보여주기 방식을 정할수 있습니다.

창크기를 사진에 맞출지, 사진을 딱 맞게 조절할지 이런 설정들이지요.

그리고 알파값도 설정이 가능합니다.


자 이제 어플리케이션이 완성되었습니다.

Assignment1 과제를 모두 끝마쳤습니다.

코딩하나 없이 간단한 화면구성을 마쳤네요.

이제 xcode와 인터페이스빌더와 좀 친해지셨나요?


다음에는 Assignment1B를 함께 해보아요~