개발 관련/Android

안드로이드 테마를 이용한 진짜 인트로 화면 만들기.

snoworca 2014. 5. 16. 23:29


  앱을 실행하자마자 아래와 같은 이미지를 띄우고 대략 2~3초 뒤에 메인 화면으로 넘어가는 동작을 구현해 보겠습니다.

  우선 가장 무난한 페이스북 인트로 화면을 예제로 잡아보겠습니다.

  우선 아래와 같이 인트로로 사용할 이미지를 준비합니다.

  저는 가장 무난한 페이스북 이미지에 나인패치를 입혀서 적용했습니다. 화면을 다 덮는 이미지를 사용해도 되지만 intro 화면에 사용될 Drawable 을 정의한 xml 파일을 사용하는 것이 좋습니다.


  우선 values 폴더의 style.xml 파일에 다음과 같은 테마를 하나 추가시켜줍니다.

  액션바와 타이틀을 제거하고 인트로에 사용될 배경 이미지를 출력하는 테마입니다.

<style name="IntroTheme" parent="android:Theme.Light.NoTitleBar">
            <item name="android:windowBackground">@drawable/intro</item>
            <item name="android:windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
</style>


  그리고 AndroidManifest.xml 에서 Intro 를 보여줄 Activity 에 해당하는 엘리먼트에 다음과 같은 속성을 추가시켜서 인트로 테마를 지정합니다.

android:theme="@style/IntroTheme"


 마지막으로 인트로 화면을 보여줄 해당 Activity 에 인트로 화면을  표시하기 위하여 코드를 다음과 같이 작성합니다.

 아래 코드는 액티비티 하나로 인트로와 컨텐츠를 모두 보여주는 예 입니다.

Preview:

public class MainActivity extends Activity {

	@Override
	protected void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		boolean isRunIntro = getIntent().getBooleanExtra("intro", true);
		if(isRunIntro) {
			beforeIntro();
		} else {
			afterIntro(savedInstanceState);
		}
	}
	
	// 인트로 화면 
	private void beforeIntro() {
		// 약 2초간 인트로 화면을 출력.
		getWindow().getDecorView().postDelayed(new Runnable() {
			@Override
			public void run() {
				Intent intent = new Intent(MainActivity.this, MainActivity.class);
				intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
				intent.putExtra("intro", false);
				startActivity(intent);
				// 액티비티 이동시 페이드인/아웃 효과를 보여준다. 즉, 인트로
                                //    화면에 부드럽게 사라진다.
				overridePendingTransition(android.R.anim.fade_in, 
                                                                     android.R.anim.fade_out);
			}
		}, 2000);
	}
	
	// 인트로 화면 이후.
	private void afterIntro(Bundle savedInstanceState) {
		// 기본 테마를 지정한다.
		setTheme(R.style.AppBaseTheme);
		setContentView(R.layout.activity_main);
	}

}

실행 결과