다양한 애니메이션 효과를 사용한 스플래쉬 액티비티를 만들어봅니다.
Splash Screen이란?
앱을 실행시켰을 때 로딩화면이 나타나며 작동하게 되는 앱이 있는데 이 때 이 로딩화면을 스플래쉬 스크린이라고 합니다. 보통 앱의 아이콘이나 이름에 애니메이션 효과를 넣어 구성합니다.
splash_activity.xml 만들기
보통 스플래쉬 화면을 구성하는 방법은 3가지 정도가 있는데 저는 스플래쉬 액티비티 및 splash_activity.xml 파일을 이용하여 구성해보도록 하겠습니다. 일단 스플래쉬 화면을 구성할 레이아웃 파일을 만들어줍니다. 저는 Smart-Diaper 라는 텍스트와 기저귀 아이콘, 초록색 배경화면에 애니메이션 효과를 주기위해 다음과 같이 구성하였습니다.
저는 ConstraintLayout을 사용했고 초록색 배경화면도 애니메이션을 사용할 거라서 View, TextView, ImageView를 사용하고 TextView, ImageView는 elevation 효과를 주어 위에 떠있어보이게 하였습니다.
Splash Activity 만들기
이제 레이아웃 파일을 사용할 스플래쉬 액티비티를 만들어주고 OnCreate() 메소드 내에 레이아웃 파일을 보여주게 합니다.
애니메이션 xml 파일 구성하기
저는 일단 기저귀 아이콘이 화면 위에서 떨어져서 통통튀게 한 후, 텍스트가 밑에서 위로 올라오게 하고 싶었기 때문에 각각 애니메이션 xml 파일을 만들어주었습니다.
interpolator 속성으로 이 애니메이션의 등장 효과를 지정할 수 있습니다. 여러 가지가 있는데 저는 통통 튀는 속성인 bounce_interpolator 속성을 주었습니다. 그리고 위에서 아래로 떨어져야하기 때문에 이동 효과인 translate 태그에 -400% 지점에서 지정된 지점인 0% 지점까지 1000ms동안 지속되도록 설정하였습니다.
텍스트뷰는 똑같은 속도로 이미지뷰의 애니메이션이 끝난 후 나타나야하기 때문에 interpolator는 linear_interpolator로 설정하였고 startOffset은 1500ms로 주어 1500ms의 시간 후 진행되도록 하였습니다. 그리고 처음에 안보였다가 밑에서 나타나야하기 때문에 투명도인 alpah 태그 속성에 투명도를 0.0에서 1.0으로 변하게 하도록 설정하였습니다.
그리고 저는 애니메이션이 끝난 후 화면을 위로 밀어올리면서 메인 액티비티를 보이게 하고 싶었기 때문에 anim_splash_out_top.xml, anim_splash_in_down.xml 파일을 만들어주었습니다.
사용하기
이제 애니메이션 준비는 끝났으니 사용해보도록 하겠습니다. 우선 스플래쉬 액티비티 안에 애니메이션을 적용하는 메소드를 만들어줍니다.
AnimationUtils.loadAnimation() 메소드의 인자로 현재 context를 지정하고 만들어준 애니메이션을 각각 적용해줍니다. 그리고 기저귀 아이콘의 애니메이션 리스너에 애니메이션이 끝난 후 메인 액티비티로 넘어가는 기능을 넣어줍니다. overridePendingTransition의 첫 번째 인자로 현재 화면의 애니메이션 효과, 두 번째 인자로 넘어갈 화면의 애니메이션 효과를 지정해주면됩니다. 그리고 finish() 메소드로 스플래쉬 화면을 종료해줍니다.
매니페스트 파일에 Splash Activity 등록하기
이제 마지막으로 splash activity를 매니페스트 파일에 등록해주면 끝입니다. application 태그 내에 이렇게 스플래쉬 액티비티를 넣어주시고 이 때 메인 액티비티가 가지고 있던 intent-filter 태그 부분을 가져와줍니다. screenOrientation을 portrait로 지정하여 세로 모드로 실행하도록 하였고 noHistory=true로 지정하여 실행 후 사라지도록 하였습니다. action 태그 안에 저렇게 MAIN으로 등록하게 되면 첫 시작 화면이 Splash Activity가 됩니다.
실행화면입니다!
처음에 나타나는 하얀화면을 없애고 싶다면 다른 방법으로 splash screen을 구성하면 되는데 아직 다른 방법에 animation을 적용하는 법은 더 알아봐야할 것 같습니다.😥
2019년 12월 30일 수정
하얀 화면은 app이 cold start 되면서 보이는 화면이라고 나오는데 이것은 간단하게 <item name="android:windowDisablePreview">true</item> 요 코드를 본인 프로젝트의 values -> styles -> 의 style 태그 안에 넣어주시면 해결됩니다!
읽어주셔서 감사합니다.
