หน้านี้ได้รับการแปลโดย Cloud Translation API

MDC-103 Android: ธีมวัสดุที่มีสี ระดับความสูง และประเภท (Kotlin)

1. บทนำ

Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้ Material Design ได้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop

ใน Codelabs MDC-101 และ MDC-102 คุณใช้ Material Components (MDC) เพื่อสร้างข้อมูลพื้นฐานของแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน แอปนี้มีขั้นตอนการใช้งานของผู้ใช้ที่เริ่มต้นด้วยหน้าจอการเข้าสู่ระบบ และนำผู้ใช้ไปยังหน้าจอหลักที่แสดงผลิตภัณฑ์

การขยายการให้บริการ Material Design เมื่อเร็วๆ นี้ช่วยให้นักออกแบบและนักพัฒนาซอฟต์แวร์มีความยืดหยุ่นมากขึ้นในการแสดงแบรนด์ของผลิตภัณฑ์ ตอนนี้คุณใช้ MDC เพื่อปรับแต่ง Shrine และแสดงสไตล์ที่เป็นเอกลักษณ์ได้แล้ว

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะปรับแต่ง Shrine เพื่อแสดงถึงแบรนด์ได้โดยใช้สิ่งต่อไปนี้

สี
การพิมพ์
ระดับความสูง
เลย์เอาต์

Codelab นี้เป็นส่วนที่ 3 จาก 4 Codelab ที่จะแนะนำคุณตลอดขั้นตอนการสร้างแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน Codelab ที่เกี่ยวข้องได้ที่

เมื่อจบ MDC 104 คุณจะสร้างแอปที่มีลักษณะดังนี้

คอมโพเนนต์และระบบย่อยของ AndroidC ที่ใช้ใน Codelab นี้มีดังนี้

ธีม
การพิมพ์
ระดับความสูง

สิ่งที่คุณต้องมี

ความรู้พื้นฐานเกี่ยวกับการพัฒนา Android
Android Studio (ดาวน์โหลดได้ที่นี่หากยังไม่มี)
โปรแกรมจำลองหรืออุปกรณ์ Android (มีให้ใช้งานผ่าน Android Studio)
โค้ดตัวอย่าง (ดูขั้นตอนถัดไป)

คุณจะให้คะแนนระดับประสบการณ์ในการสร้างแอป Android เท่าไร

มือใหม่

ระดับกลาง

เชี่ยวชาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

จะดําเนินการต่อจาก MDC-102 ใช่ไหม

หากคุณดำเนินการ MDC-102 เสร็จสมบูรณ์แล้ว โค้ดของคุณก็จะพร้อมใช้งานสำหรับ Codelab นี้ ข้ามไปขั้นตอนที่ 3: เปลี่ยนสี

ดาวน์โหลดแอป Codelab เริ่มต้น

แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-android-codelabs-103-starter/kotlin อย่าลืมcdเข้าไปในไดเรกทอรีนั้นก่อนเริ่มต้น

...หรือโคลนโมเดลจาก GitHub

หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

โหลดโค้ดเริ่มต้นใน Android Studio

เมื่อวิซาร์ดการตั้งค่าเสร็จสิ้นและหน้าต่างยินดีต้อนรับสู่ Android Studio ปรากฏขึ้น ให้คลิกเปิดโปรเจ็กต์ Android Studio ที่มีอยู่ ไปที่ไดเรกทอรีที่คุณติดตั้งโค้ดตัวอย่างไว้ แล้วเลือก kotlin -> shrine (หรือค้นหา shrine ในคอมพิวเตอร์) เพื่อเปิดโปรเจ็กต์การจัดส่ง
รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ ตามที่ตัวบ่งชี้กิจกรรมที่ด้านล่างของหน้าต่าง Android Studio แสดง
เมื่อถึงขั้นตอนนี้ Android Studio อาจแสดงข้อผิดพลาดบางอย่างเกี่ยวกับการสร้างเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือสร้าง เช่น เครื่องมือที่แสดงด้านล่าง ทำตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตโปรเจ็กต์เหล่านี้ และซิงค์โปรเจ็กต์

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

เพิ่มการพึ่งพาโปรเจ็กต์

โปรเจ็กต์ต้องขึ้นอยู่กับไลบรารีการสนับสนุนของ AndroidC สำหรับ Android โค้ดตัวอย่างที่คุณดาวน์โหลดควรมีรายการนี้อยู่แล้ว แต่คุณควรทำตามขั้นตอนต่อไปนี้เพื่อตรวจสอบ

ไปที่ไฟล์ build.gradle ของโมดูล app และตรวจสอบว่าบล็อก dependencies มีการพึ่งพา MDC Android ดังนี้

api 'com.google.android.material:material:1.1.0-alpha06'

(ไม่บังคับ) หากจำเป็น ให้แก้ไขไฟล์ build.gradle เพื่อเพิ่มทรัพยากร Dependency ต่อไปนี้และซิงค์โปรเจ็กต์

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

เรียกใช้แอปเริ่มต้น

ตรวจสอบว่าการกำหนดค่าบิลด์ทางด้านซ้ายของปุ่มเรียกใช้ / เล่นคือ app
กดปุ่มเรียกใช้/เล่นสีเขียวเพื่อสร้างและเรียกใช้แอป
ในหน้าต่างเลือกเป้าหมายการทำให้ใช้งานได้ หากคุณมีอุปกรณ์ Android อยู่ในอุปกรณ์ที่พร้อมใช้งานแล้ว ให้ข้ามไปที่ขั้นตอนที่ 8 หรือคลิกสร้างอุปกรณ์เสมือนใหม่
ในหน้าจอเลือกฮาร์ดแวร์ ให้เลือกอุปกรณ์โทรศัพท์ เช่น Pixel 2 แล้วคลิกถัดไป
ในหน้าจออิมเมจระบบ ให้เลือก Android เวอร์ชันล่าสุด หากควรเป็นระดับ API สูงสุด หากยังไม่ได้ติดตั้ง ให้คลิกลิงก์ดาวน์โหลดที่ปรากฏขึ้น แล้วดำเนินการดาวน์โหลดให้เสร็จ
คลิกถัดไป
ในหน้าจอ Android Virtual Device (AVD) ให้ปล่อยการตั้งค่าไว้เหมือนเดิม แล้วคลิกเสร็จสิ้น
เลือกอุปกรณ์ Android จากกล่องโต้ตอบเป้าหมายการทำให้ใช้งานได้
คลิกตกลง
Android Studio จะสร้างแอป ติดตั้งใช้งาน และเปิดแอปในอุปกรณ์เป้าหมายโดยอัตโนมัติ

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

มาทำให้แถบแอปด้านบนตรงกับแบรนด์ Shrine โดยการเปลี่ยนสี ระดับ และแบบอักษร

3. เปลี่ยนสี

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

เครื่องมือแก้ไขธีม Material ได้จัดระเบียบสีเป็นเฉดต่างๆ ที่มีป้ายกำกับเป็นตัวเลข ซึ่งรวมถึงป้ายกำกับ 50, 100, 200, .... ถึง 900 ของแต่ละสี Shrine จะใช้เฉพาะเฉดสี 50, 100 และ 300 จากแถบสีชมพู และ 900 จากแถบสีน้ำตาล

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi-nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

มาเปลี่ยนสีของแถบแอปด้านบนให้ตรงกับรูปแบบสีกัน

ตั้งค่า colorPrimaryDark และ colorAccent

ใน colors.xml ให้แก้ไขบรรทัดต่อไปนี้ แอตทริบิวต์ colorAccent จะควบคุมสีของแถบแอปด้านบนและอื่นๆ ส่วนแอตทริบิวต์ colorPrimaryDark จะควบคุมสีของแถบสถานะ

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

หากต้องการใช้ไอคอนสีเข้มในแถบสถานะ ให้เพิ่มรายการต่อไปนี้ใน Theme.Shrine ซึ่งเป็นธีมแอปของ Shrine

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml และ styles.xml ควรมีลักษณะดังนี้

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

ใน colors.xml ให้เพิ่มแหล่งข้อมูลสี textColorPrimary ใหม่ที่ตั้งค่าเป็น #442C2E และอัปเดตแอตทริบิวต์ toolbarIconColor เพื่ออ้างอิงสี textColorPrimary

อัปเดตไฟล์ styles.xml เพื่อตั้งค่า

ให้กับสี textColorPrimary ที่เราเพิ่งกำหนด

อีกอย่างคือ ตั้งค่าแอตทริบิวต์ android:theme ในรูปแบบ Widget.Shrine.Toolbar เป็น Theme.Shrine

colors.xml และ styles.xml ควรมีลักษณะดังนี้

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

สร้างและเรียกใช้ ตารางกริดแสดงผลิตภัณฑ์ของคุณควรมีลักษณะดังนี้

มาเปลี่ยนสไตล์ของหน้าจอเข้าสู่ระบบให้เข้ากับรูปแบบสีกัน

จัดรูปแบบช่องข้อความ

มาเปลี่ยนข้อความที่ป้อนในหน้าเข้าสู่ระบบให้มีเส้นขอบและใช้สีที่ดีขึ้นสำหรับการจัดวางของเรากัน

เพิ่มแหล่งข้อมูลสีต่อไปนี้ลงในไฟล์ colors.xml

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

เพิ่ม 2 สไตล์ใหม่ใน styles.xml:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

สุดท้าย ตั้งค่าแอตทริบิวต์ style ใน ทั้งสองรายการ ของ TextInputLayout คอมโพเนนต์ XML ใน shr_login_fragment.xml เป็นรูปแบบใหม่ของคุณ:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

จัดรูปแบบสีปุ่ม

สุดท้าย ให้จัดรูปแบบสีของปุ่มในหน้าการเข้าสู่ระบบ เพิ่มสไตล์ต่อไปนี้ใน styles.xml:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

รูปแบบ Widget.Shrine.Button ขยายมาจากรูปแบบ MaterialButton เริ่มต้น และเปลี่ยนสีข้อความและสีของพื้นหลังปุ่ม Widget.Shrine.Button.TextButton ขยายมาจากสไตล์ข้อความMaterialButtonเริ่มต้น และเปลี่ยนเฉพาะสีข้อความ

ตั้งค่าสไตล์ Widget.Shrine.Button ในปุ่มถัดไป และสไตล์ Widget.Shrine.Button.TextButton ในปุ่มยกเลิก ดังนี้

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

อัปเดตสีของโลโก้ Shrine ในหน้าเข้าสู่ระบบ จะต้องมีการเปลี่ยนแปลงเล็กน้อยเกี่ยวกับเวกเตอร์ที่วาดได้ ซึ่งก็คือ shr_logo.xml เปิดไฟล์ที่ถอนออกได้และเปลี่ยนพร็อพเพอร์ตี้ android:fillAlpha เป็น 1 ไฟล์ drawable ควรมีลักษณะดังนี้

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

จากนั้นตั้งค่าแอตทริบิวต์ android:tint บนโลโก้ <ImageView> ใน shr_login_fragment.xml เป็น ?android:attr/textColorPrimary ดังนี้

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

สร้างและเรียกใช้ ตอนนี้หน้าจอการเข้าสู่ระบบควรมีลักษณะดังนี้

หมายเหตุเกี่ยวกับสีและธีม:

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

4. แก้ไขรูปแบบตัวอักษรและป้ายกำกับ

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

จัดรูปแบบแถบแอปด้านบน

จัดรูปแบบลักษณะที่ปรากฏของแถบแอปด้านบนให้ตรงกับข้อมูลจำเพาะที่นักออกแบบให้ไว้ เพิ่มรูปแบบลักษณะที่ปรากฏของข้อความต่อไปนี้เป็น styles.xml และตั้งค่าพร็อพเพอร์ตี้ titleTextAppearance ให้อ้างอิงรูปแบบนี้ในรูปแบบ Widget.Shrine.Toolbar

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml และ styles.xml ควรมีลักษณะดังนี้

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

จัดรูปแบบป้ายกำกับ

เราจะจัดรูปแบบป้ายกำกับการ์ดผลิตภัณฑ์ให้ใช้ลักษณะของข้อความที่ถูกต้อง และจัดให้อยู่กึ่งกลางแนวนอนภายในการ์ด

อัปเดตการออกแบบตัวอักษรในป้ายกำกับชื่อจาก textAppearanceHeadline6 เป็น textAppearanceSubtitle2 ดังนี้

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

หากต้องการจัดวางป้ายกำกับรูปภาพไว้ตรงกลาง ให้แก้ไข<TextView>ใน shr_product_card.xml เพื่อตั้งค่าแอตทริบิวต์ android:textAlignment="center" ดังนี้

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

สร้างและเรียกใช้ หน้าจอตารางกริดของผลิตภัณฑ์ควรมีลักษณะดังนี้

มาเปลี่ยนการพิมพ์ของหน้าจอการเข้าสู่ระบบให้เข้ากัน

ใน styles.xml ให้เพิ่มรูปแบบต่อไปนี้

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

ใน shr_login_fragment.xml ให้ตั้งค่าสไตล์ใหม่เป็นชื่อ "SHRINE" <TextView> (และลบแอตทริบิวต์ textAllCaps และ textSize ที่มีอยู่)

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

สร้างและเรียกใช้ ตอนนี้หน้าจอการเข้าสู่ระบบควรมีลักษณะดังนี้

5. ปรับระดับความสูง

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

เปลี่ยนระดับความสูงของตารางกริดผลิตภัณฑ์

หากต้องการให้ดูเหมือนว่าเนื้อหาอยู่บนชีตที่ลอยอยู่เหนือแถบแอปด้านบน ให้เปลี่ยนระดับของแถบแอปด้านบน เพิ่มแอตทริบิวต์ app:elevation ลงในแอตทริบิวต์ AppBarLayout และ android:elevation ลงในคอมโพเนนต์ XML NestedScrollView ใน shr_product_grid_fragment.xml ดังนี้

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

เปลี่ยนระดับความสูง (และสี) ของการ์ด

ปรับระดับความสูงของการ์ดทุกใบโดยเปลี่ยน app:cardElevation ใน shr_product_card.xml จาก 2dp เป็น 0dp เปลี่ยน app:cardBackgroundColor เป็น @android:color/transparent ด้วย

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

ลองดูเลย คุณได้ปรับระดับความสูงของการ์ดทั้งหมดในหน้าตารางกริดของผลิตภัณฑ์แล้ว

เปลี่ยนระดับความสูงของปุ่มถัดไป

ใน styles.xml ให้เพิ่มพร็อพเพอร์ตี้ต่อไปนี้ลงในสไตล์ Widget.Shrine.Button

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

การตั้งค่า android:stateListAnimator ในสไตล์ของ Button จะตั้งค่าปุ่มถัดไปให้ใช้ภาพเคลื่อนไหวที่เรามีให้

สร้างและเรียกใช้ ตอนนี้หน้าจอการเข้าสู่ระบบควรมีลักษณะดังนี้

หมายเหตุเกี่ยวกับระดับความสูง:

พื้นผิวและองค์ประกอบทั้งหมดของดีไซน์ Material มีค่าระดับความสูง
ส่วนขอบของพื้นผิวจะแบ่งเขตแดนระหว่างพื้นผิวหนึ่งกับอีกพื้นผิวหนึ่ง
ความแตกต่างของระดับความสูงระหว่างพื้นผิวอาจแสดงโดยใช้พื้นหลังสีจาง พื้นหลังที่สว่างขึ้น หรือเงา
โดยทั่วไปแล้ว แพลตฟอร์มที่อยู่ด้านหน้าแพลตฟอร์มอื่นๆ จะมีเนื้อหาที่สําคัญกว่า

6. เปลี่ยนเลย์เอาต์

มาเปลี่ยนเลย์เอาต์เพื่อแสดงการ์ดในอัตราส่วนการแสดงผลและขนาดที่แตกต่างกันเพื่อให้แต่ละการ์ดดูไม่ซ้ำกัน

ใช้อะแดปเตอร์ RecyclerView แบบสลับ

เราได้จัดเตรียมอะแดปเตอร์ RecyclerView ใหม่ให้คุณในแพ็กเกจ staggeredgridlayout ซึ่งจะแสดงเลย์เอาต์บัตรที่สลับสับเปลี่ยนกันแบบอสมมาตร กล่าวคือต้องเลื่อนในแนวนอน คุณอาจเจาะลึกโค้ดดังกล่าวได้ด้วยตนเอง แต่เราจะไม่กล่าวถึงวิธีการใช้งานโค้ดที่นี่

หากต้องการใช้อะแดปเตอร์ใหม่นี้ ให้แก้ไขเมธอด onCreateView() ใน ProductGridFragment.kt แทนที่โค้ดบล็อกหลังความคิดเห็น "ตั้งค่า RecyclerView" ด้วยข้อมูลต่อไปนี้

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

นอกจากนี้ เราจะต้องทำการเปลี่ยนแปลงเล็กน้อยใน shr_product_grid_fragment.xml เพื่อนำระยะห่างจากขอบออกจาก NestedScrollView ดังนี้

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

สุดท้าย เราจะปรับระยะห่างจากขอบของการ์ดภายใน RecyclerView โดยการแก้ไข ProductGridItemDecoration.kt แก้ไขเมธอด getItemOffsets() ของ ProductGridItemDecoration.kt ดังนี้

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

สร้างและเรียกใช้ ตอนนี้รายการตารางกริดผลิตภัณฑ์ควรเรียงสลับกันดังนี้

7. ลองใช้ธีมอื่น

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

แก้ไขรูปแบบและสี

ใน styles.xml ให้เพิ่มธีมใหม่ต่อไปนี้

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

และใน AndroidManifest.xml ให้ใช้ธีมใหม่นี้ในแอปพลิเคชันของคุณ:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

แก้ไขสีของไอคอนแถบเครื่องมือใน colors.xml ตามที่แสดงด้านล่าง:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

จากนั้นตั้งค่าแอตทริบิวต์ android:theme ของสไตล์แถบเครื่องมือให้อ้างอิงธีมปัจจุบันโดยใช้แอตทริบิวต์ "?theme" แทนการเขียนโค้ดแบบฮาร์ดโค้ด

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

จากนั้น ปรับสีข้อความบอกใบ้ให้จางลงในช่องข้อความของหน้าจอการเข้าสู่ระบบ เพิ่มแอตทริบิวต์ android:textColorHint ในรูปแบบของช่องข้อความ

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

สร้างและเรียกใช้ ธีมใหม่ควรปรากฏเพื่อให้คุณดูตัวอย่าง

เปลี่ยนรหัสที่เปลี่ยนแปลงในส่วนนี้กลับก่อนไปยัง MDC-104

8. สรุป

ถึงตอนนี้ คุณได้สร้างแอปที่คล้ายกับข้อกำหนดการออกแบบจากนักออกแบบของคุณ

ขั้นตอนถัดไป

คุณใช้คอมโพเนนต์ MDC ต่อไปนี้ ธีม การพิมพ์ และระดับความสูง คุณสำรวจคอมโพเนนต์และระบบย่อยเพิ่มเติมได้ใน [ไลบรารีเว็บ MDC]

จะเกิดอะไรขึ้นหากการออกแบบแอปที่วางแผนไว้มีองค์ประกอบที่ไม่มีคอมโพเนนต์ในไลบรารี MDC ใน MDC-104: คอมโพเนนต์ขั้นสูงของดีไซน์ Material เราจะพูดถึงวิธีสร้างคอมโพเนนต์ที่กำหนดเองโดยใช้ไลบรารี MDC เพื่อให้ได้รูปลักษณ์ที่เฉพาะเจาะจง

ฉันทำ Codelab นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

ไม่เห็นด้วยอย่างยิ่ง

ฉันต้องการใช้คอมโพเนนต์เนื้อหาต่อไปในอนาคต

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

ไม่เห็นด้วยอย่างยิ่ง

MDC-103 Android: ธีมวัสดุที่มีสี ระดับความสูง และประเภท (Kotlin)

1. บทนำ

สิ่งที่คุณจะสร้าง

คอมโพเนนต์และระบบย่อยของ AndroidC ที่ใช้ใน Codelab นี้มีดังนี้

สิ่งที่คุณต้องมี

คุณจะให้คะแนนระดับประสบการณ์ในการสร้างแอป Android เท่าไร

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

จะดําเนินการต่อจาก MDC-102 ใช่ไหม

ดาวน์โหลดแอป Codelab เริ่มต้น

...หรือโคลนโมเดลจาก GitHub

โหลดโค้ดเริ่มต้นใน Android Studio

เพิ่มการพึ่งพาโปรเจ็กต์

เรียกใช้แอปเริ่มต้น

3. เปลี่ยนสี

ตั้งค่า colorPrimaryDark และ colorAccent

จัดรูปแบบช่องข้อความ

จัดรูปแบบสีปุ่ม

4. แก้ไขรูปแบบตัวอักษรและป้ายกำกับ

จัดรูปแบบแถบแอปด้านบน

จัดรูปแบบป้ายกำกับ

เปลี่ยนแบบอักษรของหน้าจอการเข้าสู่ระบบ

5. ปรับระดับความสูง

เปลี่ยนระดับความสูงของตารางกริดผลิตภัณฑ์

เปลี่ยนระดับความสูง (และสี) ของการ์ด

เปลี่ยนระดับความสูงของปุ่มถัดไป

6. เปลี่ยนเลย์เอาต์

ใช้อะแดปเตอร์ RecyclerView แบบสลับ

7. ลองใช้ธีมอื่น

แก้ไขรูปแบบและสี

8. สรุป

ขั้นตอนถัดไป

ฉันทำ Codelab นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

ฉันต้องการใช้คอมโพเนนต์เนื้อหาต่อไปในอนาคต