Material Design cung cấp độ nâng cho các phần tử trên giao diện người dùng. Độ cao giúp người dùng hiểu được tầm quan trọng tương đối của từng phần tử và tập trung sự chú ý vào tác vụ hiện tại.
Độ cao của thành phần hiển thị (được biểu thị bằng thuộc tính Z) xác định giao diện trực quan của bóng. Các khung hiển thị có giá trị Z cao hơn sẽ tạo bóng lớn hơn và mềm hơn, đồng thời che khuất các khung hiển thị có giá trị Z thấp hơn. Tuy nhiên, giá trị Z của một khung hiển thị không ảnh hưởng đến kích thước của khung hiển thị đó.
Bóng được vẽ bởi phần tử mẹ của khung hiển thị từ trên cao. Các tệp này sẽ được cắt theo chế độ xem chuẩn và được phần tử mẹ cắt theo mặc định.
Độ cao cũng hữu ích để tạo ảnh động, trong đó các tiện ích tạm thời nâng lên phía trên mặt phẳng khung hiển thị khi thực hiện các thao tác.
Để biết thêm thông tin, hãy xem phần Độ cao trong Material Design.
Chỉ định độ cao cho chế độ xem của bạn
Giá trị Z cho một khung hiển thị có hai thành phần:
- Độ cao: thành phần tĩnh
- Bản dịch: thành phần động dùng cho ảnh động
Z = elevation + translationZ
Các giá trị Z được đo bằng dp (pixel không phụ thuộc vào mật độ).
Để đặt độ cao mặc định (để lại) của một khung hiển thị, hãy dùng thuộc tính android:elevation trong bố cục XML. Để đặt độ cao của thành phần hiển thị trong mã của một hoạt động, hãy sử dụng phương thức View.setElevation().
Để đặt dịch cho khung hiển thị, hãy sử dụng phương thức View.setTranslationZ().
Các phương thức ViewPropertyAnimator.z() và ViewPropertyAnimator.translationZ() cho phép bạn tạo ảnh động cho độ cao của khung hiển thị. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho ViewPropertyAnimator và hướng dẫn cho nhà phát triển về ảnh động thuộc tính.
Bạn cũng có thể sử dụng StateListAnimator để chỉ định các ảnh động này theo cách khai báo. Điều này đặc biệt hữu ích đối với các trường hợp mà thay đổi trạng thái sẽ kích hoạt ảnh động, chẳng hạn như khi người dùng nhấn vào một nút.
Để biết thêm thông tin, hãy xem bài viết Tạo ảnh động cho các thay đổi về trạng thái của khung hiển thị bằng StateListAnimator.
Tuỳ chỉnh đường viền và bóng của khung hiển thị
Các ranh giới của đối tượng có thể vẽ trong nền của một khung hiển thị sẽ xác định hình dạng mặc định của bóng đổ. Đường viền thể hiện hình dạng bên ngoài của đối tượng đồ hoạ và xác định vùng gợn sóng cho phản hồi chạm.
Hãy xem xét thành phần hiển thị sau (được xác định bằng đối tượng có thể vẽ trong nền):
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
Nền có thể vẽ được định nghĩa là hình chữ nhật với góc được bo tròn:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
Khung hiển thị sẽ đổ bóng với các góc bo tròn, vì đối tượng có thể vẽ trong nền sẽ xác định đường viền của khung hiển thị. Việc cung cấp đường viền tuỳ chỉnh sẽ ghi đè hình dạng mặc định của bóng của khung hiển thị.
Để xác định đường viền tuỳ chỉnh cho một thành phần hiển thị trong mã, hãy làm như sau:
- Mở rộng lớp
ViewOutlineProvider. - Ghi đè phương thức
getOutline(). - Chỉ định trình cung cấp đường viền mới cho khung hiển thị của bạn bằng phương thức
View.setOutlineProvider().
Bạn có thể tạo đường viền hình bầu dục và hình chữ nhật với các góc bo tròn bằng các phương thức trong lớp Outline. Trình cung cấp đường viền mặc định cho các khung hiển thị sẽ lấy đường viền từ nền của khung hiển thị. Để ngăn khung hiển thị truyền bóng, hãy đặt trình cung cấp bố cục thành null.
Lượt xem đoạn video
Các khung hiển thị cắt cho phép bạn thay đổi hình dạng của khung hiển thị. Bạn có thể cắt bớt khung hiển thị để nhất quán với các phần tử thiết kế khác hoặc thay đổi hình dạng của khung hiển thị để phản hồi hoạt động đầu vào của người dùng. Bạn có thể cắt một khung hiển thị theo vùng đường viền của khung hiển thị đó bằng phương thức View.setClipToOutline(). Chỉ các đường viền là hình chữ nhật, hình tròn và hình chữ nhật tròn hỗ trợ tính năng cắt, như được xác định bằng phương thức Outline.canClip().
Để cắt một khung hiển thị theo hình dạng của một đối tượng có thể vẽ, hãy đặt đối tượng có thể vẽ làm nền của khung hiển thị đó (như trong ví dụ trước) rồi gọi phương thức View.setClipToOutline().
Cắt khung hiển thị là một thao tác tiêu tốn nhiều tài nguyên, vì vậy, đừng tạo ảnh động cho hình dạng bạn dùng để cắt khung hiển thị. Để đạt được hiệu ứng này, hãy sử dụng ảnh động hiển thị.