1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้งาน Material Design ได้ MDC สร้างขึ้นโดยทีมวิศวกรและนักออกแบบ UX ของ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบรายการ และพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop |
Material Components for Android (MDC Android) ไม่ใช่ระบบหรือเฟรมเวิร์กใหม่ที่ต้องมีการเปลี่ยนกระบวนทัศน์ในแอปของคุณ MDC Android สร้างขึ้นบนคลาสและ API เดียวกันกับที่คุณรู้จักอยู่แล้วใน Android เช่น ปุ่มและช่องข้อความ AppCompat คุณสามารถใช้คอมโพเนนต์ที่ MDC Android มีให้ได้ตามต้องการและปรับปรุงการออกแบบแอปที่มีอยู่ได้ทันที
สิ่งที่คุณจะสร้าง
ในโค้ดแล็บนี้ คุณจะแทนที่คอมโพเนนต์ที่มีอยู่บางส่วนในแบบฟอร์มด้วยคอมโพเนนต์ใหม่จาก MDC
คอมโพเนนต์ MDC-Android ใน Codelab นี้
- ช่องข้อความ
- ปุ่ม
- เมนู
สิ่งที่คุณต้องมี
- ความรู้พื้นฐานเกี่ยวกับการพัฒนาแอป Android
- Android Studio (ดาวน์โหลดที่นี่หากยังไม่มี)
- โปรแกรมจำลองหรืออุปกรณ์ Android (พร้อมใช้งานผ่าน Android Studio)
- โค้ดตัวอย่าง (ดูขั้นตอนถัดไป)
คุณจะให้คะแนนระดับประสบการณ์ในการสร้างแอป Android เท่าใด
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
ดาวน์โหลดแอป Codelab สำหรับผู้เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-android-codelabs-111-starter/kotlin อย่าลืม cd ไปยังไดเรกทอรีนั้นก่อนเริ่มต้น
...หรือโคลนจาก GitHub
หากต้องการโคลนโค้ดแล็บนี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
โหลดโค้ดเริ่มต้นใน Android Studio
- เมื่อวิซาร์ดการตั้งค่าเสร็จสิ้นและหน้าต่าง Welcome to Android Studio ปรากฏขึ้น ให้คลิก Open an existing Android Studio project ไปที่ไดเรกทอรีที่คุณติดตั้งโค้ดตัวอย่าง แล้วเลือก kotlin -> shipping (หรือค้นหา shipping ในคอมพิวเตอร์) เพื่อเปิดโปรเจ็กต์การจัดส่ง
- รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ ดังที่แสดงโดยตัวบ่งชี้กิจกรรมที่ด้านล่างของหน้าต่าง Android Studio
- ในขั้นตอนนี้ Android Studio อาจแสดงข้อผิดพลาดในการสร้างบางอย่างเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือบิลด์ เช่น เครื่องมือที่แสดงด้านล่าง ทำตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตเครื่องมือเหล่านี้และซิงค์โปรเจ็กต์
เรียกใช้แอปเริ่มต้น
|
|
สำเร็จ! คุณควรเห็นแอปและแบบฟอร์มของแอป
3. อัปเดตช่องข้อความ
ช่องข้อความ Material Design มีความสามารถในการใช้งานที่เหนือกว่าช่องข้อความธรรมดาอย่างมาก การกำหนดโซนการแตะด้วยเส้นขอบหรือการเติมพื้นหลังจะช่วยให้ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับแบบฟอร์มหรือระบุช่องข้อความภายในเนื้อหาที่ซับซ้อนมากขึ้น
นำเข้า MDC-Android
ไปที่ไฟล์ build.gradle ของโมดูล app และตรวจสอบว่าบล็อก dependencies มีทรัพยากร Dependency ใน MDC Android
api 'com.google.android.material:material:1.1.0-alpha05'
แทนที่รูปแบบช่องข้อความ
ใน shipping_info_activity.xml ให้เพิ่มสไตล์ต่อไปนี้ลงในคอมโพเนนต์ XML ของ TextInputLayout ทั้งหมด
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
TextInputLayout แต่ละรายการควรมีลักษณะดังนี้
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
สร้างและเรียกใช้
ช่องข้อความทั้งหมดได้รับการอัปเดตให้ใช้การออกแบบใหม่กว่าใน MDC
เพิ่มข้อผิดพลาด
ฟิลด์ข้อความ MDC มีการนำเสนอข้อผิดพลาดในตัว MDC จะเพิ่มข้อความสีแดงใต้ช่องข้อความและอัปเดตการตกแต่งให้เป็นสีแดงด้วย
ใน ShippingInfoActivity.kt ให้อัปเดต onCreate() เพื่อตรวจสอบข้อความที่ป้อนและตั้งค่าข้อผิดพลาดตามความเหมาะสม ซึ่งควรมีลักษณะดังนี้
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
สร้างและเรียกใช้ กดบันทึก แต่เว้นช่องข้อความอย่างน้อย 1 ช่องว่างไว้
ช่องข้อความที่ว่างเปล่าจะเป็นสีแดงและมีข้อความแสดงข้อผิดพลาดอยู่ด้านล่าง
4. อัปเดตปุ่ม
MDC มีปุ่มที่มีลักษณะดังนี้
- คลื่นหมึก
- มุมมน
- การรองรับธีม
- เลย์เอาต์และตัวอักษรที่คมชัด
- สร้างขึ้นบน AppCompatButton (คลาสปุ่มมาตรฐานของ Android) เพื่อให้คุณทราบวิธีใช้ปุ่มเหล่านี้ในโค้ด
ไม่บังคับ: แทนที่คลาสปุ่ม
โดยค่าเริ่มต้น ไลบรารี Material จะขยายปุ่มปกติเป็นปุ่ม MDC โดยอัตโนมัติ อย่างไรก็ตาม คุณอาจเลือกแทนที่การอ้างอิงทั้งหมดไปยัง Button ด้วย MaterialButton เพื่อให้เข้าถึงเมธอดเพิ่มเติมที่ใช้ได้เฉพาะใน MaterialButton เช่น การเปลี่ยนรัศมีมุม ปุ่ม MDC เป็นคอมโพเนนต์แบบเสียบแล้วใช้เลยที่เรียบง่าย คุณเพียงแค่แทนที่ชื่อคอมโพเนนต์ XML Button ด้วย MaterialButton และใช้รูปแบบ MaterialButton เริ่มต้นกับ MaterialButton
ใน shipping_info_activity.xml ให้เปลี่ยนปุ่มจาก
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
ถึง:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
สร้างและเรียกใช้
5. เพิ่มบัตร
MaterialCardView เป็นคอมโพเนนต์ที่สร้างขึ้นบน CardView โดยมีสิ่งต่อไปนี้
- ระดับความสูงและการจัดรูปแบบที่ถูกต้อง
- แอตทริบิวต์ความหนาและสีของเส้น
การแสดงเนื้อหาในรูปแบบการ์ด
ห่อLinearLayoutที่มีเนื้อหาของคุณใน shipping_info_activity.xml ด้วยคอมโพเนนต์ MaterialCardView ดังนี้
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
สร้างและเรียกใช้ ควรห่อหุ้มแบบฟอร์มทั้งหมดไว้ในการ์ด
คอมโพเนนต์ Material Card View เป็นวิธีที่คุ้นเคยแต่แปลกใหม่ในการใส่เนื้อหาลงในการ์ดได้อย่างง่ายดาย
6. สรุป
คุณได้แทนที่คอมโพเนนต์ทั่วไปบางอย่างเพื่อแสดงคุณค่าในทันที ได้แก่ ช่องข้อความ ปุ่ม การ์ด และคุณไม่จำเป็นต้องออกแบบแอปใหม่ทั้งหมด คอมโพเนนต์อื่นๆ ก็สร้างความแตกต่างได้เช่นกัน เช่น แถบแอปด้านบนและ TabLayout
ขั้นตอนถัดไป
คุณสำรวจคอมโพเนนต์เพิ่มเติมใน MDC-Android ได้โดยไปที่แคตตาล็อกวิดเจ็ต Android