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

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

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

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

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

Groovy

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

Kotlin

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

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

เพิ่มธีม

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

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

ใช้ windowSplashScreenBackground เพื่อเติมพื้นหลังด้วยสีดำสีเดียว ตั้งค่า 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">
    <!-- Set a white background behind the splash screen icon. -->
    <item name="windowSplashScreenIconBackgroundColor">@android:color/white</item>
</style>

ส่วนแอตทริบิวต์อื่นๆ จะเป็นแอตทริบิวต์ที่ไม่บังคับ

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

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

<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>

ขนาดไอคอนหน้าจอเริ่มต้น (Splash Screen) จะกำหนดเป็น res/values/dimens.xml และแตกต่างกันไปตามลักษณะของไอคอนว่ากลมหรือไม่ ดังนี้

<resources>
    <!-- Round app icon can take all of default space -->
    <dimen name="splash_screen_icon_size">48dp</dimen>
</resources>

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

<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 หรือส่งออกด้วยวิธีอื่น ด้วยธีมที่คุณสร้างในขั้นตอนก่อนหน้า

<activity
    android:name=".snippets.SplashScreenActivity"
    android:exported="true"
    android:taskAffinity=""
    android:theme="@style/Theme.App.Starting">
    <!-- ... -->
</activity>

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

ติดตั้งหน้าจอเริ่มต้น (Splash Screen) ในกิจกรรมเริ่มต้นก่อนเรียกใช้ super.onCreate() และโหลด Composable ดังนี้

class SplashScreenActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)

        setContent {
            WearApp()
        }
    }
}

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับหน้าจอเริ่มต้น (Splash Screen) โดยทั่วไปและวิธีใช้ในแอป