1. Giới thiệu
Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Được tạo bởi một nhóm các kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google, MDC có nhiều thành phần giao diện người dùng đẹp mắt, dễ sử dụng và có sẵn cho Android, iOS, web và Flutter.material.io/develop |
Thành phần Material cho Android (MDC Android) không phải là một hệ thống hoặc khung mới đòi hỏi bạn phải thay đổi mô hình trong ứng dụng. MDC Android được xây dựng dựa trên cùng các lớp và API bạn đã biết trong Android, chẳng hạn như các nút AppCompat và trường văn bản. Bạn có thể sử dụng các thành phần do MDC Android cung cấp khi cần và cải tiến thiết kế ngay lập tức cho ứng dụng hiện có của mình.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ thay thế một số thành phần hiện có trong một biểu mẫu bằng các thành phần mới của MDC.
Các thành phần MADC-Android trong lớp học lập trình này
- Trường văn bản
- Nút
- Trình đơn
Bạn cần có
- Kiến thức cơ bản về phát triển Android
- Android Studio (tải xuống tại đây nếu bạn chưa có)
- Trình mô phỏng hoặc thiết bị Android (có trên Android Studio)
- Mã mẫu (xem bước tiếp theo)
Bạn đánh giá mức độ kinh nghiệm xây dựng ứng dụng Android của mình ở mức nào?
2. Thiết lập môi trường phát triển
Tải ứng dụng khởi đầu của lớp học lập trình
Ứng dụng khởi đầu nằm trong thư mục material-components-android-codelabs-111-starter/kotlin. Hãy nhớ cd vào thư mục đó trước khi bắt đầu.
...hoặc sao chép tệp trên GitHub
Để sao chép lớp học lập trình này từ GitHub, hãy chạy các lệnh sau:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Tải mã khởi đầu trong Android Studio
- Sau khi trình hướng dẫn thiết lập hoàn tất và cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio) hiển thị, hãy nhấp vào Open an existing Android Studio project (Mở một dự án Android Studio hiện có). Chuyển đến thư mục bạn đã cài đặt mã mẫu rồi chọn kotlin -> phí vận chuyển (hoặc tìm thuộc tính shipping trên máy tính) để mở dự án Vận chuyển.
- Đợi một chút để Android Studio tạo và đồng bộ hoá dự án, như được minh hoạ bằng các chỉ báo hoạt động ở cuối cửa sổ Android Studio.
- Tại thời điểm này, Android Studio có thể phát sinh một số lỗi bản dựng do bạn đang thiếu SDK Android hoặc công cụ xây dựng, chẳng hạn như lỗi hiển thị dưới đây. Làm theo hướng dẫn trong Android Studio để cài đặt/cập nhật các ứng dụng này và đồng bộ hoá dự án của bạn.
Chạy ứng dụng khởi đầu
|
|
Thành công! Bạn sẽ thấy ứng dụng và biểu mẫu của ứng dụng đó.
3. Cập nhật trường văn bản
Các trường văn bản Material Design có khả năng hữu dụng tăng lên đáng kể so với các trường văn bản thuần tuý. Bằng cách xác định vùng lượt truy cập bằng cách sử dụng đường viền hoặc màu nền, người dùng có nhiều khả năng tương tác với biểu mẫu của bạn hoặc xác định các trường văn bản trong nội dung phức tạp hơn.
Nhập MDC-Android
Chuyển đến tệp build.gradle của mô-đun app và đảm bảo rằng khối dependencies chứa phần phụ thuộc trên MDC Android:
api 'com.google.android.material:material:1.1.0-alpha05'
Thay thế kiểu trường văn bản
Trong shipping_info_activity.xml, hãy thêm kiểu sau vào tất cả thành phần XML của TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Mỗi TextInputLayout sẽ có dạng như sau:
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>
Tạo và chạy:
Tất cả các trường văn bản đều được cập nhật để sử dụng những thiết kế mới hơn trong MDC.
Thêm lỗi
Các trường văn bản MDC được tích hợp sẵn tính năng trình bày lỗi. MDC thêm văn bản màu đỏ bên dưới trường văn bản và cập nhật các thành phần trang trí thành màu đỏ.
Trong ShippingInfoActivity.kt, hãy cập nhật onCreate() để kiểm tra nội dung nhập văn bản và đặt lỗi thích hợp. Lệnh này sẽ có dạng như sau:
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!
}
}
}
Tạo và chạy. Nhấn LƯU nhưng để trống ít nhất một trường văn bản:
Những trường văn bản trống sẽ có màu đỏ và có văn bản lỗi bên dưới.
4. Cập nhật nút
MDC có các nút chứa:
- Gợn sóng
- Góc bo tròn
- Hỗ trợ tuỳ chỉnh giao diện
- Bố cục và kiểu chữ hoàn hảo pixel
- Được xây dựng dựa trên AppCompatButton (lớp nút Android tiêu chuẩn) để bạn biết cách sử dụng chúng trong mã của mình.
Có thể thay thế lớp nút
Theo mặc định, thư viện Material sẽ tự động tăng cường các Nút thông thường thành các Nút MDC. Tuy nhiên, bạn có thể tuỳ ý thay thế tất cả các mục tham chiếu đến Nút bằng MaterialButton để có thể truy cập vào các phương thức khác chỉ có trong MaterialButton, chẳng hạn như thay đổi bán kính góc. Các nút MDC là một thành phần "cắm là chạy" đơn giản. Bạn chỉ cần thay thế tên thành phần XML Button bằng MaterialButton và áp dụng kiểu MaterialButton mặc định cho MaterialButton.
Trong shipping_info_activity.xml, hãy thay đổi nút từ:
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" />
Đến:
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" />
Tạo và chạy:
5. Thêm thẻ
MaterialCardView là một thành phần được xây dựng dựa trên CardView có:
- Chỉnh độ cao và kiểu
- Thuộc tính màu sắc và độ rộng của nét chữ
Gói nội dung trong thẻ
Gói LinearLayout chứa nội dung của bạn trong shipping_info_activity.xml bằng thành phần MaterialCardView như sau:
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>
Tạo và chạy. Toàn bộ biểu mẫu phải được đặt trong một thẻ:
Thành phần Material Card View (Chế độ xem thẻ Material) là một cách quen thuộc nhưng mới mẻ để dễ dàng gói nội dung của bạn vào một thẻ.
6. Tóm tắt
Bạn đã thay thế một số thành phần phổ biến để thể hiện giá trị tức thì: các trường văn bản, nút, thẻ và bạn không cần phải thiết kế lại toàn bộ ứng dụng. Các thành phần khác cũng có thể tạo ra sự khác biệt lớn, chẳng hạn như Thanh ứng dụng trên cùng và TabLayout.
Các bước tiếp theo
Bạn có thể khám phá nhiều thành phần khác trong MDC-Android bằng cách truy cập Danh mục tiện ích Android.