ตั้งแต่ Android 12 เป็นต้นไป API SplashScreen จะช่วยให้แอปเปิดขึ้นพร้อมภาพเคลื่อนไหว ซึ่งรวมถึงการเคลื่อนไหวเข้าสู่แอปเมื่อเปิด หน้าจอเริ่มต้น (Splash Screen) ที่แสดงไอคอนแอป และการเปลี่ยนเข้าสู่แอป SplashScreen เป็นWindow จึงครอบคลุมActivity
ประสบการณ์การใช้งานหน้าจอเริ่มต้น (Splash Screen) จะนำองค์ประกอบการออกแบบมาตรฐานมาใช้กับการเปิดแอปทุกครั้ง แต่ก็ปรับแต่งได้เพื่อให้แอปยังคงเอกลักษณ์ของแบรนด์ไว้ได้
นอกจากการใช้ API ของแพลตฟอร์ม SplashScreen แล้ว คุณยังใช้ไลบรารีความเข้ากันได้ SplashScreen ซึ่งรวม API ของ SplashScreen ไว้ด้วยได้
วิธีการทำงานของหน้าจอเริ่มต้น (Splash Screen)
เมื่อผู้ใช้เปิดแอปขณะที่กระบวนการของแอปไม่ได้ทำงานอยู่ (Cold Start) หรือไม่ได้สร้าง Activity (Warm Start) เหตุการณ์ต่อไปนี้จะเกิดขึ้น
ระบบจะแสดงหน้าจอเริ่มต้น (Splash Screen) โดยใช้ธีมและภาพเคลื่อนไหวที่คุณกำหนด
เมื่อแอปพร้อมแล้ว หน้าจอเริ่มต้น (Splash Screen) จะปิดลงและแอปจะแสดงขึ้น
หน้าจอเริ่มต้น (Splash Screen) จะไม่แสดงในระหว่างการเริ่มระบบแบบร้อน
องค์ประกอบและกลไกของหน้าจอเริ่มต้น (Splash Screen)
องค์ประกอบของหน้าจอเริ่มต้น (Splash Screen) จะกำหนดโดยไฟล์ทรัพยากร XML ในไฟล์ Manifest ของ Android แต่ละองค์ประกอบจะมีเวอร์ชันโหมดสว่างและโหมดมืด
องค์ประกอบที่ปรับแต่งได้ของหน้าจอเริ่มต้น (Splash Screen) ประกอบด้วยไอคอนแอป พื้นหลังไอคอน และพื้นหลังหน้าต่าง ดังนี้
พิจารณาองค์ประกอบต่อไปนี้ที่แสดงในรูปที่ 2
1 ไอคอนแอปต้องเป็น Vector Drawable โดยอาจเป็นแบบคงที่หรือแบบเคลื่อนไหวก็ได้ แม้ว่าภาพเคลื่อนไหวจะมีความยาวได้ไม่จำกัด แต่เราขอแนะนำว่าไม่ควรเกิน 1,000 มิลลิวินาที ไอคอน Launcher จะเป็นค่าเริ่มต้น
2 พื้นหลังไอคอนเป็นตัวเลือกเสริมและมีประโยชน์หากคุณต้องการให้ไอคอนและพื้นหลังหน้าต่างมีคอนทราสต์มากขึ้น หากคุณใช้ไอคอนแบบปรับอัตโนมัติ พื้นหลังของไอคอนจะแสดงหากมีคอนทราสต์เพียงพอกับพื้นหลังของหน้าต่าง
3 เช่นเดียวกับไอคอนแบบปรับอัตโนมัติ ระบบจะมาสก์ 1 ใน 3 ของพื้นหน้า
4 พื้นหลังของหน้าต่างประกอบด้วยสีทึบสีเดียว หากมีการตั้งค่าพื้นหลังของหน้าต่างและเป็นสีธรรมดา ระบบจะใช้พื้นหลังดังกล่าวโดยค่าเริ่มต้นหากไม่ได้ตั้งค่าแอตทริบิวต์
ขนาดหน้าจอเริ่มต้น (Splash Screen)
ไอคอนหน้าจอเริ่มต้น (Splash Screen) ใช้ข้อกำหนดเฉพาะเดียวกันกับไอคอนแบบปรับอัตโนมัติ ดังนี้
- รูปภาพที่มีแบรนด์: ต้องมีขนาด 200×80 dp
- ไอคอนแอปที่มีพื้นหลังไอคอน: ต้องมีขนาด 240×240 dp และพอดีกับวงกลมที่มีเส้นผ่านศูนย์กลาง 160 dp
- ไอคอนแอปที่ไม่มีพื้นหลังไอคอน: ต้องมีขนาด 288×288 dp และพอดีกับวงกลมที่มีเส้นผ่านศูนย์กลาง 192 dp
เช่น หากรูปภาพมีขนาดเต็ม 300×300 dp ไอคอนจะต้องพอดีกับวงกลมที่มีเส้นผ่านศูนย์กลาง 200 dp ทุกอย่างที่อยู่นอกวงกลมจะมองไม่เห็น (ถูกมาสก์)
ภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) และลำดับการเปิดใช้งาน
เวลาในการตอบสนองเพิ่มเติมมักจะเชื่อมโยงกับการเปิดแอปแบบ Cold Start การเพิ่มไอคอนแบบเคลื่อนไหวลงในหน้าจอเริ่มต้น (Splash Screen) จะช่วยเพิ่มความสวยงามและมอบประสบการณ์การใช้งานที่พรีเมียมยิ่งขึ้น การศึกษาวิจัยผู้ใช้แสดงให้เห็นว่าเวลาเริ่มต้นที่รับรู้จะน้อยลงเมื่อดูภาพเคลื่อนไหว
ภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) จะฝังอยู่ในคอมโพเนนต์ลำดับการเปิดใช้งาน ดังที่แสดงในรูปที่ 4
ภาพเคลื่อนไหวเมื่อเข้าสู่แอป: ประกอบด้วยมุมมองระบบไปยังหน้าจอเริ่มต้น (Splash Screen) ซึ่งระบบจะเป็นผู้ควบคุมและปรับแต่งไม่ได้
หน้าจอเริ่มต้น (แสดงระหว่างส่วน "รอ" ของลำดับ): หน้าจอเริ่มต้นสามารถปรับแต่งได้ ซึ่งช่วยให้คุณใส่ภาพเคลื่อนไหวของโลโก้และการสร้างแบรนด์ของคุณเองได้ โดยต้องเป็นไปตามข้อกำหนดที่อธิบายไว้ในหน้านี้เพื่อให้ทำงานได้อย่างถูกต้อง
ภาพเคลื่อนไหวขาออก: ประกอบด้วยภาพเคลื่อนไหวที่ซ่อนหน้าจอเริ่มต้น (Splash Screen) หากต้องการปรับแต่ง ให้ใช้
SplashScreenViewและไอคอนของแอป คุณสามารถเรียกใช้ภาพเคลื่อนไหวใดก็ได้ในองค์ประกอบเหล่านี้ โดยมีการตั้งค่าสำหรับการเปลี่ยนรูปแบบ ความทึบแสง และสี ในกรณีนี้ ให้นำหน้าจอเริ่มต้นออกด้วยตนเองเมื่อภาพเคลื่อนไหวเสร็จสิ้น
เมื่อเรียกใช้ภาพเคลื่อนไหวของไอคอน การเปิดแอปจะให้ตัวเลือกในการข้ามลำดับในกรณีที่แอปพร้อมใช้งานก่อน แอปจะทริกเกอร์ onResume() หรือหน้าจอเริ่มต้น (Splash Screen) จะหมดเวลาโดยอัตโนมัติ ดังนั้นโปรดตรวจสอบว่าผู้ใช้สามารถข้ามการเคลื่อนไหวได้อย่างสะดวก หน้าจอเริ่มต้น (Splash Screen) ต้องปิดด้วย onResume() เท่านั้นเมื่อแอปมีความเสถียรจากมุมมองด้านภาพ จึงไม่จำเป็นต้องมีไอคอนหมุนเพิ่มเติม การเปิดตัวอินเทอร์เฟซที่ไม่สมบูรณ์อาจทำให้ผู้ใช้รู้สึกไม่พอใจและอาจสร้างความรู้สึกว่าคาดเดาไม่ได้หรือขาดความประณีต
ข้อกำหนดด้านภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen)
หน้าจอเริ่มต้น (Splash Screen) ต้องเป็นไปตามข้อกำหนดต่อไปนี้
ตั้งค่าสีพื้นหลังของหน้าต่างเดียวโดยไม่มีความโปร่งใส ไลบรารีความเข้ากันได้
SplashScreenรองรับโหมดกลางวันและกลางคืนตรวจสอบว่าไอคอนแบบเคลื่อนไหวเป็นไปตามข้อกำหนดต่อไปนี้
- รูปแบบ: ไอคอนต้องเป็น XML ของ AnimatedVectorDrawable (AVD)
- ขนาด: ไอคอน AVD ต้องมีขนาดเป็น 4 เท่าของไอคอนแบบปรับอัตโนมัติ ดังนี้
- พื้นที่ไอคอนต้องมีขนาด 432 dp หรือกล่าวคือ 4 เท่าของพื้นที่ 108 dp ของไอคอนแบบปรับอัตโนมัติที่ไม่มีมาสก์
- พื้นที่ 2 ใน 3 ด้านในของรูปภาพจะมองเห็นได้ในไอคอน Launcher และต้องมีขนาด 288 dp หรือพูดอีกอย่างคือ 4 เท่าของ 72 dp ซึ่งเป็นพื้นที่มาสก์ด้านในของไอคอนแบบปรับอัตโนมัติ
- ระยะเวลา: เราขอแนะนำว่าไม่ควรเกิน 1,000 มิลลิวินาทีในโทรศัพท์ คุณสามารถใช้การเริ่มแบบหน่วงเวลาได้ แต่ต้องไม่เกิน 166 มิลลิวินาที หากเวลาเริ่มต้นของแอปนานกว่า 1,000 มิลลิวินาที ให้พิจารณาใช้ภาพเคลื่อนไหวแบบวนซ้ำ
กำหนดเวลาที่เหมาะสมในการปิดหน้าจอเริ่มต้น (Splash Screen) ซึ่งจะเกิดขึ้นเมื่อแอปวาดเฟรมแรก คุณปรับแต่งเพิ่มเติมได้ตามที่อธิบายไว้ในส่วนเกี่ยวกับการแสดงหน้าจอเริ่มต้น (Splash Screen) บนหน้าจอเป็นระยะเวลานานขึ้น
แหล่งข้อมูลเกี่ยวกับหน้าจอเริ่มต้น (Splash Screen)
ดาวน์โหลดชุดเริ่มต้นตัวอย่าง ซึ่งสาธิตวิธีสร้าง จัดรูปแบบ และส่งออกภาพเคลื่อนไหวไปยัง AVD ซึ่งรวมถึงข้อมูลต่อไปนี้
- ไฟล์โปรเจ็กต์ Adobe After Effects ของภาพเคลื่อนไหว
- ไฟล์ XML ของ AVD ที่ส่งออกขั้นสุดท้าย
- ตัวอย่าง GIF ของภาพเคลื่อนไหว
การดาวน์โหลดไฟล์เหล่านี้หมายความว่าคุณยอมรับข้อกำหนดในการให้บริการของ Google
นโยบายความเป็นส่วนตัวของ Google อธิบายถึงวิธีที่เราใช้จัดการข้อมูลในบริการนี้
ปรับแต่งหน้าจอเริ่มต้น (Splash Screen) ในแอป
โดยค่าเริ่มต้น SplashScreen จะใช้windowBackgroundของธีมหากwindowBackgroundเป็นสีเดียว หากต้องการปรับแต่งหน้าจอเริ่มต้น (Splash Screen) ให้เพิ่มแอตทริบิวต์ลงในธีมของแอป
คุณปรับแต่งหน้าจอเริ่มต้น (Splash Screen) ของแอปได้โดยทำอย่างใดอย่างหนึ่งต่อไปนี้
ตั้งค่าแอตทริบิวต์ธีมเพื่อเปลี่ยนลักษณะที่ปรากฏ
แสดงไว้บนหน้าจอนานขึ้น
ปรับแต่งภาพเคลื่อนไหวสำหรับการปิดหน้าจอเริ่มต้น (Splash Screen)
เริ่มต้นใช้งาน
ไลบรารี SplashScreen หลักจะนำหน้าจอเริ่มต้น (Splash Screen) ของ Android 12 มาใช้กับอุปกรณ์ทั้งหมดตั้งแต่ API 23 หากต้องการเพิ่มลงในโปรเจ็กต์ ให้เพิ่มข้อมูลโค้ดต่อไปนี้ลงในไฟล์ build.gradle
ดึงดูด
dependencies { implementation "androidx.core:core-splashscreen:1.0.0" }
Kotlin
dependencies { implementation("androidx.core:core-splashscreen:1.0.0") }
ตั้งค่าธีมสำหรับหน้าจอเริ่มต้น (Splash Screen) เพื่อเปลี่ยนรูปลักษณ์
คุณสามารถระบุแอตทริบิวต์ต่อไปนี้ในธีม Activity เพื่อปรับแต่งหน้าจอเริ่มต้น (Splash Screen) สำหรับแอป หากคุณมีการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) เดิมที่ใช้แอตทริบิวต์อย่าง android:windowBackground อยู่แล้ว ให้พิจารณาจัดเตรียมไฟล์ทรัพยากรสำรองสำหรับ Android 12 ขึ้นไป
ใช้
windowSplashScreenBackgroundเพื่อเติมพื้นหลังด้วยสีเดียวที่เฉพาะเจาะจง<item name="android:windowSplashScreenBackground">@color/...</item>ใช้
windowSplashScreenAnimatedIconเพื่อแทนที่ไอคอนตรงกลางหน้าต่างเริ่มต้นสำหรับแอปที่กำหนดเป้าหมายเป็น Android 12 (ระดับ API 32) เท่านั้น ให้ทำดังนี้
หากออบเจ็กต์เป็นภาพเคลื่อนไหวและวาดได้ผ่าน
AnimationDrawableและAnimatedVectorDrawableให้ตั้งค่าwindowSplashScreenAnimationDurationเพื่อเล่นภาพเคลื่อนไหวขณะแสดงหน้าต่างเริ่มต้น ซึ่งไม่จำเป็นสำหรับ Android 13 เนื่องจากระบบจะอนุมานระยะเวลาโดยตรงจากAnimatedVectorDrawable<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>ใช้
windowSplashScreenAnimationDurationเพื่อระบุระยะเวลาของภาพเคลื่อนไหวไอคอนหน้าจอเริ่มต้น (Splash Screen) การตั้งค่านี้ไม่มีผลต่อเวลาจริงที่หน้าจอเริ่มต้น (Splash Screen) แสดง แต่คุณสามารถเรียกข้อมูลได้เมื่อปรับแต่งภาพเคลื่อนไหวเมื่อออกจากหน้าจอเริ่มต้น (Splash Screen) โดยใช้SplashScreenView.getIconAnimationDurationดูรายละเอียดเพิ่มเติมได้ที่ส่วนต่อไปนี้เกี่ยวกับการแสดงหน้าจอเริ่มต้น (Splash Screen) บนหน้าจอเป็นระยะเวลานานขึ้น<item name="android:windowSplashScreenAnimationDuration">1000</item>ใช้
windowSplashScreenIconBackgroundColorเพื่อตั้งค่าพื้นหลังด้านหลังไอคอนหน้าจอเริ่มต้น (Splash Screen) ซึ่งจะมีประโยชน์หากพื้นหลังของหน้าต่างและไอคอนมีคอนทราสต์ไม่เพียงพอ<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>คุณสามารถใช้
windowSplashScreenBrandingImageเพื่อตั้งค่ารูปภาพให้แสดงที่ด้านล่างของหน้าจอเริ่มต้น (Splash Screen) อย่างไรก็ตาม หลักเกณฑ์การออกแบบไม่แนะนำให้ใช้รูปภาพการสร้างแบรนด์<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>คุณสามารถใช้
windowSplashScreenBehaviorเพื่อระบุว่าแอปจะแสดงไอคอนบนหน้าจอเริ่มต้น (Splash Screen) เสมอหรือไม่ใน Android 13 ขึ้นไป ค่าเริ่มต้นคือ 0 ซึ่งจะแสดงไอคอนบนหน้าจอเริ่มต้น (Splash Screen) หากกิจกรรมการเปิดใช้งานตั้งค่าsplashScreenStyleเป็นSPLASH_SCREEN_STYLE_ICONหรือเป็นไปตามลักษณะการทำงานของระบบหากกิจกรรมการเปิดใช้งานไม่ได้ระบุสไตล์ หากไม่ต้องการแสดงหน้าจอเริ่มต้น (Splash Screen) ที่ว่างเปล่าและต้องการให้แสดงไอคอนแบบเคลื่อนไหวเสมอ ให้ตั้งค่านี้เป็นicon_preferred<item name="android:windowSplashScreenBehavior">icon_preferred</item>
แสดงหน้าจอเริ่มต้น (Splash Screen) บนหน้าจอเป็นระยะเวลานานขึ้น
หน้าจอเริ่มต้น (Splash Screen) จะปิดลงทันทีที่แอปวาดเฟรมแรก หากต้องการโหลดข้อมูลจำนวนเล็กน้อย เช่น การโหลดการตั้งค่าในแอปจากดิสก์ในเครื่องแบบอะซิงโครนัส คุณสามารถใช้ ViewTreeObserver.OnPreDrawListener เพื่อระงับแอปไม่ให้วาดเฟรมแรกได้
หากกิจกรรมเริ่มต้นเสร็จสิ้นก่อนการวาด เช่น โดยไม่ได้ตั้งค่ามุมมองเนื้อหาและเสร็จสิ้นก่อน onResume ก็ไม่จำเป็นต้องใช้ Listener ก่อนการวาด
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; } } }); }
ปรับแต่งภาพเคลื่อนไหวสำหรับการปิดหน้าจอเริ่มต้น (Splash Screen)
คุณปรับแต่งภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) เพิ่มเติมได้ผ่าน 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(); }); }
เมื่อเริ่มการเรียกกลับนี้ Vector Drawable แบบเคลื่อนไหวในหน้าจอเริ่มต้น (Splash Screen) จะเริ่มทำงาน ทั้งนี้ขึ้นอยู่กับระยะเวลาของการเปิดแอป
Drawable อาจอยู่ระหว่างการแสดงภาพเคลื่อนไหว ใช้
SplashScreenView.getIconAnimationStart
เพื่อทราบเวลาที่ภาพเคลื่อนไหวเริ่มทำงาน คุณสามารถคำนวณระยะเวลาที่เหลือของภาพเคลื่อนไหวไอคอนได้ดังนี้
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; }
แหล่งข้อมูลเพิ่มเติม
- ย้ายข้อมูลการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) ที่มีอยู่ไปยัง Android 12 ขึ้นไป
- แอป Now in Android ซึ่งแสดงการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) ในชีวิตจริง