เริ่มตั้งแต่ Android 12 เป็นต้นไป
SplashScreen
API ช่วยให้เปิดแอปได้
ที่มีภาพเคลื่อนไหว ซึ่งรวมถึงการเคลื่อนไหวในแอปเมื่อเปิดตัว หน้าจอแนะนำที่แสดง
ไอคอนแอปของคุณ และการเปลี่ยน
ไปยังตัวแอปเอง SplashScreen
คือ
Window
และ
ดังนั้นจึงครอบคลุมถึง
Activity
ประสบการณ์การใช้งานหน้าจอเริ่มต้นนำองค์ประกอบการออกแบบมาตรฐานมาใช้กับทุกแอป เปิดตัวแล้ว ทั้งยังปรับแต่งได้ เพื่อให้แอปรักษาการสร้างแบรนด์ที่เป็นเอกลักษณ์ไว้ได้
นอกจากการใช้ API ของแพลตฟอร์ม SplashScreen
แล้ว คุณยังใช้
SplashScreen
ไลบรารีที่ใช้ร่วมกัน ซึ่งจะรวม SplashScreen
API
วิธีการทำงานของหน้าจอแนะนำ
เมื่อผู้ใช้เปิดแอปขณะที่กระบวนการของแอปไม่ได้ทำงานอยู่ (ข้อผิดพลาด
เริ่มต้น) หรือ Activity
ไม่
(การอุ่นเครื่อง)
มีเหตุการณ์ต่อไปนี้เกิดขึ้น:
ระบบจะแสดงหน้าจอแนะนำโดยใช้ธีมและภาพเคลื่อนไหวที่คุณ นิยาม
เมื่อแอปพร้อมแล้ว หน้าจอแนะนำจะปิดลงและแอปจะปรากฏขึ้น
หน้าจอแนะนําจะไม่แสดงขึ้นระหว่าง hot Start
องค์ประกอบและกลไกของหน้าจอแนะนำ
องค์ประกอบของหน้าจอแนะนำกำหนดโดยไฟล์ทรัพยากร XML ใน ไฟล์ Manifest ของ Android องค์ประกอบแต่ละรายการจะมีเวอร์ชันโหมดสว่างและโหมดมืด
องค์ประกอบที่ปรับแต่งได้ของหน้าจอแนะนำประกอบด้วยไอคอนแอป ไอคอน พื้นหลัง และ พื้นหลังของหน้าต่าง:
![รูปภาพแสดงองค์ประกอบที่อยู่ในหน้าจอแนะนำ](https://developer.android.google.cn/static/images/guide/topics/ui/splash-screen/splash-screen-composition.png?authuser=8&hl=th)
ลองพิจารณาองค์ประกอบต่อไปนี้ที่แสดงในรูปที่ 2
1 ไอคอนแอปต้องเป็นเวกเตอร์ที่ถอนออกได้ ทั้งนี้ อาจเป็นภาพนิ่งหรือภาพเคลื่อนไหวก็ได้ แม้ว่าภาพเคลื่อนไหว จะมีระยะเวลาไม่จำกัด เราขอแนะนำให้มีขนาดไม่เกิน 1,000 มิลลิวินาที ไอคอน Launcher เป็นค่าเริ่มต้น
2 พื้นหลังไอคอนเป็นองค์ประกอบที่ไม่บังคับและมีประโยชน์ในกรณีต่อไปนี้ คุณต้องการคอนทราสต์ระหว่างไอคอนกับพื้นหลังของหน้าต่างมากขึ้น หากคุณใช้ แบบปรับอัตโนมัติ แสดงพื้นหลังเมื่อคอนทราสต์กับพื้นหลังของหน้าต่างมากพอ
3 เช่นเดียวกับไอคอนแบบปรับอัตโนมัติ 1 ใน 3 ของ มีการมาสก์อยู่เบื้องหน้า
4 พื้นหลังหน้าต่างประกอบด้วย สีทึบ หากตั้งค่าพื้นหลังของหน้าต่างไว้เป็นสีปกติ ระบบจะใช้พื้นหลังนั้น โดยค่าเริ่มต้นหากไม่ได้ตั้งค่าแอตทริบิวต์ไว้
ขนาดหน้าจอเริ่มต้น
ไอคอนหน้าจอแนะนำใช้ข้อกำหนดเดียวกันกับ ไอคอนแบบปรับอัตโนมัติ ดังนี้
- รูปภาพที่มีแบรนด์: ต้องมีขนาด 200×80 dp
- ไอคอนแอปที่มีพื้นหลังเป็นไอคอน: ต้องมีขนาด 240×240 dp และพอดีกับ เส้นผ่านศูนย์กลางของวงกลม 160 dp
- ไอคอนแอปที่ไม่มีพื้นหลังไอคอน: ต้องมีขนาด 288×288 dp และพอดีกับภายใน เส้นผ่านศูนย์กลางของวงกลมขนาด 192 dp
ตัวอย่างเช่น หากรูปภาพขนาดเต็มคือ 300×300 dp ไอคอนจะต้องปรับให้พอดี ภายในวงกลมที่มีเส้นผ่านศูนย์กลาง 200 dp ทุกอย่างที่อยู่นอกวงกลม ไม่ปรากฏ (มาสก์)
![รูปภาพแสดงไอคอนขนาดต่างๆ สำหรับพื้นหลังแบบทึบและโปร่งใส](https://developer.android.google.cn/static/images/guide/topics/ui/splash-screen/splash-screen-icon-dimensions.png?authuser=8&hl=th)
ภาพเคลื่อนไหวหน้าจอเริ่มต้นและลำดับการเปิดใช้งาน
เวลาในการตอบสนองที่เพิ่มขึ้นมักจะเชื่อมโยงกับการเปิดใช้แอปใน Cold Start การเพิ่มไอคอนแบบเคลื่อนไหวลงในหน้าจอแนะนำของคุณมีความสวยงามชัดเจน มอบประสบการณ์ระดับพรีเมียมมากขึ้น การวิจัยผู้ใช้แสดงให้เห็นว่าสตาร์ทอัพที่รับรู้ เวลาจะน้อยลงเมื่อดูภาพเคลื่อนไหว
ภาพเคลื่อนไหวหน้าจอแนะนำฝังอยู่ในคอมโพเนนต์ลำดับการเปิดตัว เช่น ที่แสดงในรูปที่ 4
![รูปภาพแสดงลำดับการเปิดใช้งานใน 12 เฟรมต่อเนื่องกัน เริ่มต้นจากการแตะไอคอน Launcher แล้วขยายเต็มหน้าจอเมื่อขยาย](https://developer.android.google.cn/static/images/ui/splash-sequence.png?authuser=8&hl=th)
ป้อนภาพเคลื่อนไหว ซึ่งประกอบไปด้วยมุมมองระบบในหน้าจอเริ่มต้น ทั้งนี้ ถูกควบคุมโดยระบบและปรับแต่งไม่ได้
หน้าจอเริ่มต้น (แสดงระหว่างส่วน "รอ" ของลำดับ): หน้าจอเริ่มต้น สามารถปรับแต่งหน้าจอ ให้คุณส่ง ภาพเคลื่อนไหวของโลโก้ และ การแสดงแบรนด์ บัญชีดังกล่าวต้องเป็นไปตามข้อกำหนด ที่อธิบายในหน้านี้เพื่อให้ทำงานได้อย่างถูกต้อง
ออกจากภาพเคลื่อนไหว: ประกอบด้วยภาพเคลื่อนไหวที่ซ่อนหน้าจอแนะนำ หากต้องการปรับแต่ง ให้ใช้
SplashScreenView
และ ไอคอน คุณสามารถเรียกใช้ภาพเคลื่อนไหว พร้อมการตั้งค่าสำหรับการเปลี่ยนรูปแบบ ความทึบแสง และสี ในกรณีนี้ ให้นำหน้าจอแนะนำออกด้วยตนเองเมื่อ ภาพเคลื่อนไหวเสร็จแล้ว
เมื่อเรียกใช้ภาพเคลื่อนไหวของไอคอน การเปิดแอปจะมีตัวเลือกให้คุณข้าม
ในกรณีที่แอปพร้อมใช้งานก่อนหน้านี้ แอปจะทริกเกอร์ onResume()
หรือหน้าจอเริ่มต้นหมดเวลาโดยอัตโนมัติ ดังนั้นโปรดตรวจสอบว่า
ข้ามได้อย่างสะดวกสบาย ต้องปิดหน้าจอแนะนำด้วย onResume()
เท่านั้น
เมื่อแอปมีความเสถียรในเชิงภาพ จึงไม่มีไอคอนหมุนเพิ่มเติม
ที่จำเป็น การแนะนำอินเทอร์เฟซที่ไม่สมบูรณ์อาจทำให้ผู้ใช้รู้สึกไม่สบายใจ และอาจ
ทำให้เกิดความรู้สึกคาดเดาไม่ได้หรือไม่ขัดเกลา
ข้อกำหนดของภาพเคลื่อนไหวในหน้าจอเริ่มต้น
หน้าจอแนะนำต้องเป็นไปตามข้อกำหนดต่อไปนี้
ตั้งค่าสีพื้นหลังหน้าต่างแบบสีเดียวโดยไม่โปร่งใส ช่วงกลางวันและกลางคืน ใช้ได้กับ ไลบรารีที่ใช้ร่วมกัน
SplashScreen
รายการตรวจสอบว่าไอคอนแบบเคลื่อนไหวเป็นไปตามข้อกำหนดต่อไปนี้
- รูปแบบ: ไอคอนต้องเป็น AnimatedVectorDrawable (AVD) XML
- ขนาด: ไอคอน AVD ต้องมีขนาดใหญ่กว่าไอคอนแบบปรับอัตโนมัติ 4 เท่า
ดังนี้
- พื้นที่ไอคอนต้องมีขนาด 432 dp หรือกล่าวคือ 4 เท่าของขนาด พื้นที่ 108 dp ของไอคอนแบบปรับอัตโนมัติที่ไม่ได้มาสก์
- พื้นที่ 2 ใน 3 ด้านในของรูปภาพจะปรากฏบนไอคอน Launcher และต้องเป็น 288 dp หรือ 4 คูณ 72 dp ประกอบขึ้นเป็นบริเวณที่มาสก์ด้านในของไอคอนแบบปรับอัตโนมัติ
- ระยะเวลา: เราขอแนะนำว่าไม่ควรเกิน 1,000 มิลลิวินาทีบนโทรศัพท์ คุณสามารถใช้ การเริ่มต้นแบบล่าช้า แต่ต้องต้องไม่เกิน 166 มิลลิวินาที หากแอป เวลาเริ่มต้นนานกว่า 1,000 มิลลิวินาที ให้พิจารณาภาพเคลื่อนไหวแบบวนซ้ำ
กำหนดเวลาที่เหมาะสมในการปิดหน้าจอแนะนำ ซึ่งจะเกิดขึ้นเมื่อ ที่แอปวาดเฟรมแรก คุณปรับแต่งค่านี้เพิ่มเติมได้ตามที่อธิบายไว้ ในส่วนที่เกี่ยวกับ การทำให้หน้าจอเริ่มต้น (Splash Screen) แสดงบนหน้าจอเป็นเวลานาน
แหล่งข้อมูลเกี่ยวกับหน้าจอเริ่มต้น
ดาวน์โหลด ตัวอย่างชุดเริ่มต้นใช้งาน ซึ่งสาธิตวิธีสร้าง จัดรูปแบบ และส่งออกภาพเคลื่อนไหวในรูปแบบ AVD ซึ่งรวมถึงสิ่งต่อไปนี้
- ไฟล์โปรเจ็กต์ Adobe After Effects ของภาพเคลื่อนไหว
- ไฟล์ AVD XML ที่ส่งออกขั้นสุดท้าย
- ตัวอย่าง GIF ของภาพเคลื่อนไหว
การดาวน์โหลดไฟล์เหล่านี้หมายความว่าคุณยอมรับ ข้อกำหนดในการให้บริการของ Google
นโยบายความเป็นส่วนตัวของ Google จะอธิบายวิธีที่ ข้อมูลในบริการนี้
ปรับแต่งหน้าจอแนะนำในแอป
โดยค่าเริ่มต้น SplashScreen
จะใช้ windowBackground
ของธีมของคุณในกรณีต่อไปนี้
windowBackground
เป็นสีเดียว หากต้องการปรับแต่งหน้าจอแนะนำ ให้เพิ่ม
ให้กับธีมของแอป
คุณปรับแต่งหน้าจอแนะนำของแอปได้โดยทำอย่างใดอย่างหนึ่งต่อไปนี้
ตั้งค่าแอตทริบิวต์ของธีมเพื่อเปลี่ยนลักษณะที่ปรากฏ
ให้อยู่บนหน้าจอเป็นเวลานานขึ้น
ปรับแต่งภาพเคลื่อนไหวสำหรับการปิดหน้าจอแนะนำ
เริ่มต้นใช้งาน
ไลบรารีหลักของ SplashScreen
มาพร้อมกับหน้าจอแนะนําของ 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") }
ตั้งค่าธีมสำหรับหน้าจอแนะนำเพื่อเปลี่ยนลักษณะที่ปรากฏ
คุณระบุแอตทริบิวต์ต่อไปนี้ในธีม Activity
เพื่อปรับแต่งได้
หน้าจอแนะนำของแอป หากคุณมีหน้าจอแนะนําแบบเดิมอยู่แล้ว
การใช้งานที่ใช้แอตทริบิวต์อย่าง 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
เพื่อระบุระยะเวลาของภาพเคลื่อนไหวของไอคอนหน้าจอแนะนำ การตั้งค่านี้ ไม่ส่งผลใดๆ ต่อเวลาจริงที่หน้าจอเริ่มต้น แต่คุณสามารถดึงข้อมูลได้เมื่อกำหนดค่าการออกหน้าจอแนะนำ ภาพเคลื่อนไหวโดยใช้SplashScreenView.getIconAnimationDuration
โปรดดูส่วนต่อไปนี้เกี่ยวกับ การทำให้หน้าจอเริ่มต้น (Splash Screen) อยู่บนหน้าจอเป็นเวลานาน เพื่อดูรายละเอียดเพิ่มเติม<item name="android:windowSplashScreenAnimationDuration">1000</item>
ใช้
windowSplashScreenIconBackgroundColor
เพื่อกำหนดพื้นหลังด้านหลังไอคอนหน้าจอแนะนำ ซึ่งจะเป็นประโยชน์หากมี พื้นหลังของหน้าต่างและไอคอนตัดกันไม่เพียงพอ<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
คุณสามารถใช้
windowSplashScreenBrandingImage
เพื่อกำหนดให้รูปภาพแสดงที่ด้านล่างของหน้าจอแนะนำ อย่างไรก็ตาม หลักเกณฑ์การออกแบบไม่ควรใช้รูปภาพแสดงแบรนด์<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
คุณสามารถใช้
windowSplashScreenBehavior
เพื่อระบุว่าแอปของคุณจะแสดงไอคอน บนหน้าจอแนะนำเสมอหรือไม่ Android 13 ขึ้นไป ค่าเริ่มต้นคือ 0 ซึ่งจะแสดงไอคอนบน หน้าจอเริ่มต้นหากกิจกรรมการเปิดใช้งานตั้งค่าsplashScreenStyle
เป็นSPLASH_SCREEN_STYLE_ICON
, หรือทำตามการทำงานของระบบ หากกิจกรรมการเปิดไม่ได้ระบุ สไตล์ หากคุณไม่ต้องการแสดงหน้าจอแนะนำที่ว่างเปล่า และต้องการ ไอคอนภาพเคลื่อนไหวที่จะแสดง ให้ตั้งค่านี้เป็นicon_preferred
<item name="android:windowSplashScreenBehavior">icon_preferred</item>
ให้หน้าจอแนะนำ (Splash Screen) อยู่บนหน้าจอเป็นเวลานานขึ้น
หน้าจอแนะนำจะปิดทันทีที่แอปวาดเฟรมแรก หากคุณ
ต้องโหลดข้อมูลจำนวนน้อย เช่น การโหลดการตั้งค่าในแอปจาก
แบบไม่พร้อมกันของดิสก์ในตัวเครื่อง คุณสามารถใช้
ViewTreeObserver.OnPreDrawListener
เพื่อระงับแอปไม่ให้วาดเฟรมแรก
ถ้ากิจกรรมเริ่มต้นเสร็จสิ้นก่อนวาด เช่น
การตั้งค่าการดูเนื้อหาและสิ้นสุดก่อนวันที่ onResume
- การวาดล่วงหน้า
คุณไม่จำเป็นต้องฟัง
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; } } }); }
ปรับแต่งภาพเคลื่อนไหวสำหรับการปิดหน้าจอแนะนำ
คุณสามารถปรับแต่งภาพเคลื่อนไหวของหน้าจอแนะนำเพิ่มเติมได้
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(); }); }
ในช่วงเริ่มต้นของการเรียกกลับนี้
เวกเตอร์ที่เคลื่อนไหวได้แบบวาดได้
ในหน้าจอเริ่มต้น (Splash Screen) จะเริ่มขึ้น ทั้งนี้ขึ้นอยู่กับระยะเวลาการเปิดตัวแอป
โฆษณาที่ถอนออกได้อาจอยู่ระหว่างภาพเคลื่อนไหว ใช้
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; }
แหล่งข้อมูลเพิ่มเติม
- ย้ายข้อมูลการใช้งานหน้าจอแนะนําที่มีอยู่ไปยัง Android 12 และ สูงขึ้น
- ตอนนี้ในแอป Android ซึ่งแสดงให้เห็นการใช้งานหน้าจอแนะนำในโลกแห่งความเป็นจริง