Tạo bóng và cắt khung hiển thị

Thử cách Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng tính năng tạo giao diện trong Compose.
Modifier.shadow() →

Material Design giới thiệu độ nâng cho các phần tử trên giao diện người dùng. Độ nâng 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 nhiệm vụ hiện tại.

Độ cao của một khung hiển thị, được biểu thị bằng thuộc tính Z, sẽ xác định hình thức trực quan của bóng. Thành phần hiển thị có giá trị Z cao hơn sẽ đổ bóng lớn hơn, mềm hơn và che khuất thành phần 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ị đó.

Hình ảnh minh hoạ cách độ cao của khung hiển thị tạo ra bóng đổ.
Hình 1. Độ cao trên trục Z và bóng đổ tương ứng.

Bóng đổ do thành phần hiển thị gốc của thành phần hiển thị có độ cao vẽ. Chúng phải tuân theo quy tắc cắt khung hiển thị tiêu chuẩn và được cắt bởi thành phần mẹ theo mặc định.

Độ nâng cũng 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 phần Độ nâng trong Thiết kế dựa trên Material.

Chỉ định độ cao cho các khung hiển thị

Giá trị Z cho một khung hiển thị có hai thành phần:

  • Độ cao: thành phần tĩnh
  • Translation: 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 độ).

Hình ảnh cho thấy các bóng khác nhau cho các độ nâng khác nhau tính bằng dp
Hình 2. Các bóng đổ khác nhau cho các độ nâng khác nhau tính bằng dp.

Để đặt độ nâng mặc định (khi không hoạt động) của một khung hiển thị, hãy sử dụng thuộc tính android:elevation trong bố cục XML. Để đặt độ cao của một 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 cho một 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 hiệu ứng cho độ cao của các 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 dành cho nhà phát triển về hoạt ảnh 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 trong những trường hợp mà các thay đổi về trạng thái 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 bóng và đường viền của khung hiển thị

Ranh giới của đối tượng có thể vẽ 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 một đối tượng đồ hoạ và xác định vùng gợn sóng cho phản hồi khi 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ẽ nền:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Đối tượng có thể vẽ nền được xác định 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ị đổ bóng với các góc bo tròn, vì đối tượng có thể vẽ trong nền xác định đường viền của khung hiển thị. Việc cung cấp một đườ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 khung hiển thị trong mã của bạn, hãy làm như sau:

  1. Mở rộng lớp ViewOutlineProvider.
  2. Ghi đè phương thức getOutline().
  3. Chỉ định trình cung cấp đường viền mới cho khung hiển thị 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 có các góc bo tròn bằng cách sử dụng các phương thức trong lớp Outline. 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 một khung hiển thị đổ 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

Việc cắt thành phần hiển thị cho phép bạn thay đổi hình dạng của một thành phần hiển thị. Bạn có thể cắ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ỉ những đường viền là hình chữ nhật, hình tròn và hình chữ nhật bo tròn mới hỗ trợ việc cắt, theo xác định của 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) và gọi phương thức View.setClipToOutline().

Việc 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 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ị.