Kể từ Android 12,
SplashScreen API cho phép chạy ứng dụng
có ảnh động, bao gồm cả 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à hiệu ứng chuyển đổi sang chính ứng dụng đó. SplashScreen là một
Window và
do đó, bao gồm một
Activity.
Trải nghiệm màn hình chờ mang các thành phần thiết kế tiêu chuẩn vào mọi ứng dụng ra mắt, mà còn có thể tuỳ chỉnh được để ứng dụng của bạn có thể duy trì 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
SplashScreen
thư viện khả năng tương thích, gói API SplashScreen.
Cách hoạt động của màn hình chờ
Khi người dùng chạy một ứng dụng trong khi quy trình của ứng dụng không chạy (hệ thống bị nguội
start) hoặc Activity không ở
tạo ra (khởi động ấm),
các sự kiện sau đây xảy ra:
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 bạn định nghĩa.
Khi ứng dụng đã sẵn sàng, màn hình chờ sẽ đóng và ứng dụng sẽ xuất hiện.
Màn hình chờ không bao giờ hiển thị trong khởi động nóng.
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 phiên bản chế độ sáng và tối cho từng phần tử.
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 xem xét các yếu tố sau, được minh hoạ trong hình 2:
1 Biểu tượng ứng dụng phải là một vectơ vẽ được. Nó có thể là hình ả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. Biểu tượng trình chạy là biểu tượng mặc định.
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 độ tương phả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 bị che khuất.
4 Nền cửa sổ có màu đục đơn sắt. Nếu nền cửa sổ được đặt có màu trơn, nền đó sẽ được sử dụng theo mặc định nếu bạn không đặt thuộc tính này.
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 như biểu tượng thích ứng, như sau:
- Hình ảnh thương hiệu: phải có kích thước 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à nằm vừa trong hình 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 phải là 288×288 dp và vừa trong 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 tròn đều quay ẩn mặt (bị che giấu).
Ảnh động trên 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 biểu tượng động vào màn hình chờ của bạn sẽ có sức hấp dẫn rõ ràng về mặt thẩm mỹ và mang đến trải nghiệm cao cấp hơn. Nghiên cứu về người dùng cho thấy rằng nhận thức về quá trình khởi động sẽ ngắn hơn khi xem ảnh động.
Ảnh động trên màn hình chờ được nhúng trong các thành phần trình tự chạy, như như minh hoạ trong hình 4.
Nhập ảnh động: nội dung này bao gồm chế độ xem hệ thống cho màn hình chờ. Nó do hệ thống kiểm soát và không thể tuỳ chỉnh được.
Màn hình chờ (hiển thị trong phần "chờ" của trình tự): màn hình chờ có thể được tuỳ chỉnh, cho phép bạn cung cấp ảnh động biểu trưng của riêng mình và xây dựng thương hiệu. Ứng dụng phải đáp ứng các yêu cầu được mô tả trong trang này để hoạt động bình thường.
Thoát khỏi ảnh động: ảnh động này bao gồm ảnh động ẩn màn hình chờ. Nếu bạn muốn tuỳ chỉnh biểu ngữ, hãy sử dụng
SplashScreenViewvà . Bạn có thể chạy bất kỳ ảnh động nào trên đó với các chế độ cài đặt để biến đổi, độ mờ và màu sắc. Trong trường hợp này, 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ờ tự động hết thời gian, nên hãy đảm bảo chuyển động
được bỏ qua một cách thoải mái. Chỉ có thể loại bỏ màn hình chờ bằng onResume()
khi ứng dụng ổn định xét trên khía cạnh hình ảnh, vì vậy không có trình đơn vòng quay nào khác
cần thiết. Việc đưa ra giao diện chưa hoàn chỉnh có thể gây khó chịu cho người dùng và có thể
tạo ấn tượng khó dự đoán hoặc thiếu trau chuốt.
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. Ngày và đêm được hỗ trợ với Thư viện khả năng tương thích
SplashScreen.Đảm bảo biểu tượng động đáp ứng các thông số kỹ thuật sau:
- Định dạng: biểu tượng phải là AnimatedVectorDrawable (AVD) XML.
- Kích thước: biểu tượng AVD phải có kích thước gấp 4 lần của một biểu tượng thích ứng
, như sau:
- Vùng biểu tượng phải là 432 dp, nói cách khác, gấp 4 lần vùng Khu vực 108 dp của một biểu tượng thích ứng không được che giấu.
- Hai phần ba bên trong của hình ảnh được hiển thị trên biểu tượng trình chạy, và phải có giá trị là 288 dp, nói cách khác là gấp bốn lần 72 dp tạo thành vùng che phủ bên trong của 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 khởi động trễ, nhưng không được dài hơn 166 mili giây. Nếu ứng dụng thời gian khởi độ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ể tuỳ chỉnh thêm theo hướng dẫn trong phần giới thiệu về giữ màn hình chờ hiển thị trên màn hình trong thời gian dài hơn.
Tài nguyên trên màn hình chờ
Tải xuống ví dụ về bộ công cụ dành cho người mới bắt đầu, Video này minh hoạ cách tạo, định dạng và xuất ảnh động thành AVD. Gói này bao gồm những công cụ sau:
- Tệp dự án Adobe After Effects của ảnh động.
- Tệp XML AVD đã 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
windowBackground là một màu đơn. Để tuỳ chỉnh màn hình chờ, hãy thêm
cho giao diện ứng dụng.
Bạn có thể tuỳ chỉnh màn hình chờ của ứng dụng bằng cách thực hiện một trong những thao tác sau đây:
Đặt thuộc tính giao diện để thay đổi giao diện.
Hiển thị video trên màn hình trong thời gian dài hơn.
Tuỳ chỉnh ảnh động để đóng màn hình chờ.
Bắt đầu
Thư viện SplashScreen chính mang màn hình chờ của Android 12 đến với tất cả người dùng
thiết bị khỏi API 23. Để thêm thẻ đó vào dự án của bạn, hãy thêm đoạn mã sau vào
tệp build.gradle của bạn:
Groovy
dependencies {
implementation "androidx.core:core-splashscreen:1.0.0"
}
Kotlin
dependencies {
implementation("androidx.core:core-splashscreen:1.0.0")
}
Đặt giao diện cho màn hình chờ để thay đổi giao diện
Bạn có thể chỉ định các thuộc tính sau trong giao diện Activity để tuỳ chỉnh
màn hình chờ cho ứng dụng. Trường hợp bạn đã có một màn hình chờ cũ
Việc triển khai có sử dụng các thuộc tính như android:windowBackground, hãy cân nhắc
cung cấp tệp tài nguyên thay thế cho Android 12 trở lên.
Sử dụng
windowSplashScreenBackgroundđể tô nền bằng một màu đơn sắc:<item name="android:windowSplashScreenBackground">@color/...</item>Sử dụng
windowSplashScreenAnimatedIconđể thay thế biểu tượng ở giữa cửa sổ bắt đầu.Chỉ đối với ứng dụng nhắm đến Android 12 (API cấp 32), hãy làm như sau:
Nếu đối tượng có thể tạo được và có thể vẽ được thông qua
AnimationDrawablevàAnimatedVectorDrawable, đặtwindowSplashScreenAnimationDurationthành phát ảnh động trong khi hiển thị cửa sổ bắt đầu. Đây không phải là yêu cầu bắt buộc đối với Android 13, vì thời lượng được suy ra trực tiếp từAnimatedVectorDrawable.<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>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ờ. Đặt chế độ cài đặt này không ảnh hưởng đến thời gian thực tế mà màn hình chờ hiển thị, nhưng bạn có thể truy xuất nội dung đó khi tuỳ chỉnh lối thoát khỏi màn hình chờ ảnh động bằngSplashScreenView.getIconAnimationDuration. Hãy xem phần sau đây về giữ màn hình chờ hiển thị lâu hơn để biết thêm chi tiết.<item name="android:windowSplashScreenAnimationDuration">1000</item>Sử dụng
windowSplashScreenIconBackgroundColorđể đặt nền phía sau biểu tượng màn hình chờ. Điều này rất hữu ích nếu không đủ độ tương phản giữa nền cửa sổ và biểu tượng.<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>Bạn có thể sử dụng
windowSplashScreenBrandingImageđể đặt một hình ảnh hiển thị ở cuối màn hình chờ. Tuy nhiên, không nên sử dụng hình ảnh thương hiệu theo một số nguyên tắc thiết kế.<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>Bạn có thể sử dụng
windowSplashScreenBehaviorđể chỉ định liệu ứng dụng của bạn có luôn hiển thị biểu tượng trên màn hình chờ trong Android 13 trở lên. Giá trị mặc định là 0, hiển thị biểu tượng trên màn hình chờ nếu hoạt động chạy đặtsplashScreenStylethànhSPLASH_SCREEN_STYLE_ICON, hoặc tuân theo hành vi của hệ thống nếu hoạt động khởi chạy không chỉ định phong cách. Nếu bạn không bao giờ muốn hiện một màn hình chờ trống và luôn muốn biểu tượng động sẽ xuất hiện, hãy đặt giá trị này thành giá trịicon_preferred.<item name="android:windowSplashScreenBehavior">icon_preferred</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 bạn
cần phải tải một lượng dữ liệu nhỏ, chẳng hạn như tải cài đặt trong ứng dụng từ
ổ đĩa cục bộ không đồng bộ, bạn có thể sử dụng
ViewTreeObserver.OnPreDrawListener
tạm ngưng ứng dụng để vẽ khung đầu tiên.
Nếu hoạt động bắt đầu của bạn kết thúc trước khi vẽ, ví dụ: bằng cách không
thiết lập chế độ xem nội dung và hoàn tất trước onResume — lượt vẽ trước
bạn không cần trình nghe.
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;
}
}
});
}
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().
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();
});
}
Khi bắt đầu lệnh gọi lại này,
vectơ động có thể vẽ
trên màn hình chờ. 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:
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;
}
Tài nguyên khác
- Di chuyển phương thức triển khai màn hình chờ hiện tại sang Android 12 và cao hơn
- Ứng dụng Now in Android, cho thấy cách triển khai màn hình chờ trong thực tế