Màn hình chờ

Kể từ Android 12, ảnh động khởi chạy cho tất cả ứng dụng khi chạy trên thiết bị Android 12 trở lên. Bao gồm chuyển động trong ứng dụng khi khởi chạy, màn hình chờ hiển thị biểu tượng ứng dụng và chuyển đổi cho ứng dụng đó.

Trải nghiệm mới mang thiết kế tiêu chuẩn vào mỗi lần phát hành ứng dụng, nhưng bạn cũng có thể tùy chỉnh để ứng dụng có thể duy trì việc xây dựng thương hiệu độc đáo.

Ngoài việc sử dụng API nền tảng SplashScreen, bạn cũng có thể sử dụng thư viện ứng dụng SplashScreen, có bao gồm API SplashScreen.

Cách hoạt động của màn hình chờ

Khi người dùng mở ứng dụng mà quy trình ứng dụng không chạy (khởi động nguội) hoặc Hoạt động chưa được thiết lập (khởi động ấm), sẽ xảy ra trường hợp sau. (Màn hình chờ sẽ không hiển thị trong khi khởi động nóng.)

1. Hệ thống hiển thị màn hình chờ bằng cách sử dụng các giao diện và bất kỳ ảnh động nào đã xác định.

2. Khi ứng dụng sẵn sàng, màn hình chờ đóng và ứng dụng hiển thị .

Các thành phần và cơ chế của màn hình chờ

Các phần tử của màn hình chờ được xác định bởi các tệp tài nguyên XML trong Tệp kê khai Android. Có các chế độ sáng và tối cho từng phiên bản.

Các thành phần có thể tùy chỉnh của màn hình chờ bao gồm biểu tượng ứng dụng, nền biểu tượng và nền cửa sổ:

Hãy cân nhắc những thành phần sau:

1 biểu tượng ứng dụng nên là một vectơ vẽ được, và nó có thể là ảnh tĩnh hoặc động. Mặc dù ảnh động có thể có thời lượng không giới hạn, nhưng bạn không nên vượt quá 1.000 mili giây. Theo mặc định, biểu tượng trình chạy sẽ được sử dụng.

2 Nền biểu tượng là không bắt buộc và hữu ích nếu bạn cần độ tương phản cao hơn giữa biểu tượng và nền cửa sổ. Nếu bạn sử dụng biểu tượng thích ứng, nền sẽ hiển thị nếu có đủ độ tương phản với nền cửa sổ. 3 Giống như biểu tượng thích ứng, một phần ba nền trước được che kín.

4 Nền cửa sổ có màu đục đơn sắt. Nếu nền cửa sổ đặt có màu trơn, nó sẽ được dùng theo mặc định nếu không cài đặt thuộc tính trước.

Kích thước màn hình chờ

Biểu tượng màn hình chờ sử dụng thông số kỹ thuật giống biểu tượng Thích ứng như sau:

• Hình ảnh thương hiệu: kích thước phải là 200×80 dp.
• Biểu tượng ứng dụng có nền biểu tượng: kích thước phải là 240×240 dp và vừa với đường tròn có đường kính 160 dp.
• Biểu tượng ứng dụng không có nền biểu tượng: kích thước quy định là 288×288 dp, và phải vừa với hình tròn có đường kính 192 dp.

Ví dụ: nếu kích thước đầy đủ của hình ảnh là 300×300 dp, biểu tượng cần phải vừa với hình tròn có đường kính 200 dp. Mọi thứ bên ngoài vòng kết nối sẽ không hiển thị (che khuất).

Ảnh động Màn hình chờ và trình tự chạy

Độ trễ bổ sung thường liên quan đến việc khởi chạy ứng dụng khi khởi động nguội. Việc thêm một biểu tượng động vào màn hình chờ sẽ mang lại tính hấp dẫn về mặt thẩm mỹ và mang lại trải nghiệm cao cấp hơn, ngoài ra còn có lợi ích khác: nghiên cứu về người dùng cho thấy thời gian khởi động dự kiến ít hơn khi xem ảnh động.

Ảnh động màn hình chờ được nhúng trong các thành phần trình tự phát hành sau đây.

1. Nhập ảnh động: Nội dung này bao gồm chế độ xem hệ thống cho màn hình chờ. Hệ thống kiểm soát tính năng này và không thể tùy chỉnh được.

2. Màn hình chờ: Bạn có thể tùy chỉnh màn hình chờ, cho phép bạn cung cấp hoạt ảnh và biểu tượng thương hiệu dạng biểu trưng của riêng mình. Nó phải đáp ứng các yêu cầu được nêu trong tài liệu này để hoạt động đúng cách.

3. Thoát khỏi ảnh động: Ảnh này bao gồm cảnh chạy ảnh động sẽ ẩn màn hình chờ. Nếu bạn muốn tùy chỉnh, hãy truy cập vào SplashScreenViewvà biểu tượng của tùy chọn đó, đồng thời có thể chạy mọi ảnh động với tùy chọn cài đặt chuyển đổi, độ mờ và màu sắc. Trong trường hợp đó, hãy xoá màn hình chờ theo cách thủ công khi ảnh động hoàn tất.

Khi chạy hoạt ảnh biểu tượng, bạn sẽ có thể bỏ qua trình tự trong các trường hợp ứng dụng đã sẵn sàng trước đó. Ứng dụng kích hoạt onResume() hoặc màn hình chờ sẽ tự động hết thời gian để đảm bảo người dùng có thể bỏ qua chuyển động. Bạn chỉ nên loại bỏ màn hình chờ bằng onResume() khi ứng dụng ổn định từ góc độ hình ảnh, vì vậy, bạn không cần thêm dây ghim. Việc cung cấp giao diện chưa hoàn chỉnh có thể gây khó chịu cho người dùng và có thể gây ấn tượng khó dự đoán hoặc thiếu đánh bóng.

Yêu cầu ảnh động trên màn hình chờ

Màn hình chờ của bạn phải tuân thủ các thông số kỹ thuật sau:

• Đặt màu nền cho một cửa sổ mà không có độ trong suốt. Chế độ ban ngày và ban đêm đều được hỗ trợ với thư viện ứng dụng Splash Screen.

• Đảm bảo biểu tượng động đáp ứng các thông số kỹ thuật sau:

  • Định dạng: Đây phải là định dạng XML Ảnh động có thể vẽ (AVD).
  • Kích thước: Một biểu tượng AVD phải có kích thước gấp bốn lần biểu tượng thích ứng, như sau:
    • Khu vực của biểu tượng phải là 432 dp (nói cách khác, là 4 lần 108 dp của khu vực của một biểu tượng thích ứng không được che giấu).
    • Hai phần ba nội dung của hình ảnh hiển thị trên biểu tượng trình chạy, và phải có kích thước 288 dp (nói cách khác, gấp bốn lần 72 dp tạo thành khu vực che kín bên trong của một biểu tượng thích ứng).
  • Thời lượng: Bạn không nên vượt quá 1.000 mili giây trên điện thoại. Bạn có thể sử dụng bắt đầu khởi động nhưng không được dài hơn 166 mili giây. Nếu thời gian khởi động ứng dụng dài hơn 1.000 mili giây, hãy cân nhắc sử dụng ảnh động lặp lại.

• Thiết lập thời gian thích hợp để loại bỏ màn hình chờ, điều này xảy ra khi ứng dụng của bạn vẽ khung hình đầu tiên. Bạn có thể tùy chỉnh thêm phần này như mô tả trong tài liệu này trong phần Giữ màn hình chờ trên màn hình trong khoảng thời gian dài hơn.

Tài nguyên trên Màn hình chờ

Tải ví dụ về bộ công cụ dành cho người mới bắt đầu để xem cách tạo, định dạng và xuất ảnh động thành video AVD.

• Tệp dự án Adobe After Effects của ảnh động
• Tệp AVD XML đã xuất cuối cùng
• Ảnh gif mẫu của ảnh động

Bằng việc tải các tệp này xuống, bạn đồng ý với Điều khoản dịch vụ của Google.

Chính sách quyền riêng tư của Google mô tả cách chúng tôi xử lý dữ liệu trong dịch vụ này.

Tùy chỉnh màn hình chờ trong ứng dụng

Theo mặc định, SplashScreen sử dụng windowBackground của giao diện nếu đó là một màu đơn với biểu tượng trình chạy. Tùy chỉnh màn hình chờ bằng cách thêm các thuộc tính vào giao diện ứng dụng.

Có thể tùy chỉnh màn hình chờ của ứng dụng theo một trong những cách sau:

• Đặt thuộc tính giao diện (theme) để thay đổi giao diện

• Lưu giữ video trên màn hình trong thời gian dài hơn

• Tùy chỉnh ảnh động để đóng màn hình chờ

Đặt giao diện cho màn hình chờ để thay đổi giao diện

Có thể quy định thuộc tính sau trong chủ đề Hoạt động để tùy chỉnh màn hình chờ cho ứng dụng. Nếu đã triển khai màn hình chờ trước đó sử dụng các thuộc tính như android:windowBackground, hãy cân nhắc cung cấp một tệp tài nguyên thay thế cho Android 12 trở lên.

1. Sử dụng windowSplashScreenBackgroundđể tô nền bằng một màu đơn sắc:

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

2. Sử dụng windowSplashScreenAnimatedIconđể thay thế biểu tượng ở giữa cửa sổ bắt đầu. Nếu có thể tạo và vẽ được đối tượng qua AnimationDrawable và AnimatedVectorDrawable, cần phải đặt windowSplashScreenAnimationDuration để phát ảnh động trong khi hiển thị cửa sổ bắt đầu.

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

3. Sử dụng windowSplashScreenAnimationDurationbiểu thị thời lượng của ảnh động trên biểu tượng màn hình chờ. Thiết lập này không ảnh hưởng đến thời gian thực tế màn hình chờ hiển thị, nhưng bạn có thể truy xuất ảnh này khi tùy chỉnh ảnh động màn hình chờ sử dụngSplashScreenView#getIconAnimationDuration. Xem Giữ màn hình chờ lâu hơn trong phần sau để biết thêm chi tiết.

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

4. Sử dụng windowSplashScreenIconBackgroundColor để đặt nền phía sau biểu tượng màn hình chờ. Cách này hữu ích trong trường hợp nền cửa sổ và biểu tượng có độ tương phản kém.

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

5. Có thể sử dụng tính năng windowSplashScreenBrandingImageđể đặt hình ảnh hiển thị ở cuối màn hình chờ. Không nên sử dụng hình ảnh thương hiệu theo khuyến nghị của hướng dẫn thiết kế.

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

Giữ màn hình chờ trên màn hình lâu hơn

Màn hình chờ sẽ đóng ngay khi ứng dụng vẽ khung hình đầu tiên. Nếu cần tải một dữ liệu nhỏ, chẳng hạn như tùy chọn cài đặt trong ứng dụng từ một ổ đĩa cục bộ, có thể sử dụng ViewTreeObserver.OnPreDrawListenerđể tạm ngưng ứng dụng vẽ khung hình đầu tiên.

Nếu hoạt động bắt đầu kết thúc trước khi vẽ (ví dụ: do không đặt chế độ xem nội dung và hoàn tất trước onResume), bạn không cần sử dụng trình nghe trước khi vẽ.

// 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 if the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready; start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content is not 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 if the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready; start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content is not ready; suspend.
                        return false;
                    }
                }
            });
}

Tùy chỉnh ảnh động để đóng màn hình chờ

Có thể tùy chỉnh thêm ảnh động trên màn hình chờ quaActivity.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();
    });
}

Từ lúc bắt đầu lệnh gọi lại này, hình vẽ vectơ độngtrên màn hình chờ đã bắt đầu. Tùy thuộc vào thời điểm khởi chạy ứng dụng, đối tượng vẽ có thể nằm ở giữa ảnh động của ứng dụng. Sử dụngSplashScreenView.getIconAnimationStartđể biết thời điểm bắt đầu ảnh động. Có thể tính thời lượng còn lại của ảnh động biểu tượng như sau:

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