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

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

1. บทนำ

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

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

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

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

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

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

Codelab นี้เป็นที่ 3 จาก 4 รายการที่จะแนะนำคุณตลอดขั้นตอนการสร้างแอปชื่อ 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 ในคอมพิวเตอร์) เพื่อเปิดโครงการการจัดส่ง
รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ ดังที่แสดงโดยสัญญาณบอกสถานะกิจกรรมที่ด้านล่างของหน้าต่าง Android Studio
ณ จุดนี้ Android Studio อาจแสดงข้อผิดพลาดบางอย่างในเวอร์ชันเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือสร้างบิลด์ ดังตัวอย่างด้านล่าง ทำตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตโปรเจ็กต์เหล่านี้ และซิงค์โปรเจ็กต์

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

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

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

ไปยังไฟล์ build.gradle ของโมดูล app และตรวจสอบว่าการบล็อก dependencies มีทรัพยากร Dependency ใน 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 สูงสุด หากยังไม่ได้ติดตั้ง ให้คลิกลิงก์ดาวน์โหลดที่ปรากฏและดาวน์โหลดให้เสร็จ
คลิกถัดไป
ในหน้าจออุปกรณ์เสมือน (AVD) ของ Android (AVD) ให้ปล่อยการตั้งค่าไว้เหมือนเดิม แล้วคลิกเสร็จสิ้น
เลือกอุปกรณ์ Android จากกล่องโต้ตอบเป้าหมายการทำให้ใช้งานได้
คลิกตกลง
Android Studio จะสร้างแอป ติดตั้งใช้งาน และเปิดแอปในอุปกรณ์เป้าหมายโดยอัตโนมัติ

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

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

3. เปลี่ยนสี

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

เครื่องมือแก้ไขธีมของวัสดุได้จัดระเบียบธีมต่างๆ ออกเป็นเฉดสีพร้อมป้ายกำกับตัวเลข ได้แก่ ป้ายกำกับ 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 เนื้อหาที่ถอนออกได้ควรมีลักษณะดังนี้

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 ตั้งค่ารูปแบบใหม่เป็น "ศาลเจ้า" ชื่อ <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

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

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

3. เปลี่ยนสี

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. สรุป

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

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

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