Chuyển đến phần nội dung

Truy cập nhiều nhất

Truy cập gần đây

navigation

Định nghĩa Đổ bóng và Dạng xem Cắt hình

Material design giới thiệu độ cao cho phần tử UI. Độ 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 chung sự chú ý của họ vào tác vụ hiện có.

Độ cao của một dạng xem, được biểu diễn bằng thuộc tính Z, sẽ xác định diện mạo trực quan của bóng đổ: dạng xem có giá trị Z cao hơn sẽ đổ bóng lớn hơn, mềm hơn. Dạng xem có giá trị Z cao hơn sẽ che khuất dạng xem có giá trị Z thấp hơn; tuy nhiên, giá trị Z của một dạng xem không ảnh hưởng tới kích cỡ của dạng xem.

Đổ bóng được vẽ bởi dạng xem mẹ của dạng xem cao hơn, do vậy nó phụ thuộc vào tiêu chuẩn cắt dạng xem, được cắt bởi dạng xem mẹ theo mặc định.

Độ cao cũng hữu ích trong việc tạo hoạt hình ở nơi widget tạm thời dâng cao hơn mặt phẳng dạng xem khi thực hiện một hành động nào đó.

Để biết thêm thông tin về độ cao trong material design, hãy xem Đối tượng trong không gian 3D.

Gán Độ cao cho Dạng xem của Bạn

Giá trị Z của một dạng xem có hai thành phần:

Z = elevation + translationZ

Hình 1 - Đổ bóng cho các độ cao dạng xem khác nhau.

Để đặt độ cao của dạng xem trong một định nghĩa bố trí, hãy sử dụng thuộc tính android:elevation . Để đặt độ cao của dạng xem trong mã của một hoạt động, hãy sử dụng phương thức View.setElevation().

Để đặt độ dịch của dạng xem, hãy sử dụng phương thức View.setTranslationZ().

Các phương thức ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ() mới cho phép bạn dễ dàng tạo hiệu ứng hoạt hình cho độ cao của dạng xem. Để 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ề Hoạt hình Thuộc tính .

Bạn cũng có thể sử dụng StateListAnimator để quy định những hoạt hình này bằng cách khai báo. Điều này đặc biệt hữu ích đối với trường hợp các thay đổi trạng thái sẽ kích hoạt hoạt hình như khi người dùng nhấn một nút. Để biết thêm thông tin, hãy xem phần Tạo Hiệu ứng Hoạt hình Thay đổi Trạng thái Xem.

Giá trị Z được đo bằng dp (điểm ảnh độc lập với mật độ).

Tùy chỉnh Đổ bóng và Viền của Dạng xem

Các giới hạn nội dung vẽ được của nền dạng xem sẽ xác định hình dạng mặc định của bóng. Viền biểu thị hình dạng ngoài của một đối tượng đồ họa và định nghĩa vùng gợn sóng cho phản hồi chạm.

Hãy cân nhắc dạng xem sau được định nghĩa với nội dung vẽ được làm nền:

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

Nội dung vẽ được làm nền được định nghĩa là một hình chữ nhật với 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>

Dạng xem sẽ tạo đổ bóng có góc bo tròn do nội dung vẽ được làm nền sẽ định nghĩa viền của dạng xem. Khi cung cấp viền tùy chỉnh, nó ghi đè hình dạng mặc định của bóng đổ dạng xem.

Để định nghĩa viền tùy chỉnh cho một dạng xem trong mã của bạn:

  1. Mở rộng lớp ViewOutlineProvider.
  2. Ghi đè phương thức getOutline().
  3. Gán trình cung cấp viền mới cho dạng xem của bạn bằng phương thức View.setOutlineProvider().

Bạn có thể tạo viền hình bầu dục và hình chữ nhật có góc bo tròn bằng cách sử dụng các phương thức trong lớp Outline. Trình cung cấp viền mặc định cho dạng xem sẽ lấy viền từ nền của dạng xem. Để ngăn dạng xem đổ bóng, hãy đặt trình cung cấp viền của nó thành null.

Dạng xem Cắt hình

Dạng xem cắt hình cho phép bạn dễ dàng thay đổi hình dạng của một dạng xem. Bạn có thể cắt hình dạng xem để 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 một dạng xem để đáp ứng lại thông tin đầu vào của người dùng. Bạn có thể cắt một dạng xem thành vùng viền của nó bằng cách sử dụng phương thức View.setClipToOutline() hoặc thuộc tính android:clipToOutline. Chỉ 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ợ cắt hình như được xác định bởi phương thức Outline.canClip().

Để cắt dạng xem thành hình dạng của một nội dung vẽ được, hãy đặt nội dung vẽ được làm nền của dạng xem (như minh họa bên trên) và gọi phương thức View.setClipToOutline() .

Cắt dạng xem là một thao tác tốn kém, vì vậy đừng tạo hiệu ứng hoạt hình cho hình dạng bạn sử dụng để cắt dạng xem. Để đạt được hiệu ứng này, hãy sử dụng hoạt hình Hiệu ứng Lộ ra.

Trang web này sử dụng cookie để lưu trữ lựa chọn của bạn đối với các tùy chọn hiển thị và ngôn ngữ dành riêng cho trang.

Nhận tin tức và mẹo mới nhất của nhà phát triển Android sẽ giúp bạn thành công trên Google Play.

* Các trường bắt buộc

Thật tuyệt!

Theo dõi Google Developers trên WeChat

Duyệt trang web này bằng ?

Bạn đã yêu cầu một trang bằng , tuy nhiên tùy chọn ngôn ngữ của bạn cho trang web này là .

Bạn có muốn thay đổi tùy chọn ngôn ngữ và duyệt trang web này bằng không? Nếu bạn muốn thay đổi tùy chọn ngôn ngữ sau, hãy sử dụng menu ngôn ngữ ở cuối mỗi trang.

Lớp này yêu cầu cấp độ API là trở lên

Tài liệu này bị ẩn vì bạn đã chọn cấp độ API cho tài liệu này là . Bạn có thể thay đổi cấp độ API của tài liệu bằng bộ chọn ở phía trên ngăn điều hướng bên trái.

Để biết thêm thông tin về việc chỉ định cấp độ API mà ứng dụng của bạn yêu cầu, hãy đọc phần Hỗ trợ các phiên bản nền tảng khác nhau.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)