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 kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google, MDC có hàng chục thành phần giao diện người dùng đẹp mắt và có chức năng, đồng thời có sẵn cho Android, iOS, web và Flutter.material.io/develop |
Material Components cho Android (MDC Android) không phải là một hệ thống hoặc khung mới đòi hỏi sự thay đổi mô hình trong ứng dụng của bạn. MDC Android được xây dựng trên cùng các lớp và API mà bạn đã biết trong Android, chẳng hạn như các nút và trường văn bản AppCompat. 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 thiện ngay thiết kế cho ứng dụng hiện có.
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 biểu mẫu bằng các thành phần mới của MDC.
Các thành phần MDC-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ề hoạt động phát triển Android
- Android Studio (tải xuống tại đây nếu bạn chưa có)
- Một trình mô phỏng hoặc thiết bị Android (có trong Android Studio)
- Mã mẫu (xem bước tiếp theo)
Bạn đánh giá thế nào về kinh nghiệm của mình trong việc tạo ứng dụng Android?
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 xuống
Ứ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ừ 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) xuất hiện, hãy nhấp vào Open an existing Android Studio project (Mở một dự án hiện có trong Android Studio). Chuyển đến thư mục mà bạn đã cài đặt mã mẫu, rồi chọn kotlin -> shipping (hoặc tìm shipping trên máy tính) để mở dự án Vận chuyển.
- Chờ một lát để Android Studio tạo và đồng bộ hoá dự án, như được thể hiện 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 vì bạn thiếu SDK Android hoặc các công cụ bản dựng, chẳng hạn như lỗi được minh hoạ bên dưới. Hãy làm theo hướng dẫn trong Android Studio để cài đặt/cập nhật các thành phần 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 các trường văn bản
Các trường văn bản Material Design có khả năng sử dụng cao hơn so với các trường văn bản thuần tuý. Bằng cách xác định vùng nhấn bằng một đường viền hoặc nền tô, 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 có một phần phụ thuộc vào 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ả các thành phần XML 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 các thiết kế mới hơn trong MDC.
Thêm lỗi
Các trường văn bản MDC có sẵn tính năng trình bày lỗi. MDC sẽ thêm văn bản màu đỏ bên dưới trường văn bản của 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 dữ liệu nhập văn bản và đặt lỗi cho phù hợp. Đoạn mã 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 bản dựng và chạy. Nhấn vào LƯU, nhưng để trống ít nhất một trường văn bản:
Các trường văn bản trống 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:
- Hiệu ứng gợn sóng mực
- Góc bo tròn
- Hỗ trợ tạo giao diện
- Bố cục và kiểu chữ hoàn hảo đến từng pixel
- Được xây dựng trên AppCompatButton (lớp nút Android tiêu chuẩn) để bạn biết cách sử dụng các nút này trong mã của mình.
[Không bắt buộc] Thay thế lớp nút
Theo mặc định, thư viện Material sẽ tự động tăng kích thước các Nút thông thường thành Nút MDC. Tuy nhiên, bạn có thể tuỳ ý thay thế tất cả các tham chiếu đến Button bằng MaterialButton để có thể truy cập vào các phương thức bổ sung chỉ có trong MaterialButton, chẳng hạn như thay đổi bán kính góc. Nút MDC là một thành phần đơn giản, chỉ cần cắm và chạy. 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 của bạn 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 trên CardView với:
- Độ cao và kiểu dáng chính xác
- Thuộc tính độ rộng và màu của nét chữ
Bao bọc nội dung trong thẻ
Bọc LinearLayout chứa nội dung của bạn trong shipping_info_activity.xml bằng một 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 bản dựng và chạy. Toàn bộ biểu mẫu phải được bao bọc trong một thẻ:
Thành phần Material Card View 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 trong một thẻ.
6. Tóm tắt
Bạn đã thay thế một số thành phần phổ biến để cho thấy giá trị tức thì: trường văn bản, nút, thẻ và bạn không 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á thêm nhiều thành phần trong MDC-Android bằng cách truy cập vào Danh mục các tiện ích Android.