- 2012.12.18 Android : MAC에서 폰갭 2.2 프로젝트 만드는법
- 2012.12.18 PhoneGap 사용하기
- 2012.12.18 xcode iPhone 4인치용으로 xib 사용하기
- 2012.12.18 xcode iPhone 4Inch 대응 이미지 사용 법
터미널을 열고 아래 빨간색의 명령어를 실행합니다.
# IOS와 다른 점은 아래 .bash_profile 을 생성하고 안드로이드 SDK 경로를 환경설정 해주고 있습니다.
1. imac6ui-iMac:~ imac6$ touch ~/.bash_profile <= 현재 사용자 계정의 홈 디렉토리 위치에 .bash_profile 빈 파일 생성
2. imac6ui-iMac:~ imac6$ cd ~ <= 홈디렉토리 이동
3. imac6ui-iMac:~ imac6$ ls -al | grep .bash_profile <= .bash_profile 파일 생성 확인
-rw-r--r--@ 1 imac6 staff 166 12 11 15:58 .bash_profile <= .bash_profile 파일이 생성되었습니다.
4. imac6ui-iMac:~ imac6$ open .bash_profile <= 텍스트 편집기로 .bash_profile 파일이 열립니다.
5. 열린 텍스트 편집기의 .bash_profile 에 아래 내용을 입력한다.
export PATH=${PATH}:/Development/android-sdk-macosx/platform-tools:/Development/android-sdk-macosx/tools
* 안드로이드 SDK(android-sdk-macosx) 설치 위치에 따라서 platform-tools, tools 경로를 지정한다.
6. 텍스트 편집기 파일 > 저장
7. source ~/.bash_profile <= 생성한 .bash_profile의 PATH 환경변수 적용
8. PATH 환경 변수 적용 확인
imac6ui-iMac:~ imac6$ echo $PATH <= 입력 확인
(추가한 platform-tools, tools 경로 확인 )
프로젝트 오른쪽 마우스 > Properties > Android > Android 4.2 API Target 선택
13. 이클립스 재실행
14. 프로젝트 오른쪽 마우스 Run As > Android Application 프로젝트 실행
15. 안드로이드 기기 테스트
15.1. 기기 > 환경설정(세팅) > 개발자 옵션(개발자) > USB 디버깅 선택
15.2. 프로젝트 오른쪽 마우스 Run As > Android Application 프로젝트 실행
15.3. 연결된 안드로이드 기기 테스트 선택 OK 실행 완료
먼저 폰갭 생성 실행 파일을 다운 받아야 합니다.
ㄴ여기서 다운로드를 누르시고
폰갭을 다운 받습니다. 보통 Download 폴더로 들어가겠지요?
압축을 푼후에
START 가이드로 갑니다.
저는 아이폰 개발을 해야하기 때문에 iOS 로 선택~
다른 디바이스에 만드실 예정이면 해당 디바이스를 선택하시면 됩니다.
터미널 창을 여시고
폴더를 다운받은 폰갭의 ios/bin 폴더까지 이동해 놓습니다.
팁은 터미널 창에서 cd 를 입력하신 후에 해당 폴더를 터미널 창으로 끌어다놓고 실행하면 간단하게 이동~*
그리고 생성은 위의 스크린샷 처럼 ./create ~/Desktop/HelloWrold org.apache.HellowWorld HellowWorld
를 입력해 주시면 됩니다.
그러면 이렇게 데스크탑에 생성완료~!
생성후에 프로젝트를 여시고 이걸 추가해 주셔야 됩니다.
ExternalHosts에 [+]를 누르셔서 * 를 추가해 주셔야 하는데요.
J쿼리나 모바일쿼리에서 사용하는 url들이 전부 깨지는걸 방지하기 위해서입니다.
이제 index.html에 HelloWorld를 지우고 만들어 놓은 HTML5 코드를 실행~!
이렇게 됩니다.
ViewController.m 에 init 부분을 이렇게 만든 후 xib를 하나더 추가해 줍니다. 아이폰 5용 4인치로...
이런식으로 파일들이 만들어 두고 추가한 xib 설정 File's owner에서
ㄴ Custom Class 부분에 ViewController로 Class 설정을 잡아 줍니다.
(그래야 같은 아울렛을 2개의 XIB가 공유해서 사용할 수 있음)
ㄴ 그리고 기본 view를 생성해서 연결해 줍니다.
ㄴ xib를 만들어둔 아울렛들과 연결 시켜줍니다. 물론 두 xib 같이요.
ㄴ 이렇게 연결이 됩니다.
이렇게 해두면 3.5인치 xib, 4인치 xib 두개다 자동으로 실행이 됩니다.
이번에 아이폰 5가 해상도 (640x1136 px)로 변경되면서 뷰화면들을
다시 설정해 줘야하는 상황이 되었습니다.
기존에 프로젝트에는 이미지를 넣을때
image.png , image@2x.png 로 만들어 두면 코딩에 @"image.png"만 넣어도
아이폰4 시뮬레이터에서 자동으로 @"image@2x.png" 로 읽어 들였는데요.
이번에 아이폰 5에서 4인치 해상도로 변경되면서 image-568@2x.png로 변경하면
들어간다고해서 넣어 보았으나...
이건 Default 이미지에만 해당하는 내용이었습니다. 살짝 좌절.... ㅋ
하지만! 저희에게는 최고의 서포터가 있지 않겠습니까? 바로!!! 구글링~
검색 결과 : http://stackoverflow.com/questions/12497776/new-image-name-for-iphone-5
에서 찾아 내었습니다.
정리하자면 먼저 코딩 상단에 #Define으로 해상도를 잡아주고 사용시에 약간의 코딩 수정만
하면 되는 겁니다.
Here we go~!
// iPhone 5 support
#define ASSET_BY_SCREEN_HEIGHT(regular, longScreen) (([[UIScreen mainScreen] bounds].size.height <= 480.0) ? regular : longScreen)ㄴ여기 까지가 상단에 잡아주는 #define 부분
Usage: (assets names - image.png, image@2x.png, image-568h@2x.png)
ㄴ 이미지를 3개 준비합니다. 순서대로 (아이폰 3, 아이폰4, 아이폰5 )용 이미지들입니다.
myImage = [UIImage imageNamed:ASSET_BY_SCREEN_HEIGHT(@"image",@"image-568h")];ㄴ 이미지 사용시 상단에 만들어 두었던 #define을 사용해서 이미지 이름만 넣어주면 됩니다.
이것으로 해결~!
