1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ MDC สร้างขึ้นโดยทีมวิศวกรและนักออกแบบ UX จาก Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้จริงหลายสิบรายการ และพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter ที่ material.io/develop |
ดีไซน์ Material และคอมโพเนนต์ Material สำหรับ Android คืออะไร
Material Design คือระบบสำหรับการสร้างผลิตภัณฑ์ดิจิทัลที่โดดเด่นและสวยงาม การรวมสไตล์ การสร้างแบรนด์ อินเทอร์แอกชัน และการเคลื่อนไหวเข้าไว้ด้วยกันภายใต้ชุดหลักการและคอมโพเนนต์ที่สอดคล้องกันจะช่วยให้ทีมผลิตภัณฑ์สามารถปลดปล่อยศักยภาพการออกแบบได้อย่างเต็มที่
สำหรับแอปพลิเคชัน Android นั้น Material Components for Android (MDC Android) จะรวมการออกแบบและวิศวกรรมเข้ากับไลบรารีคอมโพเนนต์เพื่อสร้างความสอดคล้องกันทั่วทั้งแอป เมื่อระบบ Material Design พัฒนาขึ้น คอมโพเนนต์เหล่านี้จะได้รับการอัปเดตเพื่อให้การติดตั้งใช้งานที่สมบูรณ์แบบทุกพิกเซลและเป็นไปตามมาตรฐานการพัฒนาส่วนหน้าของ Google MDC พร้อมใช้งานสำหรับเว็บ, iOS และ Flutter ด้วย
ใน Codelab นี้ คุณจะได้สร้างหน้าเข้าสู่ระบบโดยใช้คอมโพเนนต์ต่างๆ ของ MDC สำหรับ Android
สิ่งที่คุณจะสร้าง
Codelab นี้เป็น Codelab แรกจาก 4 รายการที่จะแนะนำการสร้างแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซบน Android ที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะสาธิตวิธีปรับแต่งคอมโพเนนต์ให้สะท้อนถึงแบรนด์หรือสไตล์โดยใช้ MDC Android
ในโค้ดแล็บนี้ คุณจะได้สร้างหน้าเข้าสู่ระบบสำหรับ Shrine ซึ่งมีสิ่งต่อไปนี้
- ช่องข้อความ 2 ช่อง ช่องหนึ่งสำหรับป้อนชื่อผู้ใช้และอีกช่องสำหรับป้อนรหัสผ่าน
- ปุ่ม 2 ปุ่ม ได้แก่ ปุ่ม "ยกเลิก" และปุ่ม "ถัดไป"
- ชื่อแอป (ศาลเจ้า)
- รูปภาพโลโก้ของศาลเจ้า
คอมโพเนนต์ MRC ของ Android ใน Codelab นี้
- ช่องข้อความ
- ปุ่ม
สิ่งที่ต้องมี
- ความรู้พื้นฐานเกี่ยวกับการพัฒนาแอป Android
- Android Studio (ดาวน์โหลดได้ที่นี่หากยังไม่มี)
- โปรแกรมจำลองหรืออุปกรณ์ Android (มีให้ใช้งานผ่าน Android Studio)
- โค้ดตัวอย่าง (ดูขั้นตอนถัดไป)
คุณจะให้คะแนนประสบการณ์ในการสร้างแอป Android ของคุณในระดับใด
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
เริ่มต้นใช้งาน Android Studio
เมื่อเปิด Android Studio คุณควรเห็นหน้าต่างชื่อ "ยินดีต้อนรับสู่ Android Studio" อย่างไรก็ตาม หากคุณเปิด Android Studio เป็นครั้งแรก ให้ทำตามขั้นตอนในวิซาร์ดการตั้งค่า Android Studio ด้วยค่าเริ่มต้น ขั้นตอนนี้อาจใช้เวลาสักครู่ในการดาวน์โหลดและติดตั้งไฟล์ที่จำเป็น คุณจึงไม่ต้องกังวลหากปล่อยให้ขั้นตอนนี้ทำงานในเบื้องหลังขณะทำขั้นตอนถัดไป
ดาวน์โหลดแอป Codelab เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-android-codelabs-101-starter/kotlin
...หรือโคลนโมเดลจาก GitHub
หากต้องการโคลนโค้ดแล็บนี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 101-starter
โหลดโค้ดเริ่มต้นใน Android Studio
- เมื่อวิซาร์ดการตั้งค่าดำเนินการเสร็จแล้วและหน้าต่างยินดีต้อนรับสู่ Android Studio ปรากฏขึ้น ให้คลิกเปิดโปรเจ็กต์ Android Studio ที่มีอยู่ ไปที่ไดเรกทอรีที่คุณติดตั้งโค้ดตัวอย่างไว้ แล้วเลือก kotlin ->คำบรรยาย (หรือค้นหา shrine ในคอมพิวเตอร์) เพื่อเปิดโปรเจ็กต์การจัดส่ง
- รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ ดังที่แสดงโดยสัญญาณบอกสถานะกิจกรรมที่ด้านล่างของหน้าต่าง Android Studio
- เมื่อถึงขั้นตอนนี้ Android Studio อาจแสดงข้อผิดพลาดบางอย่างเกี่ยวกับการสร้างเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือสร้าง เช่น เครื่องมือที่แสดงด้านล่าง ทําตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตและซิงค์โปรเจ็กต์
เพิ่มการพึ่งพาโปรเจ็กต์
โปรเจ็กต์ต้องอาศัยไลบรารีการสนับสนุน Android ของ MDC โค้ดตัวอย่างที่คุณดาวน์โหลดควรมีรายการนี้อยู่แล้ว แต่คุณควรทำตามขั้นตอนต่อไปนี้เพื่อตรวจสอบ
- ไปยังไฟล์
build.gradle
ของโมดูลapp
และตรวจสอบว่าการบล็อกdependencies
มีทรัพยากร Dependency ใน MDC Android ดังต่อไปนี้
api 'com.google.android.material:material:1.1.0-alpha06'
- (ไม่บังคับ) หากจำเป็น ให้แก้ไขไฟล์
build.gradle
เพื่อเพิ่มข้อกำหนดต่อไปนี้และซิงค์โปรเจ็กต์
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' }
เรียกใช้แอปเริ่มต้น
|
สำเร็จ! โค้ดเริ่มต้นสําหรับหน้าการเข้าสู่ระบบของ Shrine ควรทํางานในโปรแกรมจําลอง คุณจะเห็นชื่อ "ศาลเจ้า" และโลโก้ของศาลเจ้าอยู่ด้านล่าง
มาดูโค้ดกัน เราได้จัดเตรียมเฟรมเวิร์กการนำทาง Fragment
แบบง่ายไว้ในโค้ดตัวอย่างเพื่อแสดงส่วนย่อยและการนำทางระหว่างส่วนย่อย
เปิด MainActivity.kt
ในไดเรกทอรี shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine
โดยควรมีข้อมูลต่อไปนี้
MainActivity.kt
package com.google.codelabs.mdc.kotlin.shrine
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
class MainActivity : AppCompatActivity(), NavigationHost {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shr_main_activity)
if (savedInstanceState == null) {
supportFragmentManager
.beginTransaction()
.add(R.id.container, LoginFragment())
.commit()
}
}
override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
val transaction = supportFragmentManager
.beginTransaction()
.replace(R.id.container, fragment)
if (addToBackstack) {
transaction.addToBackStack(null)
}
transaction.commit()
}
}
กิจกรรมนี้จะแสดงไฟล์เลย์เอาต์ R.layout.shr_main_activity
ที่กําหนดไว้ใน shr_main_activity.xml
คุณจะเห็นได้ว่าใน onCreate(),
MainActivity.kt
เริ่มธุรกรรม Fragment
เพื่อแสดง LoginFragment
สําหรับโค้ดแล็บนี้ เราจะแก้ไข LoginFragment
กิจกรรมนี้ยังใช้เมธอด navigateTo(Fragment)
ที่กําหนดไว้ใน NavigationHost
ซึ่งช่วยให้ Fragment ไปยัง Fragment อื่นได้
Command + คลิก (หรือ Control + คลิก) shr_main_activity
ในไฟล์กิจกรรมเพื่อเปิดไฟล์เลย์เอาต์ หรือไปยังไฟล์เลย์เอาต์ใน app -> res -> layout -> shr_main_activity.xml
shr_main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"/>
ในส่วนนี้ เราจะเห็น <FrameLayout>
แบบง่ายที่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับส่วนย่อยที่กิจกรรมแสดง
ถัดไป เรามาเปิด LoginFragment.kt
LoginFragment.kt
package com.google.codelabs.mdc.kotlin.shrine
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
class LoginFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
val view = inflater.inflate(R.layout.shr_login_fragment, container, false)
return view
}
}
LoginFragment
ขยายไฟล์เลย์เอาต์ shr_login_fragment
และแสดงใน onCreateView()
ตอนนี้เรามาดูไฟล์เลย์เอาต์ shr_login_fragment.xml
เพื่อดูว่าหน้าเข้าสู่ระบบมีลักษณะเป็นอย่างไร
shr_login_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/loginPageBackgroundColor"
tools:context=".LoginFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:padding="24dp"
android:paddingTop="16dp">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="48dp"
android:layout_marginBottom="16dp"
app:srcCompat="@drawable/shr_logo" />
<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:textAllCaps="true"
android:textSize="16sp" />
</LinearLayout>
</ScrollView>
ที่นี่เราจะเห็น <LinearLayout>
ที่มี <ImageView>
อยู่ด้านบน ซึ่งแสดงถึงโลโก้ Shrine
หลังจากนั้นจะมีแท็ก <TextView>
ที่แสดงถึงป้ายกำกับศาลเจ้าใต้โลโก้ ข้อความสำหรับป้ายกำกับนี้คือทรัพยากรสตริงชื่อ @string/shr_app_name
หากCommand + คลิก (หรือ Control + คลิก) ชื่อทรัพยากรสตริง หรือเปิด app -> res -> values -> strings.xml
คุณจะเห็นไฟล์ strings.xml
ที่มีการกำหนดทรัพยากรสตริง เมื่อมีการเพิ่มทรัพยากรสตริงเพิ่มเติมในอนาคต ระบบจะกำหนดทรัพยากรเหล่านั้นที่นี่ ทรัพยากรทุกรายการในไฟล์นี้ควรมี shr_
นำหน้า เพื่อระบุว่าเป็นส่วนหนึ่งของแอป Shrine
เมื่อคุณคุ้นเคยกับโค้ดเริ่มต้นแล้ว มาติดตั้งใช้งานคอมโพเนนต์แรกกัน
3. เพิ่มช่องข้อความ
ในการเริ่มต้น เราจะเพิ่มช่องข้อความ 2 ช่องลงในหน้าการเข้าสู่ระบบเพื่อให้ผู้ใช้ป้อนชื่อผู้ใช้และรหัสผ่าน เราจะใช้คอมโพเนนต์ช่องข้อความ MDC ซึ่งมีฟังก์ชันการทำงานในตัวที่แสดงป้ายกำกับแบบลอยและข้อความแสดงข้อผิดพลาด
เพิ่ม XML
ใน shr_login_fragment.xml
ให้เพิ่มองค์ประกอบ TextInputLayout
2 รายการที่มีองค์ประกอบย่อย TextInputEditText
ภายใน <LinearLayout>
ใต้ป้ายกำกับ "SHRINE" <TextView>
shr_login_fragment.xml
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/password_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_password">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
ตัวอย่างข้างต้นแสดงช่องข้อความ 2 ช่อง แต่ละช่องประกอบด้วยองค์ประกอบ <TextInputLayout>
และองค์ประกอบย่อย <TextInputEditText>
ข้อความคำแนะนำสำหรับช่องข้อความแต่ละช่องระบุไว้ในแอตทริบิวต์ android:hint
เราได้รวมทรัพยากรสตริงใหม่ 2 รายการสําหรับช่องข้อความ ได้แก่ @string/shr_hint_username
และ @string/shr_hint_password
เปิด strings.xml
เพื่อดูทรัพยากรสตริงเหล่านี้
strings.xml
<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>
เพิ่มการตรวจสอบอินพุต
คอมโพเนนต์ TextInputLayout
มีฟังก์ชันการส่งความคิดเห็นเกี่ยวกับข้อผิดพลาดในตัว
หากต้องการแสดงความคิดเห็นเกี่ยวกับข้อผิดพลาด ให้ทําการเปลี่ยนแปลงต่อไปนี้ใน shr_login_fragment.xml
- ตั้งค่าแอตทริบิวต์
app:errorEnabled
เป็นtrue
ในองค์ประกอบ รหัสผ่านTextInputLayout
ซึ่งจะเพิ่มการเว้นวรรคเพิ่มเติมสำหรับข้อความแสดงข้อผิดพลาดใต้ช่องข้อความ - ตั้งค่าแอตทริบิวต์
android:inputType
เป็น "textPassword
" ในองค์ประกอบรหัสผ่านTextInputEditText
ซึ่งจะซ่อนข้อความที่ป้อนในช่องรหัสผ่าน
จากการเปลี่ยนแปลงเหล่านี้ ช่องข้อความใน shr_login_fragment.xml
ควรมีลักษณะดังนี้
shr_login_fragment.xml
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/password_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
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>
ตอนนี้ลองเรียกใช้แอป คุณควรเห็นหน้าเว็บที่มีช่องข้อความ 2 ช่องสำหรับ "ชื่อผู้ใช้" และ "รหัสผ่าน"
ดูภาพเคลื่อนไหวของป้ายกำกับแบบลอย
4. เพิ่มปุ่ม
ต่อไป เราจะเพิ่มปุ่ม 2 ปุ่มลงในหน้าการเข้าสู่ระบบ ได้แก่ "ยกเลิก" และ "ถัดไป" เราจะใช้คอมโพเนนต์ปุ่ม MDC ซึ่งมีเอฟเฟกต์การกระเพื่อมของหมึกที่เป็นเอกลักษณ์ของ Material Design ในตัว
เพิ่ม XML
ใน shr_login_fragment.xml
ให้เพิ่ม <RelativeLayout>
ลงใน <LinearLayout>
ใต้องค์ประกอบ TextInputLayout
แล้วเพิ่มองค์ประกอบ <MaterialButton>
2 รายการลงใน <RelativeLayout>
ไฟล์ XML ที่ได้ควรมีลักษณะดังนี้
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"
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.MaterialComponents.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>
เท่านี้ก็เรียบร้อย เมื่อคุณเรียกใช้แอป จะมีระลอกคลื่นหมึกแสดงขึ้นเมื่อคุณแตะแต่ละปุ่ม
5. ไปยังส่วนถัดไป
สุดท้าย เราจะเพิ่มโค้ด Kotlin บางส่วนลงใน LoginFragment.kt
เพื่อเรียกใช้ปุ่ม "ถัดไป" เพื่อเปลี่ยนไปยังส่วนอื่น
เพิ่มเมธอด isPasswordValid
บูลีนส่วนตัวใน LoginFragment.kt
ภายใต้ onCreateView()
โดยใช้ตรรกะในการพิจารณาว่ารหัสผ่านถูกต้องหรือไม่ ในการสาธิตนี้ เราจะตรวจสอบว่ารหัสผ่านมีความยาวอย่างน้อย 8 อักขระ
LoginFragment.kt
private fun isPasswordValid(text: Editable?): Boolean {
return text != null && text.length >= 8
}
ถัดไป ให้เพิ่มตัวรับฟังการคลิกลงในปุ่ม "ถัดไป" ซึ่งจะตั้งค่าและล้างข้อผิดพลาดตามเมธอด isPasswordValid()
ที่เราเพิ่งสร้างขึ้น ใน onCreateView()
ควรวางตัวรับฟังการคลิกนี้ไว้ระหว่างบรรทัด Inflator กับบรรทัด return view
ตอนนี้มาเพิ่ม Listener คีย์ลงในรหัสผ่าน TextInputEditText
เพื่อฟังเหตุการณ์สำคัญที่จะล้างข้อผิดพลาด นอกจากนี้ โปรแกรมรับฟังนี้ควรใช้ isPasswordValid()
เพื่อตรวจสอบว่ารหัสผ่านถูกต้องหรือไม่ คุณสามารถเพิ่มรายการนี้ไว้ใต้ตัวรับฟังการคลิกใน onCreateView()
ได้โดยตรง
ตอนนี้เมธอด onCreateView() ควรมีลักษณะดังนี้
LoginFragment.kt
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment.
val view = inflater.inflate(R.layout.shr_login_fragment, container, false)
// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
if (!isPasswordValid(password_edit_text.text!!)) {
password_text_input.error = getString(R.string.shr_error_password)
} else {
// Clear the error.
password_text_input.error = null
}
})
// Clear the error once more than 8 characters are typed.
view.password_edit_text.setOnKeyListener({ _, _, _ ->
if (isPasswordValid(password_edit_text.text!!)) {
// Clear the error.
password_text_input.error = null
}
false
})
return view
}
}
ตอนนี้เราไปยังอีกกลุ่มได้ ใน onCreateView()
ให้อัปเดต OnClickListener
เพื่อไปยังส่วนอื่นเมื่อการตรวจสอบข้อผิดพลาดสำเร็จ โค้ด clickListener
ของคุณควรมีลักษณะดังนี้
LoginFragment.kt
// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
if (!isPasswordValid(password_edit_text.text!!)) {
password_text_input.error = getString(R.string.shr_error_password)
} else {
// Clear the error.
password_text_input.error = null
// Navigate to the next Fragment.
(activity as NavigationHost).navigateTo(ProductGridFragment(), false)
}
})
เราได้เพิ่มบรรทัด (
activity
as
NavigationHost).navigateTo(ProductGridFragment(),
false
)
ลงในกรณี else
ของ Click Listener แล้ว บรรทัดนี้จะเรียกเมธอด navigateTo()
จาก MainActivity
เพื่อไปยังส่วนย่อยใหม่ – ProductGridFragment
ปัจจุบันหน้านี้เป็นหน้าว่างซึ่งคุณจะต้องนำมาใช้ใน MDC-102
ตอนนี้ให้สร้างแอป กดปุ่มถัดไปได้เลย
สำเร็จแล้ว! หน้าจอนี้จะเป็นจุดเริ่มต้นของ Codelab ถัดไปที่คุณจะทำใน MDC-102
6. เสร็จเรียบร้อย
การใช้มาร์กอัป XML พื้นฐานและ Kotlin ประมาณ 30 บรรทัดช่วยให้ไลบรารี Material Components for Android ช่วยคุณสร้างหน้าเข้าสู่ระบบที่สวยงามซึ่งเป็นไปตามหลักเกณฑ์การออกแบบ Material Design รวมถึงมีรูปลักษณ์และลักษณะการทำงานที่สอดคล้องกันในทุกอุปกรณ์
ขั้นตอนถัดไป
ช่องข้อความและปุ่มเป็นองค์ประกอบหลัก 2 อย่างในไลบรารี Android ของ MDC แต่ก็ยังมีมากกว่านั้น คุณสามารถดูคอมโพเนนต์อื่นๆ ใน MDC Android อีกทางเลือกหนึ่งคือไปที่ MDC 102: โครงสร้างดีไซน์ Material และเลย์เอาต์เพื่อดูข้อมูลเกี่ยวกับแถบแอปด้านบน มุมมองการ์ด และเลย์เอาต์แบบตารางกริด ขอขอบคุณที่ลองใช้ Material Components เราหวังว่าคุณจะชอบ Codelab นี้