1. Giới thiệu
Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Do một nhóm kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google tạo ra, MDC có hàng chục thành phần giao diện người dùng đẹp mắt và hữu ích, đồng thời 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 sự thay đổi mô hình trong ứng dụng của bạn. MDC Android được xây dựng dựa trên 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 lập tức 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 do MDC cung cấp.
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ề 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ó thông qua Android Studio)
- Mã mẫu (xem bước tiếp theo)
Bạn đánh giá mức độ kinh nghiệm của mình về việc tạo ứng dụng Android như thế nào?
2. Thiết lập môi trường phát triển
Tải ứng dụng khởi đầu cho 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/java. 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 java -> shipping (hoặc tìm kiếm shipping trên máy tính) để mở dự án Shipping.
- Chờ một chút để Android Studio tạo và đồng bộ hoá dự án, như được hiển thị bằng các chỉ báo hoạt động dọc theo cuối cửa sổ Android Studio.
- Tại thời điểm này, Android Studio có thể đưa ra 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ư công cụ được hiển thị 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 công cụ này và đồng bộ hoá dự á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 bao gồm một phần phụ thuộc vào MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
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
Trường văn bản Material Design có khả năng sử dụng cao hơn nhiều so với các trường văn bản thông thường. Bằng cách xác định vùng nhấn bằ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.
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.TextInputLayout
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 bản dựng 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
Trường văn bản MDC có tính năng trình bày lỗi tích hợp. 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 trang trí cũng thành màu đỏ.
Trong ShippingInfoActivity.java, hãy cập nhật phương thức onCreate() để có dạng như sau:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
Tạo bản dựng và chạy. Nhấn vào SAVE (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 với:
- Hiệu ứng gợn sóng mực
- Góc bo tròn
- Hỗ trợ giao diện
- Bố cục và kiểu chữ hoàn hảo cho Pixel
- Được xây dựng trên AppCompatButton (lớp nút Android tiêu chuẩn), vì vậy, bạn biết cách sử dụng các nút này trong mã của mình.
Tuỳ chọn Thay thế lớp nút
Theo mặc định, thư viện Material sẽ tự động mở rộng các Nút thông thường thành Nút MDC. Tuy nhiên, bạn có thể tuỳ chọn thay thế tất cả các tham chiếu đến Nút 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 bản dựng 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 màu và chiều rộng 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 bản dựng và chạy. Toàn bộ biểu mẫu phải được gói trong một thẻ:
Thành phần 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 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 và thẻ, đồng thời 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 tiện ích Android.