시작 화면Splash Screen

샘플 다운로드 샘플 다운로드Download Sample Download the sample

특히 앱이 장치에서 처음 시작 될 때 Android 앱을 시작 하는 데 시간이 오래 걸립니다. 시작 화면에 사용자에 대 한 시작 진행률 또는 브랜딩 표시를 표시할 수 있습니다.An Android app takes some time to start up, especially when the app is first launched on a device. A splash screen may display start up progress to the user or to indicate branding.

개요Overview

Android 앱은 시작 하는 데 약간의 시간이 걸립니다. 특히 앱이 처음으로 장치에서 실행 되는 경우 ( _콜드 시작_이라고 함)An Android app takes some time to start up, especially during the first time the app is run on a device (sometimes this is referred to as a cold start). 시작 화면은 사용자에게 시작 진행률을 표시하거나 응용 프로그램 식별 및 홍보를 위한 브랜드 정보를 표시할 수 있습니다.The splash screen may display start up progress to the user, or it may display branding information to identify and promote the application.

이 가이드에서는 Android 응용 프로그램의 시작 화면을 구현하는 한 가지 기술을 설명합니다.This guide discusses one technique to implement a splash screen in an Android application. 다음 단계를 포함합니다.It covers the following steps:

  1. 시작 화면에 그림 리소스를 만듭니다.Creating a drawable resource for the splash screen.

  2. 그림 리소스를 표시하는 새 테마를 정의합니다.Defining a new theme that will display the drawable resource.

  3. 이전 단계에서 만든 테마에서 정의한 시작 화면으로 사용할 새 작업을 응용 프로그램에 추가 합니다.Adding a new Activity to the application that will be used as the splash screen defined by the theme created in the previous step.

예제 Xamarin 로고 시작 화면, 앱 화면Example Xamarin logo splash screen followed by app screen

요구 사항Requirements

이 가이드에서는 응용 프로그램이 Android API level 21 이상을 대상으로 한다고 가정 합니다.This guide assumes that the application targets Android API level 21 or higher. 또한 응용 프로그램은 프로젝트에 추가된 Xamarin.Android.Support.v4Xamarin.Android.Support.v7.AppCompat NuGet 패키지가 있어야 합니다.The application must also have the Xamarin.Android.Support.v4 and Xamarin.Android.Support.v7.AppCompat NuGet packages added to the project.

이 가이드에 있는 모든 코드 및 XML은 이 가이드에 대한 샘플 프로젝트인 SplashScreen에 포함되어 있습니다.All of the code and XML in this guide may be found in the SplashScreen sample project for this guide.

시작 화면 구현Implementing A Splash Screen

시작 화면을 렌더링하고 표시하는 가장 빠른 방법은 사용자 정의 테마를 생성하고 시작 화면을 표시하는 액티비티에 그것을 적용하는 것입니다.The quickest way to render and display the splash screen is to create a custom theme and apply it to an Activity that exhibits the splash screen. 액티비티는 렌더링될 때 테마를 로드하고 액티비티의 배경에 그림 리소스(테마에 의해 참조 됨)를 적용합니다.When the Activity is rendered, it loads the theme and applies the drawable resource (referenced by the theme) to the background of the activity. 이 방법은 레이아웃 파일을 만들 필요가 없습니다.This approach avoids the need for creating a layout file.

시작 화면은 브랜드 그림 표시, 모든 초기화 수행 및 모든 작업 시작 액티비티로 구현됩니다.The splash screen is implemented as an Activity that displays the branded drawable, performs any initializations, and starts up any tasks. 앱이 부트스트랩되면 시작 화면 액티비티는 메인 액티비티를 시작하고 응용 프로그램 백 스택에서 자신을 제거합니다.Once the app has bootstrapped, the splash screen Activity starts the main Activity and removes itself from the application back stack.

시작 화면용 그림 생성Creating a Drawable for the Splash Screen

시작 화면은 시작 화면 액티비티의 배경에 XML 그림을 표시합니다.The splash screen will display an XML drawable in the background of the splash screen Activity. 그렇게 하려면 이미지 표시를 위해 비트맵 이미지(예: JPG 또는 PNG)를 사용해야 합니다.It is necessary to use a bitmapped image (such as a PNG or JPG) for the image to display.

샘플 응용 프로그램은 splash_screen를 그릴 때를 정의 합니다.The sample application defines a drawable called splash_screen.xml. 이 예에서는 다음 xml에 표시 된 것 처럼 계층 목록을 사용 하 여 응용 프로그램의 시작 화면 이미지를 가운데에 맞춥니다.This drawable uses a Layer List to center the splash screen image in the application as shown in the following xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

layer-list는 시작 이미지를 @color/splash_background 리소스로 지정 된 배경색으로 가운데 맞춤 합니다.This layer-list centers the splash image on a background color specified by the @color/splash_background resource. 샘플 응용 프로그램은 리소스/값/색 .xml 파일에이 색을 정의 합니다.The sample application defines this color in the Resources/values/colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

Drawable 개체에 대 한 자세한 내용은 Android에서 사용할 Google 설명서를 참조 하세요.For more information about Drawable objects see the Google documentation on Android Drawable.

테마 구현Implementing a Theme

시작 화면 액티비티에 대한 사용자 정의 테마를 만들려면 values/styles.xml 파일을 편집(또는 추가)하고 시작 화면에 대한 새 style 요소를 만듭니다.To create a custom theme for the splash screen Activity, edit (or add) the file values/styles.xml and create a new style element for the splash screen. 샘플 values/style.xml 파일은 다음과 같이 MyTheme.Splash 이름을 가진 style을 가지고 있습니다.A sample values/style.xml file is shown below with a style named MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash은 엄격한 스파르타식입니다. 창 배경을 선언, 명시적으로 창에서 제목 표시줄을 제거하고 전체 화면임을 선언합니다.MyTheme.Splash is very spartan – it declares the window background, explicitly removes the title bar from the window, and declares that it is full-screen. 액티비티의 첫 번째 레이아웃을 올리기 전에 응용 프로그램의 UI를 에뮬레이트하는 시작 화면을 만들려는 경우, 자신의 스타일 정의에 windowContentOverlay 대신 windowBackground를 사용할 수 있습니다.If you want to create a splash screen that emulates the UI of your app before the activity inflates the first layout, you can use windowContentOverlay rather than windowBackground in your style definition. 이 경우 UI 에뮬레이션이 표시되도록 splash_screen.xml 그리기를 수정해야 합니다.In this case, you must also modify the splash_screen.xml drawable so that it displays an emulation of your UI.

시작 액티비티 생성Create a Splash Activity

이제 시작 이미지 및 모든 시작 작업 수행이 포함된 Android용 새 액티비티가 필요합니다.Now we need a new Activity for Android to launch that has our splash image and performs any startup tasks. 다음 코드는 완전한 시작 화면 구현의 예제입니다.The following code is an example of a complete splash screen implementation:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity는 이전 섹션에서 만든 테마를 명시적으로 사용 하 여 응용 프로그램의 기본 테마를 재정의 합니다.SplashActivity explicitly uses the theme that was created in the previous section, overriding the default theme of the application. 테마가 그릴 수 있는를 배경으로 선언 하므로 OnCreate 레이아웃을 로드할 필요가 없습니다.There is no need to load a layout in OnCreate as the theme declares a drawable as the background.

백 스택에서 액티비티를 제거하기 위한 NoHistory=true 특성을 설정하는 것이 중요합니다.It is important to set the NoHistory=true attribute so that the Activity is removed from the back stack. 시작 프로세스를 취소시키는 뒤로 가기 버튼을 막기 위해서 OnBackPressed 역시 재정의하고 아무 작업도 수행하지 않습니다.To prevent the back button from canceling the startup process, you can also override OnBackPressed and have it do nothing:

public override void OnBackPressed() { }

시작 작업은 OnResume에서 비동기적으로 수행됩니다.The startup work is performed asynchronously in OnResume. 이는 작업이 시작 화면 표시를 느리게 하거나 연기하지 않도록 하기 위해 필요합니다.This is necessary so that the startup work does not slow down or delay the appearance of the launch screen. 작업이 완료되면 SplashActivityMainActivity를 시작하고 사용자와 앱 간의 상호작용이 시작될 것입니다.When the work has completed, SplashActivity will launch MainActivity and the user may begin interacting with the app.

이 새로운 SplashActivityMainLauncher 특성을 true로 설정하여 응용 프로그램에 대한 시작 관리자 액티비티로 설정됩니다.This new SplashActivity is set as the launcher activity for the application by setting the MainLauncher attribute to true. 이제 SplashActivity가 시작 관리자 액티비티이므로 MainActivity.cs를 편집하고, MainActivity에서 MainLauncher 특성을 제거해야 합니다.Because SplashActivity is now the launcher activity, you must edit MainActivity.cs, and remove the MainLauncher attribute from MainActivity:

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

가로 모드Landscape Mode

이전 단계에서 구현한 시작 화면은 가로 및 세로 모드 모두 제대로 표시됩니다.The splash screen implemented in the previous steps will display correctly in both portrait and landscape mode. 그러나 일부 경우에 가로 및 세로 모드용 시작 화면을 분리할 필요가 있습니다(예를 들어 시작 이미지가 전체 화면인 경우).However, in some cases it is necessary to have separate splash screens for portrait and landscape modes (for example, if the splash image is full-screen).

가로 모드용 시작 화면을 추가하려면 다음 단계를 사용합니다.To add a splash screen for landscape mode, use the following steps:

  1. Resources/drawable 폴더에 사용하려는 시작 화면 이미지의 가로 버전을 추가합니다.In the Resources/drawable folder, add the landscape version of the splash screen image you want to use. 이 예제에서 splash_logo_land.png는 위 예제에서 사용된 로고의 가로 버전입니다(파란색 대신 흰색 문자 사용).In this example, splash_logo_land.png is the landscape version of the logo that was used in the above examples (it uses white lettering instead of blue).

  2. Resources/drawable 폴더에 이전에 정의했던 layer-list 그림의 가로 버전을 만듭니다(예를 들어 splash_screen_land.xml).In the Resources/drawable folder, create a landscape version of the layer-list drawable that was defined earlier (for example, splash_screen_land.xml). 이 파일에 시작 화면 이미지의 가로 버전에 대한 비트맵 경로를 설정합니다.In this file, set the bitmap path to the landscape version of the splash screen image. 다음 예제에서 splash_screen_land.xmlsplash_logo_land.png를 사용합니다.In the following example, splash_screen_land.xml uses splash_logo_land.png:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
        <color android:color="@color/splash_background"/>
      </item>
      <item>
        <bitmap
            android:src="@drawable/splash_logo_land"
            android:tileMode="disabled"
            android:gravity="center"/>
      </item>
    </layer-list>
    
  3. 리소스/값-육지 폴더가 아직 없는 경우 만듭니다.Create the Resources/values-land folder if it doesn't already exist.

  4. 파일 색 .xml스타일 .xml 에 추가 합니다. 이러한 파일은 기존 값/colors값/스타일 .xml 파일에서 복사 하 여 수정할 수 있습니다.Add the files colors.xml and style.xml to values-land (these can be copied and modified from the existing values/colors.xml and values/style.xml files).

  5. windowBackground에 대한 그림의 가로 버전을 사용하도록 values-land/style.xml을 수정합니다.Modify values-land/style.xml so that it uses the landscape version of the drawable for windowBackground. 이 예제에서는 splash_screen_land.xml을 사용하였습니다.In this example, splash_screen_land.xml is used:

    <resources>
      <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
      </style>
        <style name="MyTheme" parent="MyTheme.Base">
      </style>
      <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen_land</item>
        <item name="android:windowNoTitle">true</item>  
        <item name="android:windowFullscreen">true</item>  
        <item name="android:windowContentOverlay">@null</item>  
        <item name="android:windowActionBar">true</item>  
      </style>
    </resources>
    
  6. 시작 화면의 가로 버전용으로 사용하려는 색을 구성하려면 values-land/colors.xml을 수정합니다.Modify values-land/colors.xml to configure the colors you want to use for the landscape version of the splash screen. 이 예제에서 가로 모드용 시작 배경 색은 파란색으로 변경되었습니다.In this example, the splash background color is changed to blue for landscape mode:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <color name="primary">#2196F3</color>
      <color name="primaryDark">#1976D2</color>
      <color name="accent">#FFC107</color>
      <color name="window_background">#F5F5F5</color>
      <color name="splash_background">#3498DB</color>
    </resources>
    
  7. 빌드하고 앱을 다시 실행합니다.Build and run the app again. 시작 화면이 계속 표시되는 동안 가로 모드로 장치를 회전합니다.Rotate the device to landscape mode while the splash screen is still displayed. 다음과 같이 시작 화면이 가로 버전으로 변경됩니다.The splash screen changes to the landscape version:

    시작 화면을 가로 모드로 회전 Rotation of splash screen to landscape mode

참고로 가로 모드 시작 화면을 사용하면 항상 매끄럽지 못한 환경을 제공합니다.Note that the use of a landscape-mode splash screen does not always provide a seamless experience. 기본적으로 Android 앱은 장치가 이미 가로 모드일지라도 세로 모드로 시작하고 그것을 가로 모드로 전환합니다.By default, Android launches the app in portrait mode and transitions it to landscape mode even if the device is already in landscape mode. 결과적으로, 장치가 가로 모드에 있는 동안 앱을 실행하는 경우, 장치는 세로 시작 화면을 간략하게 표시한 다음 세로에서 가로 시작 화면으로 애니메이션하면서 회전합니다.As a result, if the app is launched while the device is in landscape mode, the device briefly presents the portrait splash screen and then animates rotation from the portrait to the landscape splash screen. 불행하게도, 이 초기 세로-가로 전환은 ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape이 시작 액티비티의 플래그에 지정되어 있을지라도 일어납니다.Unfortunately, this initial portrait-to-landscape transition takes place even when ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape is specified in the splash Activity's flags. 이 제한을 해결하는 가장 좋은 방법은 가로 세로 모드 모두 제대로 렌더링 가능한 단일 시작 화면 이미지를 만드는 것입니다.The best way to work around this limitation is to create a single splash screen image that renders correctly in both portrait and landscape modes.

요약Summary

이 가이드는 Xamarin.Android 응용 프로그램의 시작 화면을 구현하는 한 가지 방법, 다시 말해 시작 액티비티에 사용자 정의 테마 적용하기를 설명하였습니다.This guide discussed one way to implement a splash screen in a Xamarin.Android application; namely, applying a custom theme to the launch activity.