스플래시 화면

Android 12부터 SplashScreen API를 사용하면 앱을 실행할 수 있습니다. 실행 시 인앱 모션, 스플래시 화면 등 애니메이션 포함 앱 아이콘 및 앱 자체로의 전환을 기반으로 할 수 있습니다. SplashScreen는 Window 및 Kubernetes에서 Activity입니다.

스플래시 화면 환경을 통해 모든 앱에 표준 디자인 요소가 추가됩니다. 맞춤설정도 가능하므로 앱의 고유한 브랜딩을 유지할 수 있습니다.

SplashScreen 플랫폼 API 외에도 SplashScreen compat 라이브러리를 사용하여 SplashScreen API를 래핑합니다.

스플래시 화면 작동 방식

앱의 프로세스가 실행되고 있지 않을 때 사용자가 앱을 실행하는 경우 (콜드 start) 또는 Activity이 생성된 경우 (웜 스타트) 다음과 같은 이벤트가 발생합니다.

1. 시스템은 개발자가 지정한 테마와 애니메이션을 사용하여 스플래시 화면을 표시합니다. 정의할 수 있습니다

2. 앱이 준비되면 스플래시 화면이 닫히고 앱이 표시됩니다.

스플래시 화면이 표시되는 동안 핫 스타트라는 두 가지 머신 유형이 있습니다.

스플래시 화면의 요소와 메커니즘

스플래시 화면의 요소는 Android 매니페스트 파일입니다. 각 요소에는 밝은 모드와 어두운 모드 버전이 있습니다.

스플래시 화면의 맞춤설정 가능한 요소는 앱 아이콘과 아이콘으로 구성되어 있습니다. 및 창 배경이 포함됩니다.

그림 2에 표시된 다음 요소를 고려하세요.

1 앱 아이콘은 벡터 드로어블이어야 합니다. 그것은 정적 또는 애니메이션일 수 있습니다. 애니메이션의 지속 시간은 무제한일 수 있지만 1,000밀리초를 초과하지 않는 것이 좋습니다 런처 아이콘이 기본값입니다.

2 아이콘 배경은 선택사항이며 다음과 같은 경우 유용합니다. 아이콘과 창 배경 간에 더 많은 대비가 필요합니다. 적응형 아이콘 창 배경과 충분히 대비되는 경우 배경이 표시됩니다.

3 적응형 아이콘과 마찬가지로 포그라운드가 마스킹됩니다.

4 창 배경은 단일 이미지로 구성됩니다. 불투명 색상입니다. 창 배경이 설정되어 있고 단색인 경우 사용됩니다. 속성이 설정되지 않은 경우 기본적으로 사용됩니다.

스플래시 화면 크기

스플래시 화면 아이콘은 적응형 아이콘 방법은 다음과 같습니다.

• 브랜드 이미지: 200×80dp여야 합니다.
• 아이콘 배경이 있는 앱 아이콘: 240×240dp여야 하며 원 직경 160dp
• 아이콘 배경이 없는 앱 아이콘: 288×288dp이고 크기가 지름 192dp의 원입니다.

예를 들어 이미지의 전체 크기가 300×300dp인 경우 아이콘이 지름이 200dp인 원 안에 있습니다. 원 밖은 모두 회전함 보이지 않음 (마스크됨).

스플래시 화면 애니메이션 및 시작 시퀀스

추가 지연 시간은 보통 콜드 스타트로 앱을 실행할 때 발생합니다. 스플래시 화면에 애니메이션 아이콘을 추가하면 미적인 매력과 더 높은 프리미엄 환경을 제공합니다 사용자 연구에 따르면 인지된 스타트업은 시간을 단축할 수 있습니다.

스플래시 화면 애니메이션은 다음과 같이 시작 시퀀스 구성요소 내에 삽입됩니다. API를 사용할 수 있습니다

1. 애니메이션 시작: 스플래시 화면의 시스템 뷰로 구성됩니다. 그것은 시스템에서 제어하고 맞춤설정할 수 없습니다.

2. 스플래시 화면 (시퀀스의 '대기' 부분에 표시됨): 스플래시 화면 화면 맞춤설정이 가능하여 자신만의 로고 애니메이션과 브랜드 인지도 제고를 목표로 하는 광고주 요구사항을 충족해야 합니다. 이 페이지에 설명된 대로 올바르게 작동합니다.

3. 종료 애니메이션: 스플래시 화면을 숨기는 애니메이션으로 구성됩니다. 맞춤설정하려면 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보다 길면 연속 재생 애니메이션을 고려하세요.

• 스플래시 화면을 닫을 적절한 시간을 설정합니다. 이는 다음과 같이 발생합니다. 첫 번째 프레임을 그립니다. 여기에 설명된 대로 이를 추가로 맞춤설정할 수 있습니다. 자세히 알아보려면 스플래시 화면을 화면에 더 오래 표시.

스플래시 화면 리소스

지금 바로 스타터 키트 예, 애니메이션을 만들고, 서식을 지정하고 AVD로 내보내는 방법을 보여줍니다. 이 패키지에는 다음 도구가 포함되어 있습니다.

• 애니메이션의 Adobe After Effects 프로젝트 파일입니다.
• 마지막으로 내보낸 AVD XML 파일입니다.
• 애니메이션 GIF 예시

이 파일을 다운로드하면 다음에 동의하는 것으로 간주됩니다. Google 서비스 약관

Google 개인정보처리방침에서 데이터는 이 서비스에서 처리됩니다

앱의 스플래시 화면 맞춤설정

다음과 같은 경우 기본적으로 SplashScreen에서 테마의 windowBackground를 사용합니다. windowBackground는 단색입니다. 스플래시 화면을 맞춤설정하려면 속성을 앱 테마에 추가합니다.

다음 중 한 가지 방법으로 앱의 스플래시 화면을 맞춤설정할 수 있습니다.

• 테마 속성을 설정하여 모양을 변경합니다.

• 화면에 더 오랫동안 표시합니다.

• 스플래시 화면 닫기 애니메이션을 맞춤설정합니다.

시작하기

Android 12 스플래시 화면을 모든 기기에 제공하는 핵심 SplashScreen 라이브러리 기기에서 지원됩니다 이를 프로젝트에 추가하려면 다음 스니펫을 내 build.gradle 파일:

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

스플래시 화면 테마를 설정하여 모양 변경

Activity 테마에서 다음 속성을 지정하여 맞춤설정할 수 있습니다. 스플래시 화면을 표시합니다. 이미 기존 스플래시 화면이 있는 경우 android:windowBackground와 같은 속성을 사용하는 구현의 경우 Android 12 이상의 대체 리소스 파일을 제공합니다.

1. 사용 windowSplashScreenBackground 드림 특정 단색으로 배경을 채울 수 있습니다.

   <item name="android:windowSplashScreenBackground">@color/...</item>
   

2. 사용 windowSplashScreenAnimatedIcon 드림 시작 창 중앙의 아이콘을 바꿀 수 있습니다.

   Android 12 (API 수준 32)만 타겟팅하는 앱의 경우 다음을 실행합니다.

   객체가 애니메이션 가능하고 AnimationDrawable 드림 및 AnimatedVectorDrawable의 경우 windowSplashScreenAnimationDuration를 다음과 같이 설정합니다. 시작 창을 표시하는 동안 애니메이션 재생 필수는 아닙니다. 이는 Android 13에서 지속 시간이 AnimatedVectorDrawable

   <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
   

3. 사용 windowSplashScreenAnimationDuration 드림 스플래시 화면 아이콘 애니메이션의 지속 시간을 나타냅니다. 설정 스플래시 화면이 표시되는 실제 시간에 영향을 미치지 않습니다. 스플래시 화면 이탈을 맞춤설정할 때 가져올 수 있습니다. 인코더-디코더 아키텍처를 SplashScreenView.getIconAnimationDuration 다음 섹션을 참고하세요. 스플래시 화면을 화면에 더 오래 표시 를 참조하세요.

   <item name="android:windowSplashScreenAnimationDuration">1000</item>
   

4. windowSplashScreenIconBackgroundColor 사용 을 사용하여 스플래시 화면 아이콘 뒤에 배경을 설정합니다. 이것은 창 배경과 아이콘 간의 대비가 충분하지 않습니다.

   <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
   

5. 이때 windowSplashScreenBrandingImage 드림 를 사용하여 스플래시 화면 하단에 표시되도록 이미지를 설정할 수 있습니다. 그러나 디자인 가이드라인에서는 브랜드 이미지 사용을 권장하지 않습니다.

   <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
   

6. 이때 windowSplashScreenBehavior 드림 앱의 스플래시 화면에 아이콘을 항상 표시할지 여부를 지정합니다. Android 13 이상 기본값은 0이며, 이 경우 실행 활동이 splashScreenStyle를 다음과 같이 설정하는 경우 스플래시 화면 SPLASH_SCREEN_STYLE_ICON, 또는 시작 활동이 특정 시점의 시작 시간을 지정하지 않은 경우 있습니다. 빈 스플래시 화면을 표시하지 않고 항상 표시할 애니메이션 아이콘의 경우 값을 icon_preferred로 설정합니다.

   <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   

스플래시 화면을 화면에 더 오래 표시

스플래시 화면은 앱이 첫 프레임을 그리는 즉시 닫힙니다. 만약 앱에서 인앱 설정을 로드하는 등 소량의 데이터를 로드해야 하는 경우 비동기식으로 사용하려는 경우 ViewTreeObserver.OnPreDrawListener 드림 앱을 정지하여 첫 번째 프레임을 그립니다.

그리기 전에 시작 활동이 완료되는 경우(예: 콘텐츠 뷰 설정 및 onResume 전에 완료(사전 그리기) 리스너가 필요하지 않습니다.

// 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()을 통해 스플래시 화면의 애니메이션을 추가로 맞춤설정할 수 있습니다.

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를 사용하여 애니메이션이 시작된 시점을 알 수 있습니다. 다음과 같이 아이콘 애니메이션의 남은 시간을 계산할 수 있습니다.

// 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
}

// 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 앱에서 스플래시 화면의 실제 구현을 보여 줍니다.