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

MDC-101 Android: ข้อมูลพื้นฐานขององค์ประกอบ (MDC) (Kotlin)

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 เพื่อติดตั้ง/อัปเดตและซิงค์โปรเจ็กต์

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

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

โปรเจ็กต์ต้องอาศัยไลบรารีการสนับสนุน 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'
}

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

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

สำเร็จ! โค้ดเริ่มต้นสําหรับหน้าการเข้าสู่ระบบของ 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 ซึ่งมีฟังก์ชันการทำงานในตัวที่แสดงป้ายกำกับแบบลอยและข้อความแสดงข้อผิดพลาด

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องข้อความใหม่ในบทความของหลักเกณฑ์ Material

เพิ่ม 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 นี้

ฉันทำ Codelab นี้เสร็จภายในระยะเวลาและความพยายามที่เหมาะสม

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

เห็นด้วย

เป็นกลาง

ไม่เห็นด้วย

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

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

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

เห็นด้วย

เป็นกลาง

ไม่เห็นด้วย

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