Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

หน้าจอแนะนำ

ตั้งแต่ Android 12 เป็นต้นไป แอปจะเปิดขึ้นพร้อมหน้าจอเริ่มต้น (Splash Screen) ของระบบซึ่งรวมถึงการเคลื่อนไหวเข้าสู่แอปเมื่อเปิด หน้าจอเริ่มต้นที่แสดงไอคอนแอป และการเปลี่ยนเข้าสู่ตัวแอปเอง หน้าจอเริ่มต้น (Splash Screen) คือ Window จึงครอบคลุม Activity

รูปที่ 1 หน้าจอเริ่มต้น (Splash Screen)

ประสบการณ์การใช้งานหน้าจอเริ่มต้น (Splash Screen) จะนำองค์ประกอบการออกแบบมาตรฐานมาใช้กับการเปิดแอปทุกครั้ง แต่ก็ปรับแต่งได้เพื่อให้แอปยังคงเอกลักษณ์ของแบรนด์ไว้ได้

หากต้องการปรับแต่งหน้าจอเริ่มต้น (Splash Screen) จากแอป ให้ใช้ไลบรารีความเข้ากันได้ SplashScreen ของ Jetpack โดยจะรวม API SplashScreen ของแพลตฟอร์มและทำงานร่วมกับ ComponentActivity ใดก็ได้ รวมถึงกิจกรรมที่ตั้งค่า UI ด้วย Compose โดยใช้ setContent

วิธีการทำงานของหน้าจอเริ่มต้น (Splash Screen)

เมื่อผู้ใช้เปิดแอปขณะที่กระบวนการของแอปไม่ได้ทำงานอยู่ (Cold Start) หรือไม่มีการสร้าง Activity (Warm Start) เหตุการณ์ต่อไปนี้จะเกิดขึ้น

ระบบจะแสดงหน้าจอเริ่มต้น (Splash Screen) โดยใช้ธีมและภาพเคลื่อนไหวที่คุณกำหนด
เมื่อแอปพร้อมแล้ว หน้าจอเริ่มต้น (Splash Screen) จะปิดลงและแอปจะแสดงขึ้น

หน้าจอเริ่มต้น (Splash Screen) จะไม่แสดงในระหว่างการเริ่มระบบแบบร้อน

องค์ประกอบและกลไกของหน้าจอเริ่มต้น (Splash Screen)

องค์ประกอบของหน้าจอเริ่มต้น (Splash Screen) จะกำหนดโดยไฟล์ทรัพยากร XML ในไฟล์ Manifest ของ Android องค์ประกอบแต่ละรายการมีทั้งเวอร์ชันธีมสว่างและธีมมืด

องค์ประกอบที่ปรับแต่งได้ของหน้าจอเริ่มต้น (Splash Screen) ประกอบด้วยไอคอนแอป พื้นหลังไอคอน และพื้นหลังหน้าต่าง ดังนี้

หน้าจอเริ่มต้น (Splash Screen) พร้อมข้อความไฮไลต์ที่มีหมายเลขกำกับสำหรับองค์ประกอบที่ปรับแต่งได้ — **รูปที่ 2** องค์ประกอบที่ปรับแต่งได้ของหน้าจอเริ่มต้น (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 ทุกอย่างที่อยู่นอกวงกลมจะมองไม่เห็น (ถูกมาสก์)

รูปที่ 3 ขนาดไอคอนหน้าจอเริ่มต้น (Splash Screen) สำหรับพื้นหลังทึบและโปร่งใสตามลำดับ

ภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) และลำดับการเปิดใช้งาน

เวลาในการตอบสนองเพิ่มเติมมักจะเชื่อมโยงกับการเปิดแอปแบบ Cold Start การเพิ่มไอคอนแบบเคลื่อนไหวลงในหน้าจอเริ่มต้น (Splash Screen) จะช่วยเพิ่มความสวยงามและมอบประสบการณ์การใช้งานที่พรีเมียมยิ่งขึ้น การศึกษาวิจัยผู้ใช้แสดงให้เห็นว่าผู้ใช้รู้สึกว่าเวลาเริ่มต้นระบบสั้นลงเมื่อดูภาพเคลื่อนไหว

ภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) จะฝังอยู่ในคอมโพเนนต์ลำดับการเปิดใช้งาน ดังที่แสดงในรูปที่ 4

ลำดับการเปิดแอปใน 12 เฟรมติดต่อกัน โดยเริ่มจากไอคอน Launcher ที่ถูกแตะและขยายจนเต็มหน้าจอ — **รูปที่ 4** ลำดับการเปิดตัว

ภาพเคลื่อนไหวขาเข้า: ประกอบด้วยมุมมองระบบไปยังหน้าจอเริ่มต้น (Splash Screen) ซึ่งระบบจะเป็นผู้ควบคุมและปรับแต่งไม่ได้
หน้าจอเริ่มต้น (แสดงระหว่างส่วน "รอ" ของลำดับ): หน้าจอเริ่มต้นสามารถปรับแต่งได้ ซึ่งช่วยให้คุณใส่ภาพเคลื่อนไหวของโลโก้และการสร้างแบรนด์ของคุณเองได้ โดยต้องเป็นไปตามข้อกำหนดที่อธิบายไว้ในหน้านี้เพื่อให้ทำงานได้อย่างถูกต้อง
ภาพเคลื่อนไหวขาออก: ประกอบด้วยภาพเคลื่อนไหวที่ซ่อนหน้าจอเริ่มต้น (Splash Screen) หากต้องการปรับแต่ง ให้ใช้มุมมอง SplashScreenViewProvider และไอคอนของมุมมองดังกล่าว คุณสามารถเรียกใช้ภาพเคลื่อนไหวใดก็ได้ในองค์ประกอบเหล่านี้ โดยมีการตั้งค่าสำหรับการเปลี่ยนรูปแบบ ความทึบแสง และสี ในกรณีนี้ ให้นำหน้าจอเริ่มต้นออกด้วยตนเองเมื่อภาพเคลื่อนไหวเสร็จสิ้น

เมื่อเรียกใช้ภาพเคลื่อนไหวของไอคอน การเปิดแอปจะให้ตัวเลือกในการข้ามลำดับในกรณีที่แอปพร้อมใช้งานก่อน แอปจะทริกเกอร์ onResume() หรือหน้าจอเริ่มต้น (Splash Screen) จะหมดเวลาโดยอัตโนมัติ ดังนั้นโปรดตรวจสอบว่าผู้ใช้สามารถข้ามการเคลื่อนไหวได้อย่างสะดวก หน้าจอเริ่มต้น (Splash Screen) จะปิดได้ด้วย onResume() เท่านั้นเมื่อแอปมีความเสถียรจากมุมมองด้านภาพ จึงไม่จำเป็นต้องมีไอคอนหมุนเพิ่มเติม การเปิดตัวอินเทอร์เฟซที่ไม่สมบูรณ์อาจทำให้ผู้ใช้รู้สึกไม่พอใจและอาจสร้างความรู้สึกว่าคาดเดาไม่ได้หรือขาดความประณีต

ข้อกำหนดด้านภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen)

หน้าจอเริ่มต้น (Splash Screen) ต้องเป็นไปตามข้อกำหนดต่อไปนี้

ตั้งค่าสีพื้นหลังของหน้าต่างเดียวโดยไม่มีความโปร่งใส โหมดกลางวันและกลางคืนรองรับการใช้งานร่วมกับไลบรารี compat 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)

รูปที่ 5 ตัวอย่าง AVD

ดาวน์โหลดชุดเริ่มต้นตัวอย่าง ซึ่งสาธิตวิธีสร้าง จัดรูปแบบ และส่งออกภาพเคลื่อนไหวไปยัง 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.2.0"
}

Kotlin

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

จากนั้นสร้างธีมหน้าจอเริ่มต้น (Splash Screen) ที่รับค่ามาจาก Theme.SplashScreen ตั้งค่า postSplashScreenTheme เป็นธีมที่กิจกรรมใช้หลังจากนั้น ใช้ธีมหน้าจอเริ่มต้น (Splash Screen) ในไฟล์ Manifest (ดูหัวข้อย้ายข้อมูลการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) ที่มีอยู่ไปยัง Android 12) และเรียกใช้ installSplashScreen() ในกิจกรรมเริ่มต้นก่อนเรียกใช้ super.onCreate() ดังที่แสดงในตัวอย่างในส่วนต่อไปนี้

ตั้งค่าธีมสำหรับหน้าจอเริ่มต้น (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) โดยใช้ SplashScreenViewProvider.iconAnimationDurationMillis ดูรายละเอียดเพิ่มเติมได้ที่ส่วนต่อไปนี้เกี่ยวกับการแสดงหน้าจอเริ่มต้น (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) จะปิดลงทันทีที่แอปวาดเฟรมแรก หากต้องการโหลดข้อมูลจำนวนเล็กน้อย เช่น การโหลดการตั้งค่าในแอปจากดิสก์ในเครื่องแบบอะซิงโครนัส ให้ใช้ setKeepOnScreenCondition เพื่อแสดงหน้าจอเริ่มต้น (Splash Screen) บนหน้าจอจนกว่าข้อมูลจะพร้อมใช้งาน ระบบจะประเมินเงื่อนไขก่อนที่จะวาดแต่ละเฟรม ดังนั้นโปรดดำเนินการอย่างรวดเร็วเพื่อหลีกเลี่ยงการบล็อก UI

หากกิจกรรมเริ่มต้นเสร็จสิ้นก่อนการวาด เช่น โดยไม่ได้ตั้งค่ามุมมองเนื้อหาและเสร็จสิ้นก่อน onResume คุณไม่จำเป็นต้องตั้งค่าเงื่อนไข

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}SplashScreenSnippets.kt

ปรับแต่งภาพเคลื่อนไหวสำหรับการปิดหน้าจอเริ่มต้น (Splash Screen)

คุณปรับแต่งภาพเคลื่อนไหวของหน้าจอเริ่มต้น (Splash Screen) เพิ่มเติมได้ด้วย setOnExitAnimationListener Listener จะได้รับ SplashScreenViewProvider ที่ให้มุมมองหน้าจอเริ่มต้น (Splash Screen) เพื่อสร้างภาพเคลื่อนไหว เรียกใช้ remove() เมื่อภาพเคลื่อนไหวสิ้นสุดลง

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}SplashScreenSnippets.kt

เมื่อเริ่มการเรียกกลับนี้ Vector Drawable แบบเคลื่อนไหวในหน้าจอเริ่มต้น (Splash Screen) จะเริ่มทำงาน ทั้งนี้ขึ้นอยู่กับระยะเวลาของการเปิดแอป Drawable อาจอยู่ระหว่างการแสดงภาพเคลื่อนไหว ใช้ SplashScreenViewProvider.iconAnimationStartMillis เพื่อทราบเวลาที่ภาพเคลื่อนไหวเริ่มทำงาน คุณสามารถคำนวณระยะเวลาที่เหลือของภาพเคลื่อนไหวไอคอนได้ดังนี้

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)SplashScreenSnippets.kt

แหล่งข้อมูลเพิ่มเติม

ย้ายข้อมูลการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) ที่มีอยู่ไปยัง Android 12 ขึ้นไป
แอป Now in Android ซึ่งแสดงการติดตั้งใช้งานหน้าจอเริ่มต้น (Splash Screen) ในชีวิตจริง