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 |
Trong lớp học lập trình MDC-103, bạn đã tùy chỉnh màu sắc, độ cao và kiểu chữ, của Thành phần Material (MDC) để tạo kiểu cho ứng dụng của mình.
Một thành phần trong hệ thống Material Design thực hiện một tập hợp các tác vụ được xác định trước và có một số đặc điểm nhất định, như một nút. Tuy nhiên, nút không chỉ là một cách để người dùng thực hiện hành động, mà còn là cách thể hiện hình ảnh, kích thước và màu sắc trực quan để người dùng biết rằng nút đó có tính tương tác và điều gì đó sẽ xảy ra khi chạm hoặc nhấp vào.
Nguyên tắc Material Design mô tả các thành phần từ góc nhìn của một nhà thiết kế. Phần mô tả này bao gồm một loạt các hàm cơ bản có sẵn trên các nền tảng, cũng như các phần tử giải phẫu tạo nên mỗi thành phần. Ví dụ: phông nền chứa một lớp mặt sau và nội dung trong đó, lớp trước và nội dung, quy tắc chuyển động và các tùy chọn hiển thị. Bạn có thể tùy chỉnh từng thành phần cho phù hợp với nhu cầu, trường hợp sử dụng và nội dung của từng ứng dụng. Trong hầu hết trường hợp, những phần này là các chế độ xem, chức năng điều khiển và chức năng truyền thống từ SDK của nền tảng.
Mặc dù nguyên tắc Material Design đặt tên cho nhiều thành phần, nhưng không phải tất cả các thành phần trong số đó đều phù hợp với mã có thể sử dụng lại và do đó không có trong MDC. Bạn có thể tự tạo các trải nghiệm này để đạt được kiểu dành riêng cho ứng dụng của mình, tất cả đều sử dụng mã truyền thống.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ thêm phông nền vào Shrine. Bộ lọc này sẽ lọc các sản phẩm hiển thị trong lưới không đối xứng theo danh mục. Bạn sẽ sử dụng:
- Hình dạng
- Chuyển động
- Lớp học SDK Android truyền thống
Các thành phần MDC-Android trong lớp học lập trình này
- Hình dạng
Bạn cần có
- Kiến thức cơ bản về việc phát triển Android
- Android Studio (tải ứng dụng xuống tại đây nếu bạn chưa có)
- Trình mô phỏng hoặc thiết bị Android (có sẵn thông qua Android Studio)
- Mã mẫu (xem bước tiếp theo)
Bạn xếp hạng trải nghiệm xây dựng ứng dụng Android như thế nào?
Tiếp tục từ MDC-103?
Nếu bạn đã hoàn tất MDC-103, mã của bạn sẽ sẵn sàng cho lớp học lập trình này. Chuyển sang bước 3.
Thiết lập từ đầu?
Tải ứng dụng Lớp học lập trình dành cho người mới bắt đầu
Ứng dụng khởi động nằm trong thư mục material-components-android-codelabs-104-starter/java. Hãy nhớ cd vào thư mục đó trước khi bắt đầu.
...hoặc sao chép đường liên kết 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 104-starter
Tải mã dành cho người mới bắt đầu trong Android Studio
- Sau khi trình hướng dẫn thiết lập hoàn tất và cửa sổ Chào mừng bạn đến với Android Studio, hãy nhấp vào Mở một dự án Android Studio hiện có. Chuyển đến thư mục mà bạn đã cài đặt mã mẫu và chọn java -> Temple (hoặc tìm shrine trên máy tính) để mở dự án Temple.
- Đợi trong giây lát để Android Studio tạo và đồng bộ hóa dự án, theo như 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ể gặp một số lỗi bản dựng vì bạn thiếu SDK Android hoặc công cụ tạo, chẳng hạn như công cụ hiển thị bên dưới. Làm theo hướng dẫn trong Android Studio để cài đặt/cập nhật và đồng bộ hóa dự án này.
Thêm các phần phụ thuộc dự án
Dự án cần phần phụ thuộc trên thư viện hỗ trợ MDC Android. Mã mẫu mà bạn đã tải xuống phải có phần phụ thuộc này nhưng bạn nên thực hiện các bước sau để đảm bảo.
- Chuyển đến tệp
build.gradlemô-đunappvà đảm bảo rằng khốidependenciesbao gồm phần phụ thuộc trên MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
- (Không bắt buộc) Nếu cần, hãy chỉnh sửa tệp
build.gradleđể thêm các phần phụ thuộc sau và đồng bộ hóa dự án.
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}
Chạy ứng dụng dành cho người mới bắt đầu
|
Thành công! Bạn sẽ thấy ứng dụng Đền thờ chạy trên thiết bị của mình.
Phông nền là mặt sau xa nhất của ứng dụng, xuất hiện phía sau tất cả nội dung và thành phần khác. Thành phần này bao gồm hai nền tảng: lớp sau (hiển thị các thao tác và bộ lọc) và lớp trước (hiển thị nội dung). Bạn có thể sử dụng phông nền để hiển thị thông tin và thao tác tương tác, chẳng hạn như bộ lọc thao tác hoặc bộ lọc nội dung.
Thay đổi nội dung lưới
Trong shr_product_grid_fragment.xml, hãy thêm thuộc tính android:visibility="gone" vào NestedScrollView để tạm thời xóa nội dung sản phẩm:
shr_product_Grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Chúng tôi sẽ cài đặt phông nền ở khu vực này. Để tránh hiển thị một khoảng phân chia giữa thanh ứng dụng trên cùng và nội dung trình đơn xuất hiện trên phông nền, chúng tôi sẽ làm cho phông nền có màu giống với thanh ứng dụng trên cùng.
Trong shr_product_grid_fragment.xml, hãy thêm phần sau làm phần tử đầu tiên trong thư mục gốc FrameLayout của bạn, trước phần AppBarLayout:
shr_product_Grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>Trong styles.xml, hãy thêm các mục sau:
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>Rất tốt! Bạn đã thêm một phông nền tuyệt đẹp vào giao diện người dùng của Đền. Tiếp theo, chúng ta sẽ thêm một trình đơn.
Thêm thực đơn
Trình đơn về cơ bản là danh sách các nút văn bản. Chúng tôi sẽ thêm một đường dẫn vào đây.
Tạo một bố cục mới có tên là shr_backdrop.xml trong thư mục res -> layout của bạn và thêm những thông tin sau:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>Và thêm danh sách này vào LinearLayout mà bạn vừa thêm vào shr_product_grid_fragment.xml bằng cách sử dụng thẻ <include>:
shr_product_Grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>Tạo và chạy. Màn hình chính sẽ có dạng như sau:
Phông nền của bạn đã hoàn tất. Hãy khôi phục nội dung mà chúng tôi đã che giấu trước đó.
Trước khi chúng tôi thực hiện bất kỳ thay đổi nào đối với Đền thờ trong lớp học lập trình này, nội dung chính của sản phẩm nằm ở mặt sau xa nhất. Bằng cách thêm phông nền, nội dung này hiện được nhấn mạnh hơn vì xuất hiện trước phông nền đó.
Thêm một lớp mới
Chúng ta nên hiển thị lại lớp lưới sản phẩm. Xóa thuộc tính android:visibility="gone" khỏi NestedScrollView:
shr_product_Grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Tạo kiểu cho lớp mặt trước bằng một rãnh ở góc trên bên trái. Material Design gọi loại tùy chỉnh này là một hình dạng. Các bề mặt chất liệu có thể hiển thị ở nhiều hình dạng. Hình dạng làm nổi bật và thêm phong cách cho các giao diện và có thể dùng để thể hiện thương hiệu. Hình dạng chất liệu có thể có các góc và góc cong hay góc cũng như số cạnh bất kỳ. Chúng có thể đối xứng hoặc không đều.
Thêm hình dạng
Sửa đổi hình dạng của lưới. Chúng tôi đã cung cấp nền hình dạng tùy chỉnh, nhưng hình dạng chỉ hiển thị chính xác trên Android Marshmallow trở lên. Chúng tôi chỉ có thể đặt nền shr_product_grid_background_shape trên NestedScrollView cho thiết bị Android Marshmallow trở lên. Trước tiên, hãy thêm id vào NestedScrollView của bạn để chúng tôi có thể tham chiếu đến trong mã, như sau:
shr_product_Grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Sau đó, hãy đặt nền trong ProductGridFragment.java theo phương thức lập trình. Thêm logic sau đây để đặt nền ở cuối onCreateView(), ngay trước câu lệnh trả về:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}Cuối cùng, chúng ta sẽ cập nhật tài nguyên màu productGridBackgroundColor (cũng được nền của hình dạng tùy chỉnh sử dụng) như sau:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>Tạo và chạy:
Chúng tôi đã thiết kế hình dạng theo phong cách tùy chỉnh cho Đền thờ. Do độ cao bề mặt, người dùng có thể thấy rằng có vật nào đó nằm ngay sau lớp trắng phía trước. Hãy thêm chuyển động để người dùng có thể thấy hành động:
Chuyển động là một cách giúp ứng dụng của bạn trở nên sống động. Chuyển động có thể lớn và kịch tính, tinh tế và tối giản hoặc ở bất kỳ đâu. Loại chuyển động mà bạn sử dụng phải phù hợp với tình huống. Những chuyển động được áp dụng cho các hành động thông thường lặp lại phải nhỏ và tinh tế để không thường xuyên mất quá nhiều thời gian. Các tình huống khác, như lần đầu tiên người dùng mở ứng dụng, có thể bắt mắt hơn và có thể giúp hướng dẫn người dùng về cách sử dụng ứng dụng của bạn.
Thêm chuyển động hiển thị vào nút trình đơn
Chuyển động là hình dạng ở phía trước chuyển thẳng xuống dưới. Chúng tôi đã cung cấp trình xử lý lượt nhấp cho bạn. Trình xử lý này sẽ hoàn thành ảnh động dịch cho trang tính, bằng NavigationIconClickListener.java. Chúng ta có thể đặt trình xử lý lượt nhấp này vào trong phương thức setupToolbar() của ProductGridFragment.java:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));Giờ đây, phương thức setUpToolbar() của bạn sẽ có dạng như sau:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}Tạo và chạy. Nhấn nút trình đơn:
Thao tác nhấn lại biểu tượng trình đơn điều hướng sẽ ẩn trình đơn.
Chuyển động của lớp trước
Chuyển động là một cách tuyệt vời để thể hiện thương hiệu của bạn. Hãy xem chuyển động hiển thị trông như thế nào khi sử dụng một đường cong thời gian khác.
Hãy cập nhật mã của bạn trong setupToolbar() trong ProductGridFragment.java để chuyển một Bộ nội suy đến trình nghe lượt nhấp vào biểu tượng điều hướng, như sau:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator()));
}
Điều này tạo ra hiệu ứng khác phải không?
Biểu tượng gắn thương hiệu cũng mở rộng sang các biểu tượng quen thuộc. Hãy để biểu tượng hiển thị tùy chỉnh và hợp nhất biểu tượng với tiêu đề của chúng tôi để có giao diện độc đáo và có thương hiệu.
Thay đổi biểu tượng nút trình đơn
Thay đổi nút trình đơn để hiển thị biểu tượng có thiết kế kiểu hình thoi. Cập nhật Thanh công cụ trong shr_product_grid_fragment.xml để sử dụng biểu tượng được gắn thương hiệu mới mà chúng tôi đã cung cấp (shr_branded_menu), đồng thời đặt các thuộc tính app:contentInsetStart và android:padding để làm cho thanh công cụ phù hợp hơn với thông số kỹ thuật của nhà thiết kế:
shr_product_Grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
Cập nhật lại trình xử lý lượt nhấp trong setupToolbar() trong ProductGridFragment.java để đưa các tính năng có thể vẽ vào thanh công cụ khi trình đơn đang mở và khi trình đơn đóng, như sau:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator(),
getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}
Tạo và chạy:
Tuyệt vời! Khi phông nền có thể hiển thị, biểu tượng trình đơn kim cương sẽ hiển thị. Khi bạn có thể che giấu trình đơn, biểu tượng đóng sẽ hiển thị.
Trong suốt 4 lớp học lập trình này, bạn đã học cách sử dụng Thành phần Material để tạo ra những trải nghiệm người dùng độc đáo, trang nhã thể hiện cá tính và phong cách của một thương hiệu.
Các bước tiếp theo
Lớp học lập trình này, MDC-104, hoàn thành trình tự lớp học lập trình này. 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.
Để tiếp tục thử thách với lớp học lập trình này, hãy sửa đổi ứng dụng Đền thờ để thay đổi hình ảnh sản phẩm hiển thị khi bạn chọn một danh mục từ trình đơn phông nền.
Để tìm hiểu cách kết nối ứng dụng này với Firebase cho phần phụ trợ đang hoạt động, hãy xem Lớp học lập trình Android về Firebase.