Android Academy · Pelajaran

Tema & Gaya

Takrifkan Styles yang boleh digunakan semula untuk widget dan Themes untuk aplikasi anda. Sediakan peranan warna Material 3, skala tipografi, fon tersuai dan mod gelap.

Pelajaran 2 daripada 513 langkah

Tema & Gaya ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 5. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 5 pelajaran.

Gaya berbanding Tema

Dua konsep yang sering dikelirukan:

Gaya — koleksi atribut paparan yang digunakan pada satu widget (contohnya, saiz teks, warna dan pelapik). Tetapkan dengan style="@style/MyButton".
Tema — koleksi atribut semantik yang digunakan pada Activity atau aplikasi. Paparan mencari atribut tema dengan ?attr/colorPrimary.

Menentukan Gaya

Cipta gaya dalam res/values/styles.xml. Gaya boleh mewarisi gaya induk:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Menentukan Tema

Tema mewarisi tema induk Material 3 dan mengatasi atribut warna serta bentuk:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Sistem Warna Material 3

Material 3 menggunakan peranan warna semantik dan bukannya nilai heks mentah. Peranan utama:

colorPrimary — warna jenama utama
colorOnPrimary — teks/ikon pada latar utama
colorSecondary — warna aksen
colorSurface — latar kad/helaian
colorError — keadaan ralat
colorBackground — latar tetingkap

Sumber Warna

Tentukan warna dalam res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Tema Gelap

Tema Material 3 DayNight mengendalikan mod gelap secara automatik. Tambahkan varian malam untuk warna:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Tipografi

Material 3 menentukan skala tipografi. Gunakan atribut textAppearance untuk teks yang konsisten:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Fon Tersuai

Tambahkan fon ke res/font/ dan rujuk fon tersebut daripada tema atau gaya anda:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Menggunakan Tema pada Activity

Tetapkan tema dalam AndroidManifest.xml. Anda boleh menggunakan tema yang berbeza untuk setiap Activity:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Membaca Atribut Tema dalam Kod

Akses sebarang atribut tema dalam kod Kotlin pada masa jalan:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Pembina Tema Material

Gunakan Material Theme Builder (m3.material.io/theme-builder) untuk menjana skema warna Material 3 lengkap daripada warna jenama anda. Alat ini mengeksport fail XML yang sedia digunakan untuk colors.xml dan themes.xml. Inilah cara terpantas untuk mendapatkan sistem reka bentuk yang konsisten.

Semakan Pantas

Apakah perbezaan utama antara Gaya dengan Tema dalam Android?

Jawab dalam pelajaran interaktif

Imbas Kembali: Tema & Gaya

Reka bentuk yang konsisten bermula di sini:

Gaya — atribut pada peringkat widget, boleh digunakan semula merentas banyak paparan
Tema — atribut pada peringkat aplikasi/Activity, dengan peranan warna semantik
Peranan warna Material 3: colorPrimary, colorSurface, colorError dan sebagainya
Mod gelap melalui values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Skala tipografi melalui atribut textAppearance
Gunakan Material Theme Builder untuk menjana skema warna dengan cepat

Seterusnya: melukis paparan tersuai dari awal.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Tema & Gaya” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Tema & Gaya”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 5 pelajaran.

Apakah yang akan saya pelajari dalam “Tema & Gaya”?

Takrifkan Styles yang boleh digunakan semula untuk widget dan Themes untuk aplikasi anda. Sediakan peranan warna Material 3, skala tipografi, fon tersuai dan mod gelap. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 5.

Berapa lamakah pelajaran “Tema & Gaya” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy