ใช้ตัวแปรเพื่อออกแบบสถานะภาพ

รูปแบบจะกำหนดสถานะภาพที่เฉพาะเจาะจงสำหรับแผง ซึ่งช่วยให้แผงเดียวมีภาพที่แตกต่างกันได้หลายภาพ เช่น สถานะเปิดหรือปิด ใช้ XML เพื่อกำหนดค่าตัวแปร ใช้แท็กย่อยภายในองค์ประกอบ <Panel>

แท็ก <Variant> แต่ละแท็กมีแอตทริบิวต์ id ที่จำเป็นเพื่อระบุแท็กนั้นๆ โดยไม่ซ้ำกัน นอกจากนี้ แท็กยังอ้างอิงถึงผลิตภัณฑ์ย่อยระดับบนเพื่อรับค่าพร็อพเพอร์ตี้ได้ด้วย กลไกการรับค่านี้ช่วยให้กำหนดพร็อพเพอร์ตี้ทั่วไปได้อย่างมีประสิทธิภาพในตัวแปรหลายรายการ

แอตทริบิวต์ XML

หากต้องการกำหนดสถานะและการเปลี่ยนสถานะ ให้ใช้แอตทริบิวต์เหล่านี้กับแท็ก <TaskPanel> หรือ <DecorPanel>

แอตทริบิวต์ สถานะ คำอธิบาย
id บังคับ ตัวระบุที่ไม่ซ้ำกันของตัวเลือก รหัสนี้ใช้เพื่ออ้างอิงตัวแปรในการเปลี่ยนหน้าหรือเป็น defaultVariant สำหรับแผง
parent ไม่บังคับ ระบุรหัสของผลิตภัณฑ์ย่อยอื่นที่ผลิตภัณฑ์ย่อยปัจจุบัน ควรรับค่าพร็อพเพอร์ตี้ หากไม่ได้กำหนดพร็อพเพอร์ตี้อย่างชัดเจนใน รูปแบบปัจจุบัน ระบบจะใช้ค่าที่กำหนดไว้ในรูปแบบระดับบนสุดแทน

องค์ประกอบย่อย XML

ใช้องค์ประกอบที่ไม่บังคับเหล่านี้เพื่อระบุลักษณะภาพของแผง เมื่ออยู่ในสถานะของตัวแปรนี้

องค์ประกอบย่อย คำอธิบาย
<Visibility> ระบุว่าแผงจะแสดงหรือซ่อน และมีแอตทริบิวต์ isVisible (บูลีน)
<Alpha> ระบุระดับความโปร่งใสของแผง ซึ่งมีแอตทริบิวต์ alpha (ลอย 0.0 ถึง 1.0)
<Layer> กำหนดลำดับ Z ของแผงที่สัมพันธ์กับแผงอื่นๆ โดยมีแอตทริบิวต์ layer (จำนวนเต็ม) ค่าที่สูงกว่าจะวาดไว้ด้านบน
<Focus> ระบุว่าแผงจะได้รับโฟกัสระหว่างการเปลี่ยนผ่านหรือไม่ โดยมีแอตทริบิวต์ onTransition (บูลีน)
<Bounds>

กำหนดพื้นที่สี่เหลี่ยมผืนผ้า (ตำแหน่งและขนาด) ของแผงบน หน้าจอ พื้นที่นี้ควบคุมโดยแอตทริบิวต์ต่างๆ เช่น left, top, bottom, width และ height

  • left และ right ระบุระยะห่างจาก ขอบด้านซ้ายของหน้าจอ
  • top และ bottom ระบุระยะห่างจาก ขอบด้านบนของหน้าจอ
  • width และ height ระบุความกว้างและความสูงของสี่เหลี่ยมผืนผ้า และจำเป็นต้องระบุเมื่อไม่ได้ระบุทั้ง left และ right (หรือ top และ bottom)
  • dimensions สามารถระบุเป็นพิกเซล, DP, เปอร์เซ็นต์ หรือการอ้างอิงทรัพยากร

เมื่อใช้เปอร์เซ็นต์ คุณสามารถใช้แอตทริบิวต์ออฟเซ็ตเพื่อใช้การปรับแบบคงที่กับขอบเขตตามเปอร์เซ็นต์ได้ ซึ่งได้แก่ leftOffset, topOffset, rightOffset และ bottomOffset

เช่น หากต้องการกำหนดให้แผงใช้ความสูงของหน้าจอ 100% ขณะที่ยกเว้นแถบนำทางที่มีความสูงคงที่ที่ด้านล่าง ให้ตั้งค่าความสูงเป็น 100% และตั้งค่า bottomOffset เป็นความสูงคงที่ของแถบนำทาง การทำเช่นนี้จะดึงขอบด้านล่างของแผงขึ้นด้านบน
<SafeBounds> ระบุพื้นที่ปลอดภัยภายในขอบเขตของแผงซึ่งไม่ทับซ้อนกัน โดยรอยบากหรือขอบของจอแสดงผล เพื่อเน้นความเข้ากันได้สำหรับแอปที่วาด ภายใน โดยมีแอตทริบิวต์คล้ายกับ <Bounds>
<Corner> กำหนดรัศมีสำหรับมุมของแผง เพื่อให้มีมุมโค้งมน และมีแอตทริบิวต์รัศมี (จำนวนเต็ม) มุมแหลมเป็นค่าเริ่มต้นและไม่จำเป็นต้องกำหนด
<Insets>

ระบุระยะขอบ (Padding) สำหรับแผง ประกอบด้วยแอตทริบิวต์ left, top, right, bottom ระบบจะรายงานข้อมูลแทรกเหล่านี้ไปยังแอปที่เปิดตัว ภายในแผง

  • left ระบุระยะขอบด้านซ้าย
  • right ระบุระยะขอบด้านขวา เช่น การแทรกด้านขวาเป็น 0 หมายความว่าไม่มีการแทรกที่ด้านขวา
  • top ระบุระยะขอบด้านในที่ด้านบน
  • bottom ระบุระยะขอบด้านในที่ด้านล่าง เช่น การแทรกด้านขวาเป็น 0 หมายความว่าไม่มีการแทรกที่ด้านขวา
<Background> เปิดตัวแผงตกแต่งพื้นหลังที่ไม่บังคับเพื่อป้องกันเอฟเฟกต์มองทะลุ เมื่อสลับแอป โดยจะกำหนดพร็อพเพอร์ตี้ เช่น สีและอัลฟ่า สำหรับเลเยอร์ตกแต่งนี้ พร็อพเพอร์ตี้ของเลเยอร์การตกแต่ง เช่น ขอบเขตและเลเยอร์ จะมีค่าเริ่มต้นเป็นพร็อพเพอร์ตี้ของเลเยอร์การตกแต่งเมื่อยังไม่ได้ตั้งค่า

โค้ดตัวอย่าง

<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> อย่างน้อย 1 รายการ แต่ละ <KeyFrame> มีแอตทริบิวต์ framePosition (0-100) และอ้างอิงถึงแอตทริบิวต์ ผลิตภัณฑ์ย่อย (รหัสของผลิตภัณฑ์ย่อยอื่น) keyframesระบุสถานะของแผง ที่จุดใดจุดหนึ่งในการเปลี่ยนอย่างต่อเนื่อง

รหัส 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>
ก่อนหน้า
กำหนดค่าแผง
ถัดไป
กำหนดค่าทรานซิชัน