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 |
Trong lớp học lập trình MDC-103, bạn đã tuỳ 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.
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, chẳng hạn như nút. Tuy nhiên, nút không chỉ là cách để người dùng thực hiện một hành động mà còn là một biểu hiện trực quan về hình dạng, kích thước và màu sắc, cho người dùng biết rằng nút có tính tương tác và sẽ có điều gì đó 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 theo quan điểm của nhà thiết kế. Nguyên tắc này mô tả nhiều chức năng cơ bản có trên các nền tảng, cũng như các thành phần cấu tạo nên từng thành phần. Ví dụ: phông nền chứa một lớp nền và nội dung của lớp đó, lớp trước và nội dung của lớp đó, quy tắc chuyển động và các lựa chọn hiển thị. Bạn có thể tuỳ chỉnh từng thành phần này cho nhu cầu, trường hợp sử dụng và nội dung của từng ứng dụng. Những phần này hầu hết là các chế độ xem, chế độ đ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 nêu tên nhiều thành phần, nhưng không phải tất cả đều là ứng cử viên phù hợp cho mã có thể tái sử dụng và do đó, không có trong MDC. Bạn có thể tự tạo những trải nghiệm này để đạt được kiểu tuỳ chỉnh cho ứng dụng, 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. Phông nền 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
- Các lớp 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ề 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ó sẵn 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
Tiếp tục từ MDC-103?
Nếu bạn đã hoàn thành MDC-103, thì mã của bạn sẽ sẵn sàng cho lớp học lập trình này. Chuyển đến bước 3.
Bắt đầu từ đầu?
Tải ứng dụng lớp học lập trình khởi đầu xuống
Ứng dụng khởi đầu 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 dụng đó 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ã 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 -> shrine (hoặc tìm kiếm shrine trên máy tính) để mở dự án Shrine.
- 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ụ tạo 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.
Thêm phần phụ thuộc của dự án
Dự án cần có phần phụ thuộc vào thư viện hỗ trợ MDC Android. Mã mẫu mà bạn đã tải xuống sẽ có phần phụ thuộc này được liệt kê, nhưng bạn nên thực hiện các bước sau để đảm bảo.
- Chuyển đến tệp
build.gradlecủa mô-đunappvà đảm bảo rằng khốidependenciesbao gồm phần phụ thuộc vào 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ộ hoá 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 khởi đầu
|
Thành công! Bạn sẽ thấy ứng dụng Shrine đang chạy trên thiết bị.
3. Thêm trình đơn phông nền
Phông nền là vùng hiển thị ở 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. Phông nền bao gồm 2 vùng hiển thị: một lớp nền (hiển thị các hành động và bộ lọc) và một 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à hành động tương tác, chẳng hạn như bộ lọc điều hướng hoặc nội dung.
Ẩn 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 xoá 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 ta sẽ cài đặt phông nền trong vùng này. Để tránh hiển thị sự 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 ta sẽ đặt phông nền có cùng màu với thanh ứng dụng trên cùng.
Trong shr_product_grid_fragment.xml, hãy thêm nội dung sau làm phần tử đầu tiên trong FrameLayout gốc, trước 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 nội dung sau:
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>
Chính xác! Bạn đã thêm một phông nền đẹp mắt vào giao diện người dùng của Shrine. Tiếp theo, chúng ta sẽ thêm một trình đơn.
Thêm trình đơn
Về cơ bản, trình đơn là một danh sách các nút văn bản. Chúng ta sẽ thêm một trình đơ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 rồi thêm nội dung 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 trong shr_product_grid_fragment.xml bằ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 bản dựng và chạy. Màn hình chính của bạn sẽ có dạng như sau:
Phông nền của bạn đã hoàn tất. Hãy đưa nội dung mà chúng ta đã ẩn trước đó trở lại.
4. Thêm hình dạng
Trước khi chúng ta thực hiện bất kỳ thay đổi nào đối với Shrine trong lớp học lập trình này, nội dung sản phẩm chính của ứng dụng nằm trên vùng hiển thị ở 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 ở phía 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. Xoá 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">
Hãy tạo kiểu cho lớp trước bằng một rãnh ở góc trên bên trái. Material Design gọi loại tuỳ chỉnh này là hình dạng. Vùng hiển thị của Material có thể hiển thị ở nhiều hình dạng. Hình dạng giúp nhấn mạnh và tạo kiểu cho vùng hiển thị, đồng thời có thể dùng để thể hiện thương hiệu. Hình dạng Material có thể có các góc và cạnh cong hoặc góc cạnh, cũng như có số lượng cạnh bất kỳ. Hình dạ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 một nền hình dạng tuỳ chỉnh, nhưng hình dạng này chỉ hiển thị chính xác trên Android Marshmallow trở lên. Chúng ta có thể đặt nền shr_product_grid_background_shape trên NestedScrollView chỉ dành cho Android Marshmallow trở lên. Trước tiên, hãy thêm id vào NestedScrollView để chúng ta có thể tham chiếu đến 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 theo phương thức lập trình trong ProductGridFragment.java. Thêm logic sau để đặt nền vào 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 hình dạng tuỳ chỉnh sử dụng) như sau:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
Tạo bản dựng và chạy:
Chúng ta đã tạo cho Shrine một hình dạng có kiểu tuỳ chỉnh cho vùng hiển thị chính. Do độ cao của vùng hiển thị, người dùng có thể thấy có một nội dung ngay phía sau lớp màu trắng ở phía trước. Hãy thêm chuyển động để người dùng có thể thấy nội dung đó: trình đơn.
5. Thêm chuyển động
Chuyển động là một cách để làm cho ứng dụng của bạn trở nên sống động. Chuyển động có thể lớn và ấn tượng, tinh tế và tối giản hoặc ở bất kỳ đâu giữa hai thái cực này. Loại chuyển động bạn sử dụng phải phù hợp với tình huống. Chuyển động được áp dụng cho các hành động lặp lại thường xuyên phải nhỏ và tinh tế để không tốn quá nhiều thời gian một cách thường xuyên. Các tình huống khác, chẳng hạn 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 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 di chuyển thẳng xuống. Chúng tôi đã cung cấp cho bạn một trình nghe lượt nhấp sẽ hoàn thành ảnh động chuyển đổi cho trang tính, trong NavigationIconClickListener.java. Chúng ta có thể đặt trình nghe lượt nhấp này bên trong phương thức setupToolbar() của ProductGridFragment.java:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
Phương thức setUpToolbar() của bạn hiệ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 bản dựng và chạy. Nhấn vào nút trình đơn:
Việc nhấn lại vào biểu tượng trình đơn điều hướng sẽ ẩn trình đơn.
Điều chỉnh 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. Hãy xem ảnh động hiển thị trông như thế nào khi sử dụng một đường cong thời gian khác.
Cập nhật mã của bạn trong setupToolbar() trong ProductGridFragment.java để truyền một bộ nội suy đến trình nghe lượt nhấp của 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 một hiệu ứng khác, phải không?
6. Biểu tượng có thương hiệu
Hệ thống biểu tượng có thương hiệu cũng mở rộng sang các biểu tượng quen thuộc. Hãy tạo biểu tượng hiển thị tuỳ chỉnh và hợp nhất biểu tượng đó với tiêu đề của chúng ta để có một diện mạo độc đáo, 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ị một biểu tượng có thiết kế hình kim cương. Cập nhật Thanh công cụ trong shr_product_grid_fragment.xml để sử dụng một biểu tượng có thương hiệu mới mà chúng tôi đã cung cấp (shr_branded_menu) và đặt các thuộc tính app:contentInsetStart và android:padding để 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 nghe lượt nhấp của chúng ta trong setupToolbar() trong ProductGridFragment.java để lấy các đối tượng có thể vẽ cho thanh công cụ khi trình đơn 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 bản dựng và chạy:
Tuyệt vời! Khi có thể hiển thị phông nền, biểu tượng trình đơn hình kim cương sẽ xuất hiện. Khi có thể ẩn trình đơn, một biểu tượng đóng sẽ xuất hiện.
7. Tóm tắt
Trong suốt 4 lớp học lập trình này, bạn đã thấy cách sử dụng Thành phần Material để tạo trải nghiệm người dùng độc đáo, trang nhã, thể hiện cá tính và phong cách của 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 tất chuỗi 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.
Để có thêm thử thách với lớp học lập trình này, hãy sửa đổi ứng dụng Shrine để thay đổi hình ảnh sản phẩm xuất hiện khi một danh mục được chọn trong 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 một phần phụ trợ đang hoạt động, hãy xem Lớp học lập trình Firebase Android.