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à 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, độ nâng và kiểu chữ của các 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 của Material Design mô tả các thành phần theo quan điểm của nhà thiết kế. Chúng mô tả nhiều chức năng cơ bản có trên nhiều nền tảng, cũng như các phần tử giải phẫu tạo nên từng thành phần. Ví dụ: một phông nền chứa lớp sau và nội dung của lớp đó, lớp trước và nội dung của lớp đó, các quy tắc chuyển động và lựa chọn hiển thị. Bạn có thể tuỳ chỉnh từng thành phần này 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. Phần lớn các thành phần này là những chế độ xem, chế độ kiểm soát và chức năng truyền thống trong SDK của nền tảng.
Mặc dù nguyên tắc của Material Design đặt tên cho nhiều thành phần, nhưng không phải thành phần nào cũng phù hợp để sử dụng lại mã và do đó, không phải thành phần nào cũng có trong MDC. Bạn có thể tự tạo những trải nghiệm này để đạt được một kiểu tuỳ chỉnh 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 một phông nền vào Shrine. Bộ lọc này sẽ lọc các sản phẩm xuất hiện trong lưới không đối xứng theo danh mục. Bạn sẽ sử dụng:
- Hình dạng
- Có 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ề 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á kinh nghiệm của mình trong việc tạo ứng dụng Android ở mức nào?
Bạn đang 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 sang bước 3.
Bạn mới bắt đầu?
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-104-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 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 kotlin -> shrine (hoặc tìm shrine 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.
Thêm các phần phụ thuộc của dự án
Dự án cần có một phần phụ thuộc trên thư viện hỗ trợ MDC Android. Mã mẫu mà bạn đã tải xuống có thể đã liệt kê 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.gradlecủa mô-đunappvà đảm bảo rằng khốidependenciescó một 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ị của mình.
Phông nền là nền tảng ở xa nhất của một ứng dụng, xuất hiện phía sau tất cả nội dung và thành phần khác. Thẻ này bao gồm 2 lớp: 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ể dùng một phông nền để hiển thị thông tin và các thao tác tương tác, chẳng hạn như điều hướng hoặc bộ lọc nội dung.
Che giấu nội dung trong 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ẽ lắp đặt một phông nền ở khu vực này. Để tránh xuất hiện đườ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 ta sẽ đặt màu của phông nền giống với màu của 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 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 tôi sẽ thêm một số điện thoại tại đây.
Tạo một tệp bố cục mới có tên 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>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 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:
Giờ thì chúng ta đã thiết lập phông nền. Hãy khôi phục nội dung mà chúng ta đã ẩn trước đó.
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 nằm ở bề mặt phía sau cùng. Khi bạn thêm một phông nền, nội dung này sẽ đượ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 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 vết cắt ở góc trên cùng bên trái. Material Design gọi loại chế độ 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 tăng độ nổi bật và tạo kiểu cho các 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ư số lượng cạnh bất kỳ. Chúng có thể đối xứng hoặc không đối xứng.
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 tôi có thể đặt nền shr_product_grid_background_shape trên NestedScrollView của bạn chỉ dành cho Android Marshmallow trở lên. Trước tiên, hãy thêm một id vào NestedScrollView để chúng ta 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 theo phương thức lập trình trong ProductGridFragment.kt. Thêm logic sau để đặt nền vào cuối onCreateView(), ngay trước câu lệnh return:
ProductGridFragment.kt
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.product_grid.background = context?.getDrawable(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 dùng cho nền hình dạng tuỳ chỉnh) như sau:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>Tạo và chạy:
Chúng tôi đã tạo cho Shrine một hình dạng có kiểu dáng tuỳ chỉnh cho bề mặt chính của ứng dụng. Do độ nâng của bề mặt, người dùng có thể thấy có một thứ gì đó 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.
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ỳ mức độ nào khác. 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 thao tác 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. Những 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à giúp người dùng tìm hiểu 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
Động tác này là hình ở 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 để hoàn thành ảnh động chuyển đổi cho trang tính, trong NavigationIconClickListener.kt. Chúng ta có thể thiết lập trình nghe lượt nhấp này trong ProductGridFragement của onCreateView(), trong phần chịu trách nhiệm thiết lập thanh công cụ. Thêm dòng sau để đặt trình nghe lượt nhấp trên biểu tượng trình đơn của thanh công cụ:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Phần này hiện sẽ có dạng như sau:
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Tạo bản dựng và chạy. Nhấn nút trình đơn:
Nhấn lại vào biểu tượng trình đơn điều hướng để ẩ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 hay để thể hiện thương hiệu của bạn. 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 trình nghe lượt nhấp trong ProductGridFragment.kt để truyền một Trình nội suy đến trình nghe lượt nhấp của biểu tượng điều hướng, như sau:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
Điều này tạo ra một hiệu ứng khác, phải không?
Hệ thống biểu tượng mang thương hiệu cũng mở rộng sang các biểu tượng quen thuộc. Hãy tuỳ chỉnh biểu tượng hiển thị và hợp nhất biểu tượng đó với tiêu đề để tạo ra một diện mạo độc đáo, mang dấu ấn 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 biểu tượng mới có gắn thương hiệu mà chúng tôi đã cung cấp cho bạn (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 quy cách 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" />
Chúng ta sẽ cập nhật trình nghe lượt nhấp trong onCreateView() trong ProductGridFragment.kt một lần nữa để 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.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
activity!!,
view.product_grid,
AccelerateDecelerateInterpolator(),
ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close iconTạo và chạy:
Tuyệt vời! Khi phông nền có thể xuất hiện, biểu tượng trình đơn hình kim cương sẽ xuất hiện. Khi trình đơn có thể bị che khuất, biểu tượng đóng sẽ xuất hiện thay thế.
Trong suốt 4 lớp học lập trình này, bạn đã thấy cách sử dụng các Thành phần Material để tạo ra những trải nghiệm người dùng độc đáo và 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) sẽ 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 thành phần MDC-Android.
Để thử thách thêm 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 để có một phần phụ trợ hoạt động, hãy xem Lớp học lập trình Firebase Android.