1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop |
Material Components สำหรับ Android (MDC Android) ไม่ใช่ระบบหรือเฟรมเวิร์กใหม่ที่ต้องเปลี่ยนกระบวนทัศน์ในแอปของคุณ MDC Android สร้างขึ้นในคลาสและ API เดียวกับที่คุณรู้จักใน Android เช่น ปุ่ม AppCompat และช่องข้อความ คอมโพเนนต์ที่ MDC ให้ Android สามารถใช้ตามความจำเป็นและช่วยปรับปรุงการออกแบบแอปที่มีอยู่ได้ทันที
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะได้แทนที่คอมโพเนนต์ที่มีอยู่บางส่วนในแบบฟอร์มด้วยคอมโพเนนต์ใหม่โดย MDC
คอมโพเนนต์ MDC-Android ใน Codelab นี้
- ช่องข้อความ
- ปุ่ม
- เมนู
สิ่งที่คุณต้องมี
- ความรู้พื้นฐานเกี่ยวกับการพัฒนา Android
- Android Studio (ดาวน์โหลดได้ที่นี่หากยังไม่มี)
- โปรแกรมจำลองหรืออุปกรณ์ Android (ใช้งานได้ผ่าน Android Studio)
- โค้ดตัวอย่าง (ดูขั้นตอนถัดไป)
คุณจะให้คะแนนประสบการณ์ในการสร้างแอป Android ของคุณในระดับใด
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
ดาวน์โหลดแอป Codelab เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-android-codelabs-111-starter/kotlin อย่าลืม cd ในไดเรกทอรีดังกล่าวก่อนเริ่มต้น
...หรือโคลนโมเดลจาก GitHub
หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
โหลดโค้ดเริ่มต้นใน Android Studio
- เมื่อวิซาร์ดการตั้งค่าดำเนินการเสร็จแล้วและหน้าต่างยินดีต้อนรับสู่ Android Studio ปรากฏขึ้น ให้คลิกเปิดโปรเจ็กต์ Android Studio ที่มีอยู่ ไปที่ไดเรกทอรีที่คุณได้ติดตั้งโค้ดตัวอย่างไว้ และเลือก kotlin -> การจัดส่ง (หรือค้นหาการจัดส่งในคอมพิวเตอร์) เพื่อเปิดโครงการการจัดส่ง
- รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ ดังที่แสดงโดยสัญญาณบอกสถานะกิจกรรมที่ด้านล่างของหน้าต่าง Android Studio
- ณ จุดนี้ Android Studio อาจแสดงข้อผิดพลาดบางอย่างในเวอร์ชันเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือสร้างบิลด์ ดังตัวอย่างด้านล่าง ทำตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตโปรเจ็กต์เหล่านี้ และซิงค์โปรเจ็กต์
เรียกใช้แอปเริ่มต้น
|
|
สำเร็จ! คุณควรจะเห็นแอปและแบบฟอร์มของแอป
3. อัปเดตช่องข้อความ
ช่องข้อความของดีไซน์ Material มีความสามารถในการใช้งานมากกว่าช่องข้อความธรรมดา เมื่อกำหนดโซน Hit ด้วยโครงร่างหรือการเติมพื้นหลัง ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับแบบฟอร์มหรือระบุช่องข้อความภายในเนื้อหาที่ซับซ้อนมากขึ้น
นำเข้า 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 โดยอัตโนมัติ อย่างไรก็ตาม คุณอาจเลือกที่จะแทนที่การอ้างอิงไปยังปุ่มทั้งหมดด้วย 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 เป็นวิธีที่คุ้นเคยแต่ใหม่ในการห่อเนื้อหาไว้ในการ์ดอย่างง่ายดาย
6. สรุป
คุณได้แทนที่คอมโพเนนต์ทั่วไปบางรายการเพื่อแสดงมูลค่าทันที ซึ่งได้แก่ ช่องข้อความ ปุ่ม การ์ด โดยไม่จําเป็นต้องออกแบบแอปใหม่ทั้งหมด คอมโพเนนต์อื่นๆ ก็ช่วยได้มากเช่นกัน เช่น แถบแอปยอดนิยมและ TabLayout
ขั้นตอนถัดไป
คุณสามารถดูคอมโพเนนต์เพิ่มเติมใน MDC-Android ได้โดยไปที่แคตตาล็อกวิดเจ็ตของ Android