안드로이드 테마를 이용한 Splash Window 구현

2014.02.05 09:53

RAD Studio XE7부터는 프로젝트 옵션에서 스플래쉬 이미지를 쉽게 변경할 수 있습니다.

RAD Studio XE6 이전 버전에서 아래 내용을 참고하기 바랍니다.


안녕하세요. 험프리 김현수입니다.


델파이 모바일로 앱을 만들면, iOS에서는 스플래쉬 윈도우가 표시된 후 앱이 구동되지만 안드로이드의 경우 스플래쉬 윈도우가 없이 검은색 화면이 표시된 후 앱이 구동됩니다.

델파이 모바일 개발의 경우 엔터프라이즈 개발에 주요 초점이 맞쳐져 있어, 쉬운개발과 빠른개발에 더 강점을 갖고 있어 큰 이슈가 되지는 않지만 B2C등의 개인 사용자에게 배포할 경우 때때로 눈에 거슬리기도 합니다.


위의 이슈(검은 화면 이후 앱 구동)를 해결하기 위한 방법은 3가지 정도가 될 것 같습니다.


  1. 앱을 최대한 빨리 띄우고 시간이 걸리는 부분은 앱이 구동된 이후에 수행
  2. 안드로이드 테마를 이용해서 스플래쉬 윈도우 출력
  3. 자바코드로 스플래쉬 윈도우용 Activity(화면)을 구성


위의 3가지 방법 중 제일 좋은 방법은 3번 항목입니다. 별도의 스플래쉬 윈도우를 자바코드로 작성하고, 구동 시점에 스플래쉬 윈도우 출력 후 앱을 구동하는 방법입니다.

하지만, 3번 항목으로 구현하게 되면 자바코드를 작성 후 컴파일하고, 패키징하는 작업이 델파이만을 사용하시는 분들에게는 꽤 번거롭고 어려운 작업입니다. 

(그리고, 스플래쉬 윈도우를 초기에 구동하게되면 델파이에서 앱의 진입점을 찾지 못해 디버깅 작업을 진행 할 수 없습니다.)


위의 이유로 제일 간단하고 디버깅도 가능한 2번째 항목으로 스플래쉬 윈도우 구성하는 방법을 설명합니다.

안드로이드 테마를 이용한다는 것은 기본 테마를 변경하는 것이므로, 구현 후 전체적인 구성을 반드시 확인해야 합니다. 

파이어몽키의 경우 기본적으로 테마위에 컨트롤들이 올라가는 것이므로, 큰영향을 주지 않을 것으로 생각됩니다.


혹시 테마를 이용할 경우 이슈가 있으면 댓글 부탁드립니다


안드로이드 테마를 이용해 스플래쉬 윈도우를 구성하려면 아래의 순서를 진행하면 됩니다.


  1. 프로젝트 생성 및 디렉토리 구조
  2. 스플래쉬 이미지 준비
  3. Styles.xml 파일 준비 - 스플래쉬 윈도우를 xml로 구성합니다.
  4. AndroidManifast.template.xml 파일 수정
  5. 배포파일 등록


프로젝트 생성 및 디렉토리 구조

Firemonkey Mobile Application으로 새로운 프로젝트를 생성하고, 프로젝트를 지정된 경로에 저장합니다.(e.g. D:\Projects\SplashWindow)

지정된 경로 하위에 res 디렉토리를 생성하고 아래의 단계를 거처 스플래쉬 이미지 파일과 styles.xml 파일을 생성합니다.

  • SplashWindowTheme
    • res
      • splash.png
      • styles.xml
    • 프로젝트 소스파일

스플래쉬 이미지 준비

스플래쉬 윈도우를 추가할 프로젝트를 생성하고 스플래쉬 윈도우에 표시할 이미지를 준비합니다. 확장자는 이미지 포맷인 경우 무관합니다.

저는 아래와 같은 이미지(splash.png, 768 * 1024)로 준비했습니다.

styles.xml 파일 준비

splash.png, splash.jpg등으로 스플래쉬 이미지를 이용하실 경우 아래 파일을 그대로 사용해도 됩니다.


  • <style name="MyTheme.NoTitleBar.SplashWindow" parent="@android:Theme.Holo">
    • name은 아래의 AndroidManifast에서 android:theme에서 사용 할 style 명
    • parent는 상속받을 안드로이드의 테마를 입력합니다.
  • <item name="android:windowBackground">@drawable/splash</item>
    • 스플래쉬로 등록할 파일을 지정합니다.
    • 배포 시 [res/drawable] 경로에 splash.png 이미지 파일이 함께 배포되어야 합니다.

AndroidManifast.template.xml 파일 수정


프로젝트 파일을 저장한 경로를 보시면 AndroidManifast.template.xml 파일이 자동 생성됩니다.(만약, 파일이 없을 경우 Platform Target을 Android로 설정 후 컴파일 하면 생성됩니다.)

해당파일을 RAD Studio에 추가하거나 텍스트 에디터 등으로 열고, 아래와 같이 android:theme를 수정합니다.

(아래의 문구는 styles.xml의 style.name과 반드시 같아야 합니다.)

기존 : android:theme="%theme%">

변경 : android:theme="@style/MyTheme.NoTitleBar.SplashWindow">

배포파일 등록


준비한 스플래쉬 이미지와 styles.xml 파일을 앱과 함께 배포 합니다.


Project > Deployment 메뉴를 통해 [] 화면을 표시하고 Add file 버튼을 이용해 res\ 경로에 있는 2개의 파일을 업로드 하고 아래와 같이 내용을 변경합니다.

splash.png

  • Platform : Android
  • Remote Path : res\drawable\

styles.xml

  • Platform : Android
  • Remote Path : res\values\


컴파일을 하고 실행하면 아래와 같이 스플래쉬 윈도우가 실행되고, 메인화면이 표시되는 것을 확인 할 수 있습니다.


http://www.youtube.com/watch?v=J2kXdGzzMzY


참고



소스파일



저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 , ,

  1. Blog Icon
    오실장

    스타일 이용하는것 정말 간편하고 좋은 방법이군요..!!
    엠바카데로에서 델파이 컴파일러에 기본으로 제공해도 전혀 무리가 없어 보이는데 왜 이런 방법들을 개발자들이 찾아내야 하는지 하는 아쉬움이 있군요..
    이제라도 좋은 방법을 찾아 냈으니 다행입니다..수고 하셨습니다..ㅎㅎ

    참고로 샘플에서 알려주신 styles.xml 안의 <item name="android:windowFullscreen">true</item> 속성을
    TRUE로 하게 되면 실행되는 앱의 속성도 풀스크린으로 나오게 되므로
    상단 상태바가 사라지게 되는데 앱의 기본설정대로 상태바가 보여야 한다면
    false 로 해서 지정하고 스플래시 이미지를 띄워도 괜찮을것 같군요.
    (이부분은 개발되는 앱의 특성이니 보시는분들 참고하시라고 제가 댓글로 알려 드립니다..^^)

    안드로이드 테마도 parent="@android:Theme" 으로 지정하면
    테마 변경없이 적용 가능 합니다. (단말기에 따라 차이는 있을수 있습니다.)

    그리고 본문 내용중
    [변경 : android:theme="@style/MyThem.NoTitleBar.SplashWindow"]
    의 문구에 MyThem 'e' 가 빠졌네요...^^ 입력하기 구찮아서 복사해서 쓰니 에러나서 한참 들여다 봤습니다..ㅋㅋ

  2. 오실장님 의견 주셔서 감사합니다^^
    원래 안드로이드의 경우 기본으로 스플래쉬를 지원하지 않기때문에 엠바카데로에서 뺀것 같은데요. 앱의 덩치가 커지면서 구동이 늦어지는 이슈까지 고려하지 않은 것은 분명히 엠바의 실수 같아요. 다음 버전에 성능적인 향상도 기대해보고 있습니다^^

    e가 빠진건 수정했습니다.

  3. Blog Icon
    조봉기

    res를 프로젝트 생성폴더 밑에 두고 해당 이미지와 xml을 놓고 실행하면 해당 리소스 파일이 없다고 합니다. 도움을 좀 주실수 있나요?

  4. 배포파일 등록 시 이미지와 xml파일을 선택하시고 remote path를 설정하시면 됩니다. 리소스 파일이 없다는 것은 실행시 나오는 메시지 인가요?

  5. Blog Icon
    조봉기

    먼저 운영자님의 답변에 감사드립니다.
    제가 운영자님의 블로그에 있는데로 프로젝트 폴더에 res생성해서 해당 splash.png, styles.xml 을 가져다 놓고
    AndroidManifast.template.xml 수정해서 디버깅 하면

    [PAClient Error] Error:E2312 G:\project\splashtest\Android\Debug\splashtest\AndroidManifest.xml:21:error:Error:No resource found that matches the given name(at 'theme' with value '@style/MyTheme.NoTileBar.SplashWindow')

  6. 우선 원인은 @style/MyTheme.NoTitleBar.SplashWindow을 찾지 못하는 것 같습니다.
    위의 오류 메시지를 보면 TileBar로 "t"가 빠져있는데요. 그게 원인이 아닐까 예상합니다.^^

  7. Blog Icon
    조봉기

    해결했습니다. 재가 배포등록 전단계까지하고 디버깅을 해서 그랬습니다. 친절한 답변감사드립니다.

  8. 도움이 되셨다니 너무 기분이 좋습니다^^

  9. Blog Icon
    김영환

    좋은 정보 감사드립니다!!
    제가 만든 앱은 메인이 뜨는데 약 3초정도의 시간이 걸립니다. 그래서 스플래쉬가 뭔지 확인하기도 전에 지나가 버리면서 약 2초정도를 블랙화면에서 기다려야합니다. 스플래쉬 대기시간을 약2초정도로 조정할 수는 없는건가요? 감사^^

  10. 만약 안내해 주실 내용이 있다면, 메인화면 전에 안내화면을 2초 정도 띄우고 사라지는 방법이 좋을 것 같습니다.
    XX팡 등의 게임도 스플래쉬 이후에 업데이트 체크 등의 안내화면이 지나서 메인화면이 뜨는 방식을 참고하시면 좋겠네요^^

  11. Blog Icon
    아가머하노

    안녕하세요. 글을 보고 적용하다 보니 잘 안되어 글을 남깁니다.

    AndroidManifast.template.xml 파일에서 해당 styles.xml파일에 있는 name을 수정하고

    F9를 누르니 자꾸 AndroidManifast.template.xml파일을 다시 생성하여 넣어놓은 내용이 초기화가 됩니다.

    이 경우 어떻게 해야할까요? 조언 부탁드리겠습니다.

  12. 안드로이드 매니페스트 파일은 2종류가 있습니다.

    AndroidManifast.template.xml 파일과 AndroidManifast.xml 파일
    전자는 파일이 없을 경우 최초 생성이되고, 후자는 매번 컴파일시마다 생성됩니다.
    아마 두개의 파일을 혼돈하셨을 것 같은데요.
    프로젝트 파일이 저장된 경로를 다시 확인해보시기 바랍니다^^

  13. Blog Icon
    아가머하노

    아 제가 파일명을 잘못썼는데
    AndroidManifest.xml 파일이 계속 다시 생성됩니다.
    Deploy에서 있는 경로에 있는 파일에다가 썼는데도
    자꾸 초기화가 되네요..

  14. Blog Icon
    아가머하노

    하나 더 궁금한건

    XE5사용중인데...IndyFTP를 Android에 올리면 파일을 업로드 및 다운로드가 정상적으로 이뤄지지않고
    에러가 발생합니다. 동일한 소스를 Windows에서 할때는 잘되구요.
    구글링해보니 저와 비슷한경우의 사람을 발견했는데...아쉽게도 답변이 없네요..
    제가 잘못사용하고 있는건지...아니면 IndyFTP 컴포넌트에 버그가 있는건지...

    조언 좀 부탁드리겠습니다.

  15. Blog Icon
    아가머하노

    아 제가 착각했습니다. 감사합니다.^^

  16. Blog Icon
    삽질맨

    스플래시가 잠깐 나왔다가 사라져서..로딩시간이 좀 오래인경우,
    스플래시보여지는 화면의 시간을 길게 늘려서 조정할 수 있는 방법이 있을까요?

  17. 스플래쉬가 나왔다 사라진 것은 이미 앱이 로딩되었다는 의미입니다.
    이런 경우는 앱 실행시(Create, Show) 어떤한 작업을 하기 때문인 것으로 보이는데요.
    FormCreate나 FormShow에는 데이터를 불러오는 등의 오래걸리는 작업을 넣지 않는 것이 좋습니다.
    아래 링크를 참고해서 앱이 완전히 구동된 이후에 오래걸리는 작업을 처리하시면 해결되실것으로 보입니다.
    http://blog.hjf.pe.kr/207

  18. Blog Icon
    옹아

    위 소스로 돌려본 결화 스플래쉬는 잘 작동 됩니다. 스플래쉬가 나왔다 사라지면 앱이 로딩이 되었다고 하셨는데
    기존 앱에 버튼화면만 해서 돌리면 스플래쉬가 나왔다 사라지고 버튼 화면이 나오기 전 검은 화면이 1~2초 남아 있습니다.. 스플래쉬를 사용한 이유가 앱이 구동되기전 검은 화면을 안보이게 하는건데 1~2초 검은 화면은 안드로이드 테마로 스플래쉬 시간은 컨트롤 할수 없는건가요??

  19. Blog Icon
    dskim

    수고 많으십니다.

    스마트폰 델파이 책 1 권, 2 권 감사히 공부하고 있는 델파이 코딩 초보자입니다.

    메인 페이지 띄우기 전에 로고 화면 하나 또는 둘 연달아 띄우고 메인 화면으로 이동 했으면 하는데요

    상기와 같이 안드로이드 구현 한다고 하면,,

    해당 기능을 아이폰에는 동일하게 어떻게 구현 하면 될까요 ?.

    또한 상기 기능을

    "메인폼을 얼리지 않고(Idle 상태) 대기하기.(TStopWatch 활용)" 게시판 부분을 이용하여 구현하는 것도

    가능한 부분인지요 ??

    현재 델파이 코딩 생 초보자입니다.

    자세히 예를들어 설명해 주시면 대단히 감사 하겠습니다.

    오늘도 좋은 하루 되세요.....