Başlangıç ekranları

Android 12 sürümünden itibaren SplashScreen API uygulamaların başlatılmasına izin verir Başlangıçta uygulama içi hareket içeren animasyonlu bir başlangıç ekranı hem de uygulamanızın kendisine geçiş. SplashScreen, Window ve Bu nedenle, Activity.

Şekil 1. Başlangıç ekranı.

Başlangıç ekranı deneyimi, her uygulamaya standart tasarım öğeleri ekler Ancak özelleştirilebilir hale getirerek uygulamanızın benzersiz markasını koruyabilirsiniz.

SplashScreen platform API'sinin yanı sıra şunu da kullanabilirsiniz: SplashScreen SplashScreen API'yi sarmalayan karşılaştırma kitaplığını kullanabilirsiniz.

Başlangıç ekranının işleyiş şekli

Kullanıcı, uygulamanın işlemi çalışmıyorken bir uygulamayı başlatırsa (soğuk başlat) yoksa Activity değeri değil (hazır başlangıç), aşağıdaki olaylar gerçekleşir:

  1. Sistem, başlangıç ekranını göstermek istediğiniz temaları ve animasyonları kullanarak tanımlar.

  2. Uygulama hazır olduğunda başlangıç ekranı kapatılır ve uygulama görüntülenir.

Açılış ekranı hazır başlatma:

Başlangıç ekranındaki öğeler ve mekanikler

Başlangıç ekranı öğeleri, Android manifest dosyası. Her öğenin açık ve koyu mod sürümleri vardır.

Başlangıç ekranının özelleştirilebilir öğeleri; uygulama simgesi, simge ve pencere arka planı seçin:

Başlangıç ekranında bulunan öğeleri gösteren resim
Şekil 2. Özelleştirilebilir sıçrama öğeleri tıklayın.

Şekil 2'de gösterilen aşağıdaki unsurları göz önünde bulundurun:

1 Uygulama simgesi, çekilebilir bir vektör olmalıdır. Google statik veya animasyonlu olabilir. Animasyonların süresi sınırsız olabilse de 1.000 milisaniyeyi aşmamanızı öneririz. Başlatıcı simgesi varsayılandır.

2 Simge arka planı aşağıdaki durumlarda isteğe bağlı ve yararlıdır: ve simge ile pencere arka planı arasında daha fazla kontrasta ihtiyacınız var. Bir uyarlanabilir simge kullanıyorsanız Pencere arka planıyla yeterli kontrast varsa arka plan görüntülenir.

3 Uyarlanabilir simgelerde olduğu gibi ön plan maskelenmiş.

4 Pencere arka planı tek bir öğeden oluşur. opak renk. Pencere arka planı ayarlanmışsa ve düz bir renkteyse, arka plan rengi kullanılır. özellik ayarlanmazsa varsayılan olarak kullanılır.

Başlangıç ekranı boyutları

Başlangıç ekranı simgesi, uyarlanabilir simgeler şu şekildedir:

  • Markalı resim: Bu 200×80 dp olmalıdır.
  • Simge arka planı olan uygulama simgesi: 240×240 dp olmalı ve 160 dp boyutunda daire.
  • Simge arka planı olmayan uygulama simgesi: 288×288 dp boyutunda olmalı ve simge arka plana sığmalıdır 192 dp boyutunda bir daire.

Örneğin, bir resmin tam boyutu 300×300 dp ise simgenin 200 dp çaplı daire içinde. Çemberin dışındaki her şey döner görünmez (maskeli).

Düz ve şeffaf arka plan için farklı simge boyutlarını gösteren resim
Şekil 3. Şunun için başlangıç ekranı simge boyutları: düz ve şeffaf arka planlara geçirin.

Başlangıç ekranı animasyonları ve başlatma sırası

Ek gecikme genellikle uygulamanın baştan başlatma sırasında başlatılmasıyla ilişkilidir. Başlangıç ekranınıza animasyonlu simge eklemek bariz bir estetik görünüm sunar ve daha üst düzey bir deneyim sunar. Kullanıcı araştırması, algılanan startup’ların süre daha kısadır.

Başlangıç ekranı animasyonu, aşağıdaki gibi başlatma dizisi bileşenlerine yerleştirilir: Şekil 4'te gösterilmiştir.

Başlatıcı simgesine dokunulduğunda ve simge büyüdükçe ekranı doldurduğunda, art arda on iki karede başlatma sırasını gösteren resim
Şekil 4. Başlatma sırası.

  1. Animasyon girme: Başlangıç ekranına giden sistem görünümünden oluşur. Google sistem tarafından kontrol edilir ve özelleştirilemez.

  2. Başlangıç ekranı (dizinin "bekleme" bölümünde gösterilir): giriş Bu özelleştirilebilir logo, kendi logo animasyonunuzu ve marka bilinci oluşturma. Şartları karşılamalıdır. düzgün şekilde çalışmasını sağlamalısınız.

  3. Animasyondan çık: Bu, başlangıç ekranını gizleyen animasyondan oluşur. Özelleştirmek isterseniz SplashScreenView ve simgesini tıklayın. Bunlarda, dönüştürme ayarları ile herhangi bir animasyon çalıştırabilirsiniz. opaklık ve renk. Bu durumda, sona ereceğini unutmayın.

Uygulama başlatma, simge animasyonunu çalıştırırken size hazır olduğu durumlar içindir. Uygulama onResume() tetikler veya başlangıç ekranı otomatik olarak zaman aşımına uğrar. Böylece, hareketin atlandı. Başlangıç ekranı yalnızca onResume() ile kapatılmalıdır uygulama görsel açıdan kararlı olduğunda, yani uygulamanın gerekir. Eksik bir arayüze sahip olmak kullanıcılar için rahatsız edici olabilir ve öngörülemezlik veya kötülük izlenimi yaratır.

Başlangıç ekranı animasyonu gereksinimleri

Başlangıç ekranınız aşağıdaki özelliklere uygun olmalıdır:

  • Saydamlığın olmadığı bir tek pencere arka plan rengi ayarlayın. Gündüz ve Gece modları şununla desteklenir: SplashScreen karşılaştırma kitaplığı.

  • Animasyonlu simgenin aşağıdaki özellikleri karşıladığından emin olun:

    • Biçim: Simge AnimatedVectorDrawable (AVD) XML.
    • Boyutlar: AVD simgesi, uyarlanabilir simgenin dört katı boyutunda olmalıdır. aşağıdaki gibi görebilirsiniz:
      • Simge alanı 432 dp, diğer bir deyişle, alan adının Maskesiz uyarlanabilir bir simgenin 108 dp alanı.
      • Görselin üçte ikisi başlatıcı simgesinde görünür, ve 288 dp, diğer bir deyişle, sisteme bağlanan 72 dp'nin uyarlanabilir bir simgenin iç maskeli alanını oluşturur.
    • Süre: Telefonlarda 1.000 ms.yi aşmamanızı öneririz. Tekliflerinizi otomatikleştirmek ve optimize etmek için bir gecikme yaşanabilir, ancak bu süre 166 ms'den uzun olamaz. Uygulama başlatma süresi 1.000 ms'den uzunsa döngüsel bir animasyon kullanmayı düşünebilirsiniz.

  • Başlangıç ekranını kapatmak için uygun bir zaman belirleyin. ilk karesini çizer. Bunu açıklandığı gibi daha fazla özelleştirebilirsiniz konu başlıklı bölümde başlangıç ekranını daha uzun süre ekranda tutmaya.

Başlangıç ekranı kaynakları

5.Şekil Örnek ortalama görüntüleme süresi

İndirin: örnek başlangıç kiti, Bu videoda, animasyonların nasıl oluşturulacağını, biçimlendirileceğini ve ortalama görüntüleme süresinde (AVD) nasıl dışa aktarılacağını gösterilmektedir. Bunlardan bazıları:

  • Animasyonun Adobe After Effects proje dosyası.
  • Dışa aktarılan nihai ortalama AVD XML dosyası.
  • Animasyonun örnek GIF'i.

Bu dosyaları indirerek şunları kabul etmiş olursunuz: Google Hizmet Şartları.

Google Gizlilik Politikası'nda, verileri bu hizmette işlenir.

Uygulamanızdaki başlangıç ekranını özelleştirme

Varsayılan olarak SplashScreen, aşağıdaki durumlarda temanızın windowBackground özelliğini kullanır: windowBackground tek bir renktir. Başlangıç ekranını özelleştirmek için uygulama temasıyla ilişkilendirmesine yardımcı olur.

Aşağıdakilerin birini yaparak uygulamanızın başlangıç ekranını özelleştirebilirsiniz:

  • Görünümünü değiştirmek için tema özelliklerini ayarlayın.

  • Ekranda daha uzun süre tutun.

  • Başlangıç ekranını kapatmak için animasyonu özelleştirin.

Başlayın

Temel SplashScreen kitaplığı, Android 12 başlangıç ekranını herkese sunar. API 23'teki cihazlar. Bu snippet'i projenize eklemek için build.gradle dosyanız:

Eski

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

Kotlin

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

Başlangıç ekranının görünümünü değiştirmek için bir tema ayarlayın

Özelleştirmek için Activity temanızda aşağıdaki özellikleri belirtebilirsiniz başlangıç ekranını seçin. Zaten eski bir başlangıç ekranınız varsa android:windowBackground gibi özelliklerin kullanıldığı bir uygulama için Android 12 ve sonraki sürümler için alternatif bir kaynak dosyası sağlar.

  1. Tekliflerinizi otomatikleştirmek ve optimize etmek için windowSplashScreenBackground arka planı belirli bir renkle doldurmak için:

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

  2. Tekliflerinizi otomatikleştirmek ve optimize etmek için windowSplashScreenAnimatedIcon simgesini tıklayın.

    Yalnızca Android 12'yi (API düzeyi 32) hedefleyen uygulamalar için aşağıdakileri yapın:

    Nesne animasyon haline getirilebilir ve AnimationDrawable ve AnimatedVectorDrawable için windowSplashScreenAnimationDuration olarak ayarla animasyonu oynatır. Bu gerekli değildir çünkü süre doğrudan AnimatedVectorDrawable

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

  3. Tekliflerinizi otomatikleştirmek ve optimize etmek için windowSplashScreenAnimationDuration başlangıç ekranı simge animasyonunun süresini belirtin. Bunu ayarlama çalışma zamanı üzerinde herhangi bir etkisi yoktur. ancak başlangıç ekranından çıkışını özelleştirerek animasyon SplashScreenView.getIconAnimationDuration. Aşağıdaki bölümde Başlangıç ekranını ekranda daha uzun süre tutma inceleyebilirsiniz.

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

  4. windowSplashScreenIconBackgroundColor kullanın başlangıç ekranı simgesinin arkasında bir arka plan ayarlayın. Bu özellik, pencerenin arka planıyla simge arasında yeterli kontrast yok.

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

  5. Tekliflerinizi otomatikleştirmek ve optimize etmek için windowSplashScreenBrandingImage simgesini tıklayın. Ancak marka imajı kullanılmaması önerilir.

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

  6. Tekliflerinizi otomatikleştirmek ve optimize etmek için windowSplashScreenBehavior uygulamanızın, simgenin başlangıç ekranında her zaman Android 13 ve sonraki sürümler. Varsayılan değer 0'dır. Bu değer, simgeyi başlatma etkinliği, splashScreenStyle öğesini SPLASH_SCREEN_STYLE_ICON, veya başlatma etkinliğinde bir stiline sahip. Hiçbir zaman boş bir başlangıç ekranı göstermemeyi tercih ediyor ve her zaman animasyonlu simgeyi icon_preferred değerine ayarlayın.

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

Başlangıç ekranını ekranda daha uzun süre açık tutma

Uygulamanız ilk karesini çizer çekmez başlangıç ekranı kapanır. Şu durumda: az miktarda veri yüklemesi gerekir (örneğin, yerel diski eşzamansız olarak kullanmak için ViewTreeObserver.OnPreDrawListener ilk karesini çizmek için uygulamayı askıya alın.

Başlangıç etkinliğiniz çizimden önce bitiyorsa (örneğin, içerik görünümünü ayarlayıp onResume (çizim öncesi) öncesinde bitirme bu gereklidir.

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

Java

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

Başlangıç ekranını kapatmak için animasyonu özelleştirme

Başlangıç ekranının animasyonunu 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()
    }
}

Java

@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();
    });
}

Bu geri aramanın başlangıcında animasyonlu çekilebilir vektör simgesi başlatılır. Uygulama başlatma süresine bağlı olarak, çekilebilir öğenin animasyonunun ortasında olması gerekir. Tekliflerinizi otomatikleştirmek ve optimize etmek için SplashScreenView.getIconAnimationStart animasyonun ne zaman başladığını bilmek önemlidir. Görevin kalan süresini aşağıdaki gibi simge animasyonu gösterilir:

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

Ek kaynaklar