Dùng một biến thể để thiết kế trạng thái trực quan

Biến thể xác định một trạng thái trực quan cụ thể cho một bảng điều khiển, cho phép một bảng điều khiển có nhiều biểu diễn trực quan riêng biệt, chẳng hạn như trạng thái đã mở hoặc đã đóng. Sử dụng XML để định cấu hình biến thể. Sử dụng thẻ phụ trong phần tử <Panel>.

Mỗi thẻ <Variant> đều có một thuộc tính id bắt buộc để xác định duy nhất thẻ đó. Thẻ này cũng có thể tham chiếu đến một biến thể gốc để kế thừa các thuộc tính. Cơ chế kế thừa này cho phép xác định hiệu quả các thuộc tính chung trên nhiều biến thể.

Thuộc tính XML

Để xác định các trạng thái và hiệu ứng chuyển đổi, hãy sử dụng các thuộc tính này với thẻ <TaskPanel> hoặc <DecorPanel>.

Thuộc tính Trạng thái Mô tả
id Bắt buộc Giá trị nhận dạng duy nhất của biến thể. Mã nhận dạng này được dùng để tham chiếu đến biến thể trong các hiệu ứng chuyển đổi hoặc làm defaultVariant cho một bảng điều khiển.
parent Không bắt buộc Chỉ định mã nhận dạng của một biến thể khác mà biến thể hiện tại sẽ kế thừa các thuộc tính. Nếu một thuộc tính không được xác định rõ ràng trong biến thể hiện tại, thì thuộc tính đó sẽ quay lại giá trị được xác định trong biến thể mẹ.

Phần tử con XML

Sử dụng các phần tử không bắt buộc này để chỉ định các đặc điểm trực quan của bảng điều khiển khi bảng điều khiển ở trạng thái của biến thể này.

Phần tử con Mô tả
<Visibility> Chỉ định xem bảng điều khiển có hiển thị hay bị ẩn và chứa thuộc tính isVisible (boolean).
<Alpha> Chỉ định mức độ trong suốt của bảng điều khiển; chứa một thuộc tính alpha (số thực, từ 0 đến 1).
<Layer> Đặt thứ tự Z của bảng điều khiển so với các bảng điều khiển khác; chứa thuộc tính layer (số nguyên). Các giá trị cao hơn sẽ được vẽ ở trên cùng.
<Focus> Chỉ định xem bảng điều khiển có thể lấy tiêu điểm trong quá trình chuyển đổi hay không; chứa một thuộc tính onTransition (boolean).
<Bounds>

Xác định khu vực hình chữ nhật (vị trí và kích thước) của bảng điều khiển trên màn hình. Khu vực này được kiểm soát bằng các thuộc tính như trái, trên cùng, dưới cùng, chiều rộng và chiều cao.

  • left và right chỉ định khoảng cách từ cạnh trái của màn hình.
  • top và bottom chỉ định khoảng cách từ cạnh trên cùng của màn hình.
  • width và height chỉ định chiều rộng và chiều cao của hình chữ nhật và chỉ cần khi cả left và right (hoặc top và bottom) đều không được chỉ định.
  • dimensions có thể được chỉ định bằng pixel, DP, tỷ lệ phần trăm hoặc tệp tham chiếu tài nguyên.

Khi sử dụng tỷ lệ phần trăm, bạn có thể sử dụng các thuộc tính mức chênh lệch để áp dụng các mức điều chỉnh cố định cho ranh giới dựa trên tỷ lệ phần trăm – leftOffset, topOffset, rightOffset và bottomOffset.

Ví dụ: để chỉ định rằng một bảng điều khiển chiếm 100% chiều cao màn hình trong khi loại trừ một thanh điều hướng có chiều cao cố định ở dưới cùng, hãy đặt chiều cao thành 100% và bottomOffset thành chiều cao cố định của thanh điều hướng. Thao tác này sẽ kéo cạnh dưới của bảng điều khiển lên trên.
<SafeBounds> Chỉ định một vùng an toàn trong phạm vi của bảng điều khiển, không bị vết cắt trên màn hình hoặc phần lồng ghép chồng lên, để nhấn mạnh khả năng tương thích cho các ứng dụng được vẽ trong vùng này. Các thuộc tính của nó tương tự như <Bounds>.
<Corner> Xác định bán kính cho các góc của bảng điều khiển, cho phép các góc bo tròn và chứa một thuộc tính bán kính (số nguyên). Góc nhọn là góc mặc định và không cần xác định.
<Insets>

Chỉ định phần lồng ghép (khoảng đệm) cho bảng điều khiển. Nó chứa các thuộc tính left, top, right, bottom. Các phần lồng ghép này được báo cáo cho những ứng dụng đã khởi chạy trong bảng điều khiển.

  • left chỉ định phần lồng ghép ở bên trái.
  • right chỉ định phần lồng ghép ở bên phải. Ví dụ: một phần lồng ghép bằng 0 ở bên phải cho biết không có phần lồng ghép nào ở bên phải.
  • top chỉ định phần lồng ghép ở phía trên cùng.
  • bottom chỉ định phần lồng ghép ở phía dưới cùng. Ví dụ: phần lồng ghép bên phải bằng 0 cho biết không có phần lồng ghép ở bên phải.
<Background> Giới thiệu một bảng trang trí nền không bắt buộc để ngăn hiệu ứng nhìn xuyên thấu khi chuyển đổi ứng dụng. Lớp này xác định các thuộc tính như màu sắc và alpha cho lớp trang trí này. Các thuộc tính của lớp trang trí, chẳng hạn như ranh giới và lớp, mặc định là các thuộc tính của biến thể khi chưa được đặt.

Mã mẫu

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

Nội suy các thuộc tính trực quan

Sử dụng KeyFrameVariant để nội suy các thuộc tính trực quan. Phần mở rộng chuyên biệt này của variant dựa trên giá trị phân số liên tục (từ 0 đến 1) cho phép các hiệu ứng chuyển đổi mượt mà, linh động do đầu vào liên tục điều khiển, chẳng hạn như thao tác kéo khi trạng thái của bảng điều khiển thay đổi linh động theo lượng kéo.

Thuộc tính XML

KeyFrameVariant không có thuộc tính. Thẻ <KeyFrameVariant> chứa thông tin cần thiết để xác định một KeyFrameVariant.

Phần tử con XML

KeyFrameVariant chứa một hoặc nhiều thẻ con <KeyFrame>. Mỗi <KeyFrame> đều có một thuộc tính framePosition (0-100) và đề cập đến một thuộc tính biến thể (mã nhận dạng của một biến thể khác). Các keyframes này xác định trạng thái của bảng điều khiển tại các điểm cụ thể trong một quá trình chuyển đổi liên tục.

Mã Samole

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Trước
Định cấu hình bảng điều khiển
Tiếp
Định cấu hình hiệu ứng chuyển cảnh