หน้าจอแนะนำ

สำคัญ: หากคุณใช้หน้าจอแนะนำที่กำหนดเองใน Android 11 หรือต่ำกว่า ย้ายข้อมูลแอปไปยัง SplashScreen API เพื่อให้แสดงได้อย่างถูกต้องใน Android 12 ขึ้นไป สำหรับคำแนะนำ ดูย้ายข้อมูลการใช้งานหน้าจอแนะนำที่มีอยู่ไปยัง Android 12

เริ่มตั้งแต่ Android 12 เป็นต้นไป SplashScreen API ช่วยให้เปิดแอปได้ ที่มีภาพเคลื่อนไหว ซึ่งรวมถึงการเคลื่อนไหวในแอปเมื่อเปิดตัว หน้าจอแนะนำที่แสดง ไอคอนแอปของคุณ และการเปลี่ยน ไปยังตัวแอปเอง SplashScreen คือ Window และ ดังนั้นจึงครอบคลุมถึง Activity

รูปที่ 1 หน้าจอแนะนำ

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

นอกจากการใช้ API ของแพลตฟอร์ม SplashScreen แล้ว คุณยังใช้ SplashScreen ไลบรารีที่ใช้ร่วมกัน ซึ่งจะรวม SplashScreen API

วิธีการทำงานของหน้าจอแนะนำ

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

1. ระบบจะแสดงหน้าจอแนะนำโดยใช้ธีมและภาพเคลื่อนไหวที่คุณ นิยาม

2. เมื่อแอปพร้อมแล้ว หน้าจอแนะนำจะปิดลงและแอปจะปรากฏขึ้น

หน้าจอแนะนําจะไม่แสดงขึ้นระหว่าง hot Start

องค์ประกอบและกลไกของหน้าจอแนะนำ

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

องค์ประกอบที่ปรับแต่งได้ของหน้าจอแนะนำประกอบด้วยไอคอนแอป ไอคอน พื้นหลัง และ พื้นหลังของหน้าต่าง:

วันที่

รูปที่ 2 องค์ประกอบที่ปรับแต่งได้ของหน้าจอแนะนำ บนหน้าจอ

ลองพิจารณาองค์ประกอบต่อไปนี้ที่แสดงในรูปที่ 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 ทุกอย่างที่อยู่นอกวงกลม ไม่ปรากฏ (มาสก์)

วันที่

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

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

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

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

วันที่

รูปที่ 4 ลำดับการเปิดใช้งาน

1. ป้อนภาพเคลื่อนไหว ซึ่งประกอบไปด้วยมุมมองระบบในหน้าจอเริ่มต้น ทั้งนี้ ถูกควบคุมโดยระบบและปรับแต่งไม่ได้

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

3. ออกจากภาพเคลื่อนไหว: ประกอบด้วยภาพเคลื่อนไหวที่ซ่อนหน้าจอแนะนำ หากต้องการปรับแต่ง ให้ใช้ 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) แสดงบนหน้าจอเป็นเวลานาน

แหล่งข้อมูลเกี่ยวกับหน้าจอเริ่มต้น

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

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

1. ใช้ windowSplashScreenBackground เพื่อเติมพื้นหลังด้วยสีเดียว

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

2. ใช้ windowSplashScreenAnimatedIcon เพื่อแทนที่ไอคอนตรงกลางของหน้าต่างเริ่มต้น

   สำหรับแอปที่กำหนดเป้าหมายเป็น Android 12 (API ระดับ 32) เท่านั้น ให้ทำดังนี้

   หากวัตถุเคลื่อนไหวได้และสามารถวาดผ่านได้ AnimationDrawable และ AnimatedVectorDrawable ตั้งค่า windowSplashScreenAnimationDuration เป็น เล่นภาพเคลื่อนไหวขณะที่แสดงหน้าต่างเริ่มต้น ไม่จำเป็น สำหรับ Android 13 เพราะระยะเวลาจะอนุมานโดยตรงจาก AnimatedVectorDrawable

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

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

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

4. ใช้ windowSplashScreenIconBackgroundColor เพื่อกำหนดพื้นหลังด้านหลังไอคอนหน้าจอแนะนำ ซึ่งจะเป็นประโยชน์หากมี พื้นหลังของหน้าต่างและไอคอนตัดกันไม่เพียงพอ

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

5. คุณสามารถใช้ windowSplashScreenBrandingImage เพื่อกำหนดให้รูปภาพแสดงที่ด้านล่างของหน้าจอแนะนำ อย่างไรก็ตาม หลักเกณฑ์การออกแบบไม่ควรใช้รูปภาพแสดงแบรนด์

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

6. คุณสามารถใช้ 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 ซึ่งแสดงให้เห็นการใช้งานหน้าจอแนะนำในโลกแห่งความเป็นจริง