Material Design giới thiệu độ nâng cho các thành phần 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 thành phần và tập trung sự chú ý của họ vào nhiệm 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) sẽ xác định hình ảnh trực quan của bóng. Các khung hiển thị có giá trị Z cao hơn sẽ đổ bóng lớn hơn, dịu hơn và 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 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 chế độ xem nâng cao. Các lớp này tuân theo hoạt động cắt khung hiển thị chuẩn và được cha mẹ cắt theo mặc định.
Độ cao cũng rất hữu ích khi tạo ảnh động, trong đó các tiện ích tạm thời tăng lên 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 bài viết Độ cao trong Material Design.
Chỉ định độ cao cho khung hiển thị
Giá trị Z của 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 tính bằng dp (pixel không phụ thuộc vào mật độ).
Để đặt độ cao mặc định (nghỉ) của một thành phần hiển thị, hãy dùng thuộc tính android:elevation trong bố cục XML. Để đặt độ cao của khung hiển thị trong mã của một hoạt động, hãy sử dụng phương thức View.setElevation().
Để đặt bản dịch của khung hiển thị, hãy sử dụng phương thức View.setTranslationZ().
Phương thức ViewPropertyAnimator.z() và ViewPropertyAnimator.translationZ() cho phép bạn tạo ảnh động cho độ nâng 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 ả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 cho các trường hợp việc 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 khung hiển thị bằng StateListAnimator.
Tuỳ chỉnh bóng và đường viền của khung hiển thị
Các ranh giới của đối tượng có thể vẽ trên nền của khung hiển thị sẽ xác định hình dạng mặc định của bóng. Đường viền biểu thị hình dạng bên ngoài của đối tượng đồ hoạ và xác định vùng gợn sóng để phản hồi bằng thao tác chạm.
Hãy xem xét khung hiển thị sau đây, được xác định bằng một đối tượng có thể vẽ trong nền:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
Đối tượng có thể vẽ trên nền được định nghĩa là một hình chữ nhật có các gó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 tròn, vì nền có thể vẽ 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 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 đường viền của khung hiển thị đó thành null.
Lượt xem đoạn video
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 các khung hiển thị để nhất quán với các thành phần 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 mới 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ị thành 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 tốn kém, vì vậy, đừng tạo ảnh động cho hình dạng mà bạn sử 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ị.