오늘의 주제
- 이미지를 앱에 띄워보기
여덟 번째 시간입니다.
지난번에는 iOS의 화면구조 및 컨트롤러에 대하여 조금 알아보았습니다!
오늘은 간단하게 화면에 그림 몇 점 띄워봅시다...ㅎㅎ
자 이제 본론으로 고고 ^^
MyFirstImageView
화면에 넣오보고 싶은 그림이나 배경을 넣어보도록 합시다~
일단 뭘 시작하려면 프로젝트를 하나 생성해야 겠지요?
Xcode를 실행하고 Create a New Xcode Project를 선택합니다.
하나의 뷰컨트롤러와 뷰가 기본적으로 생성되어지는 Single View Application 템플릿을 선택 한 후 엔터 또는 Next
Project Name에는 MyFirstImageView라고 작성 해 줍니다.
프로젝트명의 첫 글자는 대문자로 생성해 주는것이 관례이자 규칙입니다.
프로젝트를 저장할 경로를 지정해 준 후 Create !!
처음 프로젝트 생성되었을 때의 화면입니다. 이 프로젝트(애플리케이션)의 기본 설정을 할 수 있는 화면인데요, 지금 빨간색 사각형으로 표시된 부분은 화면을 세로, 거꾸로, 왼쪽가로, 오른쪽 가로중에 사용할 화면 모드들을 선택해 주는 곳입니다. 우리는 그냥 세로 하나만 선택해 줍시다. 기본적으로는 세로, 왼쪽가로, 오른쪽가로가 선택되어져 있습니다.
자 그럼 이제 그림을 추가해 줄 차례인데요~
일단 프로젝트가 커지면 커질수록 프로젝트 내의 파일관리가 큰 골치거리중에 하나입니다.
처음부터 습관을 잘 들여놓아야 나중에 고생하지 않으실거예요~
일단 좌측에 보이는 네비게이션 영역에서 파일들을 볼 수 있도록 보게 합니다.
단축키는 커맨드 + 1.
그리고 MyFirstImageView라는 폴더에서 마우스 오른쪽클릭 또는 컨트롤+클릭을 해줍니다.
그럼 메뉴가 나오면 New Group을 클릭!
새로운 그룹(폴더모양)이 생길거예요.
그룹이 생성되면 New Group라고 생성이 될텐데요, 이름을 Image라고 변경해 줍시다.
자, 이미지를 데려올 준비는 이정도로 끝내고...
이미지를 데려와야겠지요?
이미지는 투명배경이 가능한 png형식으로 준비해 주세요~
iOS의 권장 이미지 형식은 png입니다!
물론 jpg도는 jpeg도 가능하지만, png로 준비해 주세요^^
저는 세 이미지를 준비했습니다.
Finder에서 이미지가 있는 곳으로 찾아가서 프로젝트의 Image그룹으로 쭈욱 끌어당겨 주세요! 드래그 앤 드롭!
자 그러면 이런 창이 뜰거예요~
Copy items into destination's group's folder 에 체크해 줍니다!
체크를 해 주지 않으면 실질적으로는 파일이 프로젝트에 추가되지 않습니다.
잘 이해가 안가신다고요? 그냥 그런거예요... 체크해주세요 ㅋㅋ
자~ 그럼 이렇게 그룹 밑으로 파일이 들어와 있습니다!!
자 이제 화면위에 이미지를 넣어봅시다.
좌측 네비게이션 영역에서 ViewController.xib 파일을 선택해 주세요. 그럼 아래와 같은 화면이 나올거예요~
참고로 xib파일은 인터페이스 빌더 파일이라고해서 화면에 보여줄 것들을 미리 보면서 작업을 할 수 있는 유용한 도구입니다. 물론 xib를 이용하지 않고 오직 코드로만 작성할 수도 있습니다. 나중에 인터페이스빌더(Interface Builder, IB)가 귀찮다 하시면 코드로만 작업하셔도 무방합니다.
설명이 또 길었네요. ViewController.xib파일을 선택하고 Object란의 View를 클릭해 주시면 우측 하단에 Object Library창이 나타납니다.
이쯤되면 이녀석들 익숙해 지셨어야 해요~
그중에서 Image View를 찾아서 화면으로 쭈욱 끌어옵니다. 아니면 더블클릭을 하셔도 돼요 🙂 편하신대로~
그러면 화면에 ImageView라는 녀석이 꽉 들어찹니다!
그런데 우리는 굳이 화면을 꽉 채워줄 필요가 없죠?
간단하게 ImageView의 화면 모서리를 잡고 크기를 조절해 봅시다.
원하는 크기로 변경을 하였으면 오른쪽 위에서 속성보기 버튼을 눌러주세요~
그곳에 보면 Image 라는 녀석이 있죠~?
자신이 끌어온 이미지들이 자동으로 쭈욱 나와줄 거예요~
하나 클릭!
이미지가 화면에 짜잔 하고 나오실 거예요~
그럼 자신이 넣어주고 싶은 만큼 이미지뷰를 끌어와서 넣어봅시다.
저는 아래 그림처럼 넣었는데, 혹시나 더 넣고 싶으면 이미지뷰를 더 끌어와서 동일한 이미지를 여러개 넣어줄 수도 있습니다^^ 한 번 해보세요
자, 그런데 크기조절을 모서리로 하는거 보다 정확하게 하고 싶으시다구요?
이미지를 클릭해 주시고, 오른쪽 위에 위치정보 버튼을 클릭해 봅시다.
X, Y 좌표와 가로 세로 길이가 표시되네요.
원하는 만큼 숫자를 조절해 봅시다.
참고로 아이폰, 아이팟 화면의 크기 기준은 가로 320, 세로 480 입니다.
좌표 기준은 왼쪽 맨 위가 0, 0 이예요
자 위치도 잡았겠다...
조금 효과를 줘 보고 싶은데.. 어떻게 해야할까요?
객체에 효과를 주면 어떤 창을 다시 열어보아야 할까요?
그렇죠~ 속성 한번 다시 가 봅시다!
저는 알파값을 한 번 조절해 보았습니다.
속성탭에 들어가서 Alpha라는 녀석이 보이네요.
1이 기본값입니다.
알파는 0~1 값을 가지고 0이면 아예 보이지 않아요~
저는 알파값을 0.5로 해 보았어요
그림이 반투명이 되네요^^
그림도 넣었겠다, 한 번 확인해 보고 싶으실거예요~
화면 왼쪽위에 Run버튼 클릭 또는 커맨드+R !!
짜잔~ 앱 화면에 이미지가 뜹니다..ㅎㅎ
이미지만 있으니 좀 심심하네요~
라벨도 한 번 박아넣어 봅시다.
Object Library에서 Label을 찾아서 끌어옵니다.
넣고싶은 말들을 넣어주면 끝!
라벨도 속성 조절을 할 수 있으니 자유롭게 한 번 해보세요~
컴터 안망가집니다잉~ㅋㅋ
짜잔!
이렇게 간단하게 하나 완성해보았네요~
정말 30초만에 하나 뚝딱 만듭니다~
이걸로 뭘 할수 있느냐구요?
ㅎㅎ
이건 그냥 개념익히기 + 손풀기 정도죠~
이거로 할 수 있는건 아무것도 없습니다.
하지만, 걸음마도 하기 전에 멀리뛰기 할 순 없잖아요~^^
기초가 없으면 전부가 없는거예요~
차근차근 재미있게 놀며 공부해 봅시다!
다음 번에는 뭘 해볼까요?ㅎㅎ
댓글 달아주시면 원하시는 기능 하나 둘씩 해볼게요~
댓글 없으면 말구요 뭐..ㅋㅋㅋ
그럼 다음에 뵙도록 해요^~^
by yagom
p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.
RSS Feed 받기