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

ตัวแปรกำหนดสถานะภาพที่เฉพาะเจาะจงสำหรับแผง ซึ่งช่วยให้แผงเดียวมีภาพที่แตกต่างกันได้หลายภาพ เช่น สถานะ เปิดหรือ ปิด ใช้ 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>

ระบุระยะขอบ (การเว้นระยะห่าง) สำหรับแผง โดยมีแอตทริบิวต์ 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 เหล่านี้กำหนดสถานะของแผง ที่จุดที่เฉพาะเจาะจงในการเปลี่ยนสถานะแบบต่อเนื่อง

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

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
ก่อนหน้า
กำหนดค่าแผง
ถัดไป
กำหนดค่าทรานซิชัน