เพิ่มหน้าจอแนะนํา

หากแอปใช้หน้าจอแนะนำที่กำหนดเองหรือใช้ธีม Launcher ให้ย้ายข้อมูล แอปไปยังไลบรารี SplashScreen ที่มีอยู่ใน Jetpack เพื่อให้ แสดงอย่างถูกต้องใน Wear OS ทุกเวอร์ชัน

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

เพิ่มทรัพยากร Dependency

เพิ่มทรัพยากร Dependency ต่อไปนี้ในไฟล์ build.gradle ของโมดูลแอป

Groovy

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

Kotlin

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

ตรวจสอบว่าคุณใช้เวอร์ชัน 1.0.1 ขึ้นไปเพื่อรับการสนับสนุนสำหรับค่าเริ่มต้น ขนาด Wear OS

เพิ่มธีม

สร้างธีมหน้าจอเริ่มต้นใน res/values/styles.xml องค์ประกอบระดับบนสุด ขึ้นอยู่กับรูปร่างของไอคอน:

  • หากไอคอนเป็นทรงกลม ให้ใช้ Theme.SplashScreen
  • หากไอคอนเป็นรูปร่างอื่น ให้ใช้ Theme.SplashScreen.IconBackground

ใช้ windowSplashScreenBackground เพื่อเติมพื้นหลังด้วยสีดำ 1 ภาพ สี ตั้งค่า postSplashScreenTheme ให้กับธีมที่กิจกรรม ควรใช้และ windowSplashScreenAnimatedIcon ไปยังภาพที่ถอนออกได้หรือภาพเคลื่อนไหว ถอนออกได้:

<resources>
    <style name="Theme.App" parent="@android:style/Theme.DeviceDefault" />

    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background to black -->
        <item name="windowSplashScreenBackground">@android:color/black</item>
        <!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated
             drawable. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_screen</item>
        <!-- Set the theme of the Activity that follows your splash screen. -->
        <item name="postSplashScreenTheme">@style/Theme.App</item>
    </style>
</resources>

หากคุณใช้ไอคอนไม่กลม คุณต้องตั้งค่าสีพื้นหลังสีขาวด้านล่าง ไอคอนของคุณ ในกรณีนี้ ให้ใช้ Theme.SplashScreen.IconBackground เป็นระดับบนสุด ธีมและตั้งค่าแอตทริบิวต์ windowSplashScreenIconBackgroundColor ดังนี้

<style name="Theme.App.Starting" parent="Theme.SplashScreen.IconBackground">
    ...
    <!-- Set a white background behind the splash screen icon. -->
    <item name="windowSplashScreenIconBackgroundColor">@android:color/white</item>
</style>

แอตทริบิวต์อื่นๆ จะระบุหรือไม่ก็ได้

สร้างเนื้อหาที่ถอนออกได้สำหรับธีม

ธีมหน้าจอเริ่มต้นต้องมีปุ่มที่ถอนออกได้เพื่อส่งผ่านไปยัง windowSplashScreenAnimatedIcon ตัวอย่างเช่น คุณสามารถสร้างโดย กำลังเพิ่มไฟล์ใหม่ res/drawable/splash_screen.xml และใช้ไอคอนตัวเปิดแอป และขนาดไอคอนของหน้าจอแนะนำที่ถูกต้อง

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="@dimen/splash_screen_icon_size"
        android:height="@dimen/splash_screen_icon_size"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />
</layer-list>

ขนาดของไอคอนหน้าจอแนะนําคือขนาด res/values/dimens.xml และแตกต่างกัน โดยขึ้นอยู่กับว่าไอคอนเป็นวงกลมไหม

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Round app icon can take all of default space -->
    <dimen name="splash_screen_icon_size">48dp</dimen>
</resources>

...หรือไม่ใช่วงกลม ดังนั้นจึงต้องใช้พื้นหลังของไอคอน:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Non-round icon with background must use reduced size to fit circle -->
    <dimen name="splash_screen_icon_size">36dp</dimen>
</resources>

ระบุธีม

ในไฟล์ Manifest ของแอป (AndroidManifest.xml) ให้แทนที่ธีมของ กิจกรรมเริ่มต้น -- ซึ่งมักจะเป็นสิ่งกำหนดรายการ Launcher หรือ หรือส่งออก ไปยังธีมที่คุณสร้างไว้ในขั้นตอนก่อนหน้า:

<manifest>
    <application android:theme="@style/Theme.App.Starting">
       <!-- or -->
       <activity android:theme="@style/Theme.App.Starting">
          <!-- ... -->
</manifest>

อัปเดตกิจกรรมเริ่มต้น

ติดตั้งหน้าจอแนะนำในกิจกรรมเริ่มต้นก่อนโทร super.onCreate():

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Handle the splash screen transition.
        installSplashScreen()

        super.onCreate(savedInstanceState)
        setContent {
            WearApp("Wear OS app")
        }
    }
}

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับหน้าจอแนะนำโดยทั่วไปและวิธีการใช้งาน ในแอปของคุณ