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

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

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

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

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

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

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

นี่คือหนึ่งใน 4 ของ Codelab ที่จะแนะนําวิธีการสร้างแอปที่เรียกว่า Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน ดู Codelab ที่เกี่ยวข้องได้ที่ MDC-101: ข้อมูลพื้นฐานเกี่ยวกับคอมโพเนนต์ (MDC) MDC-102: โครงสร้างและการออกแบบ Material Design MDC-104: ส่วนประกอบขั้นสูงสําหรับ Material Design ภายใน MDC 104 คุณจะสร้างแอปที่มีลักษณะดังนี้

คอมโพเนนต์ MDC และ Android ระบบย่อยที่ใช้ใน Codelab นี้:

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

สิ่งที่ต้องมี

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

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

มือใหม่ ปานกลาง เชี่ยวชาญ

การดําเนินการต่อจาก MDC-102

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

ดาวน์โหลดแอป Starter Lab

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

แอปเริ่มต้นจะอยู่ในไดเรกทอรี 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

สําหรับความช่วยเหลือเพิ่มเติม: การโคลนที่เก็บจาก GitHub

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

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

เพิ่มทรัพยากร Dependency ของโปรเจ็กต์

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

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

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

2. (ไม่บังคับ) หากจําเป็น ให้แก้ไขไฟล์ 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 (AVD) ให้คงการตั้งค่าไว้ตามเดิม แล้วคลิกเสร็จสิ้น เลือกอุปกรณ์ Android จากกล่องโต้ตอบเป้าหมายของการทําให้ใช้งานได้ คลิกตกลง Android Studio จะสร้างแอป ทําให้แอปใช้งานได้ และเปิดโดยอัตโนมัติในอุปกรณ์เป้าหมาย

หากไม่สามารถเพิ่มทรัพยากร Dependency หรือเรียกใช้แอปได้สําเร็จ ให้หยุดและแก้ปัญหาสภาพแวดล้อมของนักพัฒนาซอฟต์แวร์

หากคุณพบข้อผิดพลาด INSTALL_FAILED_INVALID_APK เมื่อสร้าง ลองทํา "บิวด์' -> "โครงการสะอาด' ใน Android Studio

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

มาทําให้แถบแอปยอดนิยมตรงกับแบรนด์ของศาลเจ้ากันโดยเปลี่ยนสี ระดับความสูง และการพิมพ์อักษร

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

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

มาเปลี่ยนสีแถบแอปกันเถอะเพื่อให้สอดคล้องกับรูปแบบสีดังกล่าว

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

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

colors.xml

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

หากต้องการใช้ไอคอนสีเข้มในแถบสถานะ ให้เพิ่มข้อมูลต่อไปนี้ใน Theme.Shrine, ธีมของแอป Shrine&#39

styles.xml

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

คําแนะนํา: คุณต้องนําเข้าเนมสเปซของเครื่องมือในแท็ก <resource> ดังที่แสดงด้านล่าง

<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

การตั้งค่า android:textColorPrimary ใน 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>

และสุดท้าย ให้ตั้งค่าแอตทริบิวต์รูปแบบในทั้งคอมโพเนนต์ XML TextInputLayout ใน 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 จะขยายจากรูปแบบ text 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>

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

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 Design เพื่อสร้างชุดสี
• อย่าลืมสีของอักษรของคุณเอง
• ตรวจสอบว่าคอนทราสต์ของสีข้อความต่อพื้นหลังอยู่ในอัตราส่วนที่เข้าถึงได้ (3:1 สําหรับขนาดใหญ่ และ 4.5:1 สําหรับขนาดเล็ก)

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

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

จัดรูปแบบลักษณะของข้อความในแถบแอปด้านบนให้ตรงกับข้อกําหนดของนักออกแบบ เพิ่มลักษณะของข้อความต่อไปนี้เป็น 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" />

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

หมายเหตุเกี่ยวกับการพิมพ์:

• ขณะเลือกแบบอักษรของข้อความ ควรใช้ข้อความขนาดเล็กและข้อความสั้นๆ เลือกแบบอักษรที่ชัดเจนแทนที่จะใช้รูปแบบ
• แบบอักษรของดิสเพลย์ที่ใช้สําหรับประเภทและชื่อขนาดใหญ่ ควรใช้เพื่อแสดงหรือเน้นแบรนด์

ตอนนี้เมื่อคุณจัดรูปแบบหน้าด้วยสีและแบบอักษรที่ตรงกับ 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 Studio พบข้อผิดพลาดแก้ไขสัญลักษณ์ไม่ได้เมื่อเขียนโค้ดนี้ ให้กด Alt + Enter หรือ (Option + Return ใน Mac) เพื่อนําเข้าสัญลักษณ์ที่ขาดหายไป

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

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

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

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

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

ใช้อะแดปเตอร์ 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
}

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

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

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

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

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

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

ถึงตอนนี้ คุณได้สร้างแอปที่มีลักษณะคล้ายกับข้อมูลจําเพาะด้านการออกแบบจากนักออกแบบแล้ว

แอป MDC 103 ที่สมบูรณ์พร้อมใช้งานโดยการดาวน์โหลด Codelab ที่เสร็จสิ้น หรือโดยการตรวจสอบ Codelab เวอร์ชันที่เสร็จสมบูรณ์ด้วย git: git checkout 103-complete

คุณจะทดสอบแอปเวอร์ชันเทียบกับแอปเวอร์ชันเสร็จสมบูรณ์ได้

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

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

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

ฉันเรียน Codelab นี้ให้เสร็จได้ด้วยเวลาและความพยายามที่สมเหตุสมผล

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

ฉันต้องการใช้คอมโพเนนต์วัสดุต่อไปในอนาคต

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