Android 12부터
SplashScreen
API를 사용하면 앱을 실행할 수 있습니다.
실행 시 인앱 모션, 스플래시 화면 등 애니메이션 포함
앱 아이콘 및 앱 자체로의 전환을
기반으로 할 수 있습니다. SplashScreen
는
Window
및
Kubernetes에서
Activity
입니다.
스플래시 화면 환경을 통해 모든 앱에 표준 디자인 요소가 추가됩니다. 맞춤설정도 가능하므로 앱의 고유한 브랜딩을 유지할 수 있습니다.
SplashScreen
플랫폼 API 외에도
SplashScreen
compat 라이브러리를 사용하여 SplashScreen
API를 래핑합니다.
스플래시 화면 작동 방식
앱의 프로세스가 실행되고 있지 않을 때 사용자가 앱을 실행하는 경우 (콜드
start) 또는 Activity
이
생성된 경우 (웜 스타트)
다음과 같은 이벤트가 발생합니다.
시스템은 개발자가 지정한 테마와 애니메이션을 사용하여 스플래시 화면을 표시합니다. 정의할 수 있습니다
앱이 준비되면 스플래시 화면이 닫히고 앱이 표시됩니다.
스플래시 화면이 표시되는 동안 웜 스타트
스플래시 화면의 요소와 메커니즘
스플래시 화면의 요소는 Android 매니페스트 파일입니다. 각 요소에는 밝은 모드와 어두운 모드 버전이 있습니다.
스플래시 화면의 맞춤설정 가능한 요소는 앱 아이콘과 아이콘으로 구성되어 있습니다. 및 창 배경이 포함됩니다.
![스플래시 화면에 포함된 요소를 보여주는 이미지](https://developer.android.com/static/images/guide/topics/ui/splash-screen/splash-screen-composition.png?authuser=0000&hl=ko)
그림 2에 표시된 다음 요소를 고려하세요.
1 앱 아이콘은 벡터 드로어블이어야 합니다. 그것은 정적 또는 애니메이션일 수 있습니다. 애니메이션의 지속 시간은 무제한일 수 있지만, 1,000밀리초를 초과하지 않는 것이 좋습니다 런처 아이콘이 기본값입니다.
2 아이콘 배경은 선택사항이며 다음과 같은 경우 유용합니다. 아이콘과 창 배경 간에 더 많은 대비가 필요합니다. 적응형 아이콘 창 배경과 충분히 대비되는 경우 배경이 표시됩니다.
3 적응형 아이콘과 마찬가지로 포그라운드가 마스킹됩니다.
4 창 배경은 단일 이미지로 구성됩니다. 불투명 색상입니다. 창 배경이 설정되어 있고 단색인 경우 사용됩니다. 속성이 설정되지 않은 경우 기본적으로 설정됩니다.
스플래시 화면 크기
스플래시 화면 아이콘은 적응형 아이콘 방법은 다음과 같습니다.
- 브랜드 이미지: 200×80dp여야 합니다.
- 아이콘 배경이 있는 앱 아이콘: 240×240dp여야 하며 원 직경 160dp
- 아이콘 배경이 없는 앱 아이콘: 288×288dp이고 크기가 지름 192dp의 원입니다.
예를 들어 이미지의 전체 크기가 300×300dp인 경우 아이콘이 지름이 200dp인 원 안에 있습니다. 원 밖은 모두 회전함 보이지 않음 (마스크됨).
![단색 및 투명한 배경의 다양한 아이콘 크기를 보여주는 이미지](https://developer.android.com/static/images/guide/topics/ui/splash-screen/splash-screen-icon-dimensions.png?authuser=0000&hl=ko)
스플래시 화면 애니메이션 및 시작 시퀀스
추가 지연 시간은 보통 콜드 스타트로 앱을 실행할 때 발생합니다. 스플래시 화면에 애니메이션 아이콘을 추가하면 미적인 매력과 더 높은 프리미엄 환경을 제공합니다 사용자 연구에 따르면 인지된 스타트업은 시간을 단축할 수 있습니다.
스플래시 화면 애니메이션은 다음과 같이 시작 시퀀스 구성요소 내에 삽입됩니다. API를 사용할 수 있습니다
![12개의 연속된 프레임에서 시작 시퀀스를 보여주는 이미지(런처 아이콘을 탭한 후 확대됨에 따라 화면을 채우는 것부터 시작)](https://developer.android.com/static/images/ui/splash-sequence.png?authuser=0000&hl=ko)
애니메이션 시작: 스플래시 화면의 시스템 뷰로 구성됩니다. 그것은 시스템에서 제어하고 맞춤설정할 수 없습니다.
스플래시 화면 (시퀀스의 '대기' 부분에 표시됨): 스플래시 화면 화면 맞춤설정이 가능하여 자신만의 로고 애니메이션과 브랜드 인지도 제고를 목표로 하는 광고주 요구사항을 충족해야 합니다. 이 페이지에 설명된 대로 올바르게 작동합니다.
종료 애니메이션: 스플래시 화면을 숨기는 애니메이션으로 구성됩니다. 맞춤설정하려면
SplashScreenView
및 아이콘을 클릭합니다. 변환 설정, 애니메이션, 캡션을 사용하여 설정할 수 있습니다 이 경우 애니메이션이 완료됩니다.
아이콘 애니메이션을 실행할 때 앱 시작 시
앱이 더 빨리 준비된 경우 시퀀스를 사용합니다. 앱이 onResume()
를 트리거합니다.
스플래시 화면이 자동으로 시간 초과되므로
움직이는 동작을 할 수 있는지
빠르게 건너뛰었습니다. 스플래시 화면은 onResume()
로만 닫아야 합니다.
시각적 관점에서 앱이 안정적일 때. 따라서 추가 스피너가 없을 때
확인할 수 있습니다 불완전한 인터페이스를 도입하면 사용자를 혼란스럽게 할 수 있고
예측하기 어렵거나 세련되지 않은 듯한 인상을 줍니다.
스플래시 화면 애니메이션 요구사항
스플래시 화면은 다음 사양을 준수해야 합니다.
단일 창 배경 색상을 투명하지 않게 설정합니다. 주간 및 야간 지원되는 모드는
SplashScreen
compat 라이브러리.애니메이션 아이콘이 다음 사양을 충족하는지 확인하세요.
- 형식: 아이콘은 AnimationVectorDrawable (AVD) XML입니다.
- 크기: AVD 아이콘은 적응형 배너 크기의 4배여야 합니다.
아이콘에 표시됩니다.
<ph type="x-smartling-placeholder">
- </ph>
- 아이콘 영역은 432dp, 즉 아이콘의 4배 마스킹되지 않은 적응형 아이콘의 108dp 영역
- 이미지의 안쪽 3분의 2는 런처 아이콘에 표시되며 288dp여야 합니다. 다시 말하자면, 72dp의 4배 적응형 아이콘의 안쪽 마스크 영역을 구성합니다.
- 시간: 휴대전화에서는 1,000ms를 초과하지 않는 것이 좋습니다. 이때 지연된 시작이지만 이 시간은 166ms를 초과할 수 없습니다 앱이 시작 시간이 1,000ms보다 길면 연속 재생 애니메이션을 고려하세요.
스플래시 화면을 닫을 적절한 시간을 설정합니다. 이는 다음과 같이 발생합니다. 첫 번째 프레임을 그립니다. 여기에 설명된 대로 이를 추가로 맞춤설정할 수 있습니다. 자세히 알아보려면 스플래시 화면을 화면에 더 오래 표시.
스플래시 화면 리소스
<ph type="x-smartling-placeholder">지금 바로 스타터 키트 예, 애니메이션을 만들고, 서식을 지정하고 AVD로 내보내는 방법을 보여줍니다. 이 패키지에는 다음 도구가 포함되어 있습니다.
- 애니메이션의 Adobe After Effects 프로젝트 파일입니다.
- 마지막으로 내보낸 AVD XML 파일입니다.
- 애니메이션 GIF 예시
이 파일을 다운로드하면 다음에 동의하는 것으로 간주됩니다. Google 서비스 약관
Google 개인정보처리방침에서 데이터는 이 서비스에서 처리됩니다
앱의 스플래시 화면 맞춤설정
다음과 같은 경우 기본적으로 SplashScreen
에서 테마의 windowBackground
를 사용합니다.
windowBackground
는 단색입니다. 스플래시 화면을 맞춤설정하려면
속성을 앱 테마에 추가합니다.
다음 중 한 가지 방법으로 앱의 스플래시 화면을 맞춤설정할 수 있습니다.
테마 속성을 설정하여 모양을 변경합니다.
화면에 더 오랫동안 표시합니다.
스플래시 화면 닫기 애니메이션을 맞춤설정합니다.
시작하기
Android 12 스플래시 화면을 모든 기기에 제공하는 핵심 SplashScreen
라이브러리
기기에서 지원됩니다 이를 프로젝트에 추가하려면 다음 스니펫을
내 build.gradle
파일:
Groovy
dependencies { implementation "androidx.core:core-splashscreen:1.0.0" }
Kotlin
dependencies { implementation("androidx.core:core-splashscreen:1.0.0") }
스플래시 화면 테마를 설정하여 모양 변경
Activity
테마에서 다음 속성을 지정하여 맞춤설정할 수 있습니다.
스플래시 화면을 표시합니다. 이미 기존 스플래시 화면이 있는 경우
android:windowBackground
와 같은 속성을 사용하는 구현의 경우
Android 12 이상의 대체 리소스 파일을 제공합니다.
사용
windowSplashScreenBackground
드림 특정 단색으로 배경을 채울 수 있습니다.<item name="android:windowSplashScreenBackground">@color/...</item>
사용
windowSplashScreenAnimatedIcon
드림 시작 창 중앙의 아이콘을 바꿀 수 있습니다.Android 12 (API 수준 32)만 타겟팅하는 앱의 경우 다음을 실행합니다.
객체가 애니메이션 가능하고
AnimationDrawable
드림 및AnimatedVectorDrawable
의 경우windowSplashScreenAnimationDuration
를 다음과 같이 설정합니다. 시작 창을 표시하는 동안 애니메이션 재생 필수는 아닙니다. 이는 Android 13에서 지속 시간이AnimatedVectorDrawable
<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
사용
windowSplashScreenAnimationDuration
드림 스플래시 화면 아이콘 애니메이션의 지속 시간을 나타냅니다. 설정 스플래시 화면이 표시되는 실제 시간에 영향을 미치지 않습니다. 스플래시 화면 이탈을 맞춤설정할 때 가져올 수 있습니다. 인코더-디코더 아키텍처를SplashScreenView.getIconAnimationDuration
다음 섹션을 참고하세요. 스플래시 화면을 화면에 더 오래 표시 를 참조하세요.<item name="android:windowSplashScreenAnimationDuration">1000</item>
windowSplashScreenIconBackgroundColor
사용 을 사용하여 스플래시 화면 아이콘 뒤에 배경을 설정합니다. 이것은 창 배경과 아이콘 간의 대비가 충분하지 않습니다.<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
이때
windowSplashScreenBrandingImage
드림 를 사용하여 스플래시 화면 하단에 표시되도록 이미지를 설정할 수 있습니다. 그러나 디자인 가이드라인에서는 브랜드 이미지 사용을 권장하지 않습니다.<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
이때
windowSplashScreenBehavior
드림 앱의 스플래시 화면에 아이콘을 항상 표시할지 여부를 지정합니다. Android 13 이상 기본값은 0이며, 이 경우 실행 활동이splashScreenStyle
를 다음과 같이 설정하는 경우 스플래시 화면SPLASH_SCREEN_STYLE_ICON
, 또는 시작 활동이 특정 시점의 시작 시간을 지정하지 않은 경우 있습니다. 빈 스플래시 화면을 표시하지 않고 항상 표시할 애니메이션 아이콘의 경우 값을icon_preferred
로 설정합니다.<item name="android:windowSplashScreenBehavior">icon_preferred</item>
스플래시 화면을 화면에 더 오래 표시
스플래시 화면은 앱이 첫 프레임을 그리는 즉시 닫힙니다. 만약
앱에서 인앱 설정을 로드하는 등 소량의 데이터를 로드해야 하는 경우
비동기식으로 사용하려는 경우
ViewTreeObserver.OnPreDrawListener
드림
앱을 정지하여 첫 번째 프레임을 그립니다.
그리기 전에 시작 활동이 완료되는 경우(예:
콘텐츠 뷰 설정 및 onResume
전에 완료(사전 그리기)
리스너가 필요하지 않습니다.
Kotlin
// Create a new event for the activity. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // Set the layout for the content view. setContentView(R.layout.main_activity) // Set up an OnPreDrawListener to the root view. val content: View = findViewById(android.R.id.content) content.viewTreeObserver.addOnPreDrawListener( object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw(): Boolean { // Check whether the initial data is ready. return if (viewModel.isReady) { // The content is ready. Start drawing. content.viewTreeObserver.removeOnPreDrawListener(this) true } else { // The content isn't ready. Suspend. false } } } ) }
자바
// Create a new event for the activity. @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set the layout for the content view. setContentView(R.layout.main_activity); // Set up an OnPreDrawListener to the root view. final View content = findViewById(android.R.id.content); content.getViewTreeObserver().addOnPreDrawListener( new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { // Check whether the initial data is ready. if (mViewModel.isReady()) { // The content is ready. Start drawing. content.getViewTreeObserver().removeOnPreDrawListener(this); return true; } else { // The content isn't ready. Suspend. return false; } } }); }
스플래시 화면 닫기 애니메이션 맞춤설정
Activity.getSplashScreen()
을 통해 스플래시 화면의 애니메이션을 추가로 맞춤설정할 수 있습니다.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... // Add a callback that's called when the splash screen is animating to the // app content. splashScreen.setOnExitAnimationListener { splashScreenView -> // Create your custom animation. val slideUp = ObjectAnimator.ofFloat( splashScreenView, View.TRANSLATION_Y, 0f, -splashScreenView.height.toFloat() ) slideUp.interpolator = AnticipateInterpolator() slideUp.duration = 200L // Call SplashScreenView.remove at the end of your custom animation. slideUp.doOnEnd { splashScreenView.remove() } // Run your animation. slideUp.start() } }
자바
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... // Add a callback that's called when the splash screen is animating to the // app content. getSplashScreen().setOnExitAnimationListener(splashScreenView -> { final ObjectAnimator slideUp = ObjectAnimator.ofFloat( splashScreenView, View.TRANSLATION_Y, 0f, -splashScreenView.getHeight() ); slideUp.setInterpolator(new AnticipateInterpolator()); slideUp.setDuration(200L); // Call SplashScreenView.remove at the end of your custom animation. slideUp.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { splashScreenView.remove(); } }); // Run your animation. slideUp.start(); }); }
이 콜백이 시작되면
애니메이션 벡터 드로어블을
스플래시 화면에서 시작됩니다. 앱 실행 시간에 따라
드로어블이 애니메이션 중간에 있을 수 있기 때문입니다. SplashScreenView.getIconAnimationStart
를 사용하여 애니메이션이 시작된 시점을 알 수 있습니다. 다음과 같이 아이콘 애니메이션의 남은 시간을 계산할 수 있습니다.
Kotlin
// Get the duration of the animated vector drawable. val animationDuration = splashScreenView.iconAnimationDuration // Get the start time of the animation. val animationStart = splashScreenView.iconAnimationStart // Calculate the remaining duration of the animation. val remainingDuration = if (animationDuration != null && animationStart != null) { (animationDuration - Duration.between(animationStart, Instant.now())) .toMillis() .coerceAtLeast(0L) } else { 0L }
Java
// Get the duration of the animated vector drawable. Duration animationDuration = splashScreenView.getIconAnimationDuration(); // Get the start time of the animation. Instant animationStart = splashScreenView.getIconAnimationStart(); // Calculate the remaining duration of the animation. long remainingDuration; if (animationDuration != null && animationStart != null) { remainingDuration = animationDuration.minus( Duration.between(animationStart, Instant.now()) ).toMillis(); remainingDuration = Math.max(remainingDuration, 0L); } else { remainingDuration = 0L; }
추가 리소스
- 기존 스플래시 화면 구현을 Android 12 및 더 높음
- Now in Android 앱에서 스플래시 화면의 실제 구현을 보여 줍니다.