使用變體設計視覺狀態

變體會定義面板的特定視覺狀態，讓單一面板有多種不同的視覺呈現方式，例如「開啟」或「關閉」狀態。使用 XML 設定變體。在 <Panel> 元素中使用子標記。

每個 <Variant> 標記都必須有 id 屬性，才能識別。標記也可以參照父項變體，以繼承屬性。這個繼承機制可有效定義多個變體通用的屬性。

XML 屬性

如要定義狀態和轉場效果，請將這些屬性與 <TaskPanel> 或 <DecorPanel> 標記搭配使用。

屬性 Status 說明
id 必要 子類型的專屬 ID。這個 ID 用於參照轉場效果中的變體，或做為面板的 defaultVariant。
parent 選用 指定另一個變體的 ID，目前變體應從該變體繼承屬性。如果目前變體未明確定義屬性，系統會改用上層變體中定義的值。

XML 子元素

使用這些選用元素，指定面板處於這個變體狀態時的視覺特徵。

子元素 說明
<Visibility> 指定面板是否顯示或隱藏，並包含 isVisible 屬性 (布林值)。
<Alpha> 指定面板的透明度等級；包含 alpha 屬性 (浮點數，0.0 至 1.0)。
<Layer> 設定面板相對於其他面板的 Z 順序；包含 layer 屬性 (整數)。值較高的圖層會繪製在頂端。
<Focus> 指定面板是否可在轉場期間取得焦點；包含 onTransition 屬性 (布林值)。
<Bounds>

定義面板在螢幕上的矩形區域 (位置和大小)。這個區域是由左、上、下、寬度和高度等屬性控制。

  • left 和 right 會指定與畫面左側邊緣的距離。
  • top 和 bottom 會指定與螢幕頂端的距離。
  • width 和 height 會指定矩形的寬度和高度，只有在未指定 left 和 right (或 top 和 bottom) 時才需要。
  • dimensions 可以指定像素、DP、百分比或資源參照。

使用百分比時，您可以運用偏移屬性，對以百分比為準的邊界套用固定調整值，包括 leftOffset、topOffset、rightOffset 和 bottomOffset。

舉例來說，如要指定面板占據 100% 的畫面高度，同時排除底部的固定高度導覽列，請將高度設為 100%，並將 bottomOffset 設為導覽列的固定高度。這樣做會將面板的底部邊緣向上拉。
<SafeBounds> 指定面板邊界內的安全區域，該區域不會與螢幕凹口或插邊重疊，以強調在其中繪製的應用程式相容性。屬性與 <Bounds> 類似。
<Corner> 定義面板邊角的半徑，可讓邊角呈現圓弧狀，並包含半徑屬性 (整數)。尖角是預設值，不需要定義。
<Insets>

指定面板的插邊 (邊框間距)。其中包含 left、top、right、bottom 屬性。這些插邊會回報給在面板中啟動的應用程式。

  • left 指定左側的插邊。
  • right 指定右側的插邊。舉例來說，如果右側插邊為零，表示右側沒有插邊。
  • top 指定頂端的插邊。
  • bottom 指定底部的插邊。舉例來說，如果右側插邊為零，表示右側沒有插邊。
<Background> 導入選用的背景裝飾面板，避免應用程式切換時出現透視效果。這個圖層會定義裝飾層的顏色和 Alpha 等屬性。如果尚未設定，裝飾層的屬性 (例如界線和圖層) 預設為變體的屬性。

程式碼範例

<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>

插補視覺屬性

使用 KeyFrameVariant 插補視覺屬性。這個 variant 的特殊擴充功能是以連續分數值 (0 到 1) 為基礎，可根據連續輸入內容 (例如拖曳作業，面板狀態會隨著拖曳量動態變化) 進行流暢的動態轉換。

XML 屬性

KeyFrameVariant 沒有屬性。<KeyFrameVariant> 標記包含定義 KeyFrameVariant 所需的資訊。

XML 子元素

KeyFrameVariant 包含一或多個 <KeyFrame> 子項標記。每個 <KeyFrame> 都有 framePosition 屬性 (0 到 100)，並參照變體屬性 (另一個變體的 ID)。這些 keyframes 會定義面板在連續轉換中特定時間點的狀態。

範例程式碼

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
上一頁
設定面板
下一頁
設定轉場效果