'아이패드'에 해당되는 글 2건

  1. 2010/09/17 폰갭 런치 스크린(Launch Screen) 버그
  2. 2010/09/03 PhoneGap & JQTouch로 개발 시 orientation 문제

 
 원래는 JQTouch가 공식적으로 아이패드를 지원하지 않기 때문에, 폰갭으로 아이패드 앱을 개발하는 경우는 많지 않습니다.
 (물론 Sencha Touch가 있습니다만, 공포의 듀얼 라이센스를 감당해 낼 수 있을 때의 이야기... ㅎㄷㄷㄷ)

 하지만 폰갭으로 아이패드 앱. 정확히는 아이폰/아이패드가 동시 지원되는 앱을 만들 경우, 두 기기의 해상도에 맞는 타이틀 이미지(일명 Launch Screen)를 각각 제공해줘야 합니다.

 물론 이미지가 하나라도 알아서 리사이징을 해 줍니다만, 로딩 종료 시 순간적으로 이미지가 정상 사이즈로 보여지는 문제가 있기 때문에 가능하면 두 개의 이미지를 제공해 주는 편이 좋습니다.
 (뭐 정상 사이즈로 보여지는 그 순간이 채 1초도 되지 않으니 무시해도 되긴 합니다만...)

 해결 방법은 간단하게도, info-plist의 Launch Image(UILaunchImageFile)을 아이폰 용과 아이패드 용을 따로 나눠서 잡아주면 됩니다만(참고), 폰갭의 경우 이 부분에 관한 버그가 있어서 아이패드 용 런치 스크린이 적용이 안 될 수도 있습니다.

 이 경우 아이패드에서도 임의로 아이폰용 런치 이미지를 사용하죠. 로딩 종료시 이미지가 320px x 460px로 줄어드는 광경을 체험해 보실 수 있습니다.(머엉)

 뭐 폰갭의 버그인지 다른 이유인지를 확실히 모르겠습니다만, 해결 방법은 AppDelegate.m에 다음 코드를 추가해 주시면 됩니다.(참고)

- (void)applicationDidFinishLaunching:(UIApplication *)application
{   
    [ super applicationDidFinishLaunching:application ];
   
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        UIImage* image = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Default-Portrait" ofType:@"png"]];
        imageView = [[UIImageView alloc] initWithImage:image];
        [image release];
       
        imageView.tag = 1;
        [window addSubview:imageView];
        [imageView release];
    }
}


 이상입니다.

 여담이지만 드디어 제가 개발한 앱이 심사에 들어갔습니다.
 빠르면 다음주, 늦어도 다다음주에는 공개가 가능할 것 같네요 ㅋㅋ.

 공개가 된다면 홍보 포스팅을 하도록 하겠습니다 ㅎㅎ.
Posted by 강성희 Trackback 0 : Comment 0

 정말 오랜만의 글이네요.

 자바스크립트로 모바일 앱을 개발할 경우 모바일의 회전에 맞춰 인터페이스를 바꿔줘야 하는 경우가 있습니다.

   이 경우 'orientationchange'라는 이벤트에 함수를 바인딩하면 모바일 기기가 회전할 때 마다 콜백 함수를 호출받을 수 있습니다.

$(window).bind('orientationchange', updateOrientation);

function updateOrientation() {
            orientation = window.innerWidth < window.innerHeight ? 'profile' : 'landscape';

            $body.removeClass('profile landscape')
                        .addClass(orientation)
                        .trigger('turn', {orientation: orientation});

            // scrollTo(0, 0);
}

JQTouch 라이브러리 내에 존재하는 코드 중 하나입니다.
기기 회전 시 HTML의 body에 'landscape'또는 'profile' 클래스를 추가하죠.


 하지만  특정 경우(특히 아이패드 환경)에서는 이 'orientationchange' 이벤트가 호출되지 않는다고 합니다.
 여러가지 원인이 있는 것 같은데, 아직 확실하게 고쳐지지 않은 것 같네요.

 이 경우에는 'orientationChanged'라는 이벤트를 이용해 보세요.

$(window).bind('orientationChanged', updateOrientation);

function updateOrientation() {
            orientation = window.innerWidth > window.innerHeight ? 'profile' : 'landscape';

            $("ul li textarea").removeClass('profile landscape')
                                      .addClass(orientation)
                                      .trigger('turn', {orientation: orientation});
  }

 단 이 이벤트의 경우 기기가 회전하기 전에 호출되는 것 같더군요.
 가령 회전 전 상태가 가로이면, 가로 상태로 함수가 호출되고 이후에 회전을 시작합니다.
 
 왠지 이벤트가 거꾸로 먹는 것 같으면 이 부분을 의심해보세요 ㅎㅎ


 - 추가(2010년 9월 16일) -
 찾아보니 JQTouch에서 제공하는 'turn'이라는 트리거가 있네요.
(http://wiki.github.com/senchalabs/jQTouch/callbackevents)
 위 코드에서도 사용하고 있었는데 전혀 눈치채지 못했네요 ^^;

 직접 사용해보진 않았지만 공식 위키에 있는 내용이니 신뢰하셔도 될 것 같습니다.
Posted by 강성희 Trackback 0 : Comment 0