สร้างเงาและมุมมองคลิป

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีทำงานกับการกำหนดธีมใน Compose

Modifier.shadow() →

Material Design นำเสนอระดับความสูงสำหรับองค์ประกอบ UI การยกระดับช่วยให้ผู้ใช้ เข้าใจความสำคัญที่สัมพันธ์กันของแต่ละองค์ประกอบและมุ่งความสนใจไปที่ งานปัจจุบัน

หมายเหตุ: หน้านี้อธิบายเงาที่ได้จากระดับความสูง Material3 ขอแนะนำแนวทางการยกระดับตามสีพื้นผิว ดูข้อมูลเพิ่มเติมเกี่ยวกับการบำรุงรักษาและการเข้าถึงประสบการณ์ของผู้ใช้ได้ที่ Material Elevation และพิจารณาย้ายข้อมูลโปรเจ็กต์ไปยัง Jetpack Compose

ระดับความสูงของมุมมองซึ่งแสดงโดยพร็อพเพอร์ตี้ Z จะกำหนดลักษณะที่มองเห็นของเงา View ที่มีค่า Z สูงกว่าจะสร้างเงาที่ใหญ่ขึ้นและนุ่มนวลกว่า และจะบดบัง View ที่มีค่า Z ต่ำกว่า อย่างไรก็ตาม ค่า Z ของมุมมองจะไม่มีผลต่อขนาดของมุมมอง

รูปที่ 1 ระดับความสูงบนแกน Z และเงาที่เกิดขึ้น

เงาจะวาดโดยองค์ประกอบหลักของมุมมองที่ยกระดับ โดยจะขึ้นอยู่กับ การตัดมุมมองมาตรฐาน และจะถูกตัดโดยองค์ประกอบระดับบนสุดโดยค่าเริ่มต้น

นอกจากนี้ ระดับความสูงยังมีประโยชน์ในการสร้างภาพเคลื่อนไหวที่วิดเจ็ตจะลอยขึ้นเหนือระนาบมุมมองชั่วคราวเมื่อดำเนินการ

ดูข้อมูลเพิ่มเติมได้ที่ ระดับความสูงใน Material Design

กำหนดระดับความสูงให้กับวิว

ค่า Z สำหรับมุมมองมี 2 องค์ประกอบ ได้แก่

• ระดับความสูง: องค์ประกอบแบบคงที่
• การเปลี่ยน: คอมโพเนนต์แบบไดนามิกที่ใช้สำหรับภาพเคลื่อนไหว

Z = elevation + translationZ

ค่า Z วัดเป็น dp (ความหนาแน่นของพิกเซลอิสระ)

รูปที่ 2 เงาที่แตกต่างกันสำหรับระดับความสูงที่แตกต่างกันใน dp

หากต้องการตั้งค่าระดับความสูงเริ่มต้น (ปกติ) ของมุมมอง ให้ใช้แอตทริบิวต์ android:elevation ในเลย์เอาต์ XML หากต้องการตั้งค่าระดับความสูง ของมุมมองในโค้ดของกิจกรรม ให้ใช้เมธอด View.setElevation()

หากต้องการตั้งค่าการแปลมุมมอง ให้ใช้เมธอด View.setTranslationZ()

เมธอด ViewPropertyAnimator.z() และ ViewPropertyAnimator.translationZ() ช่วยให้คุณสร้างภาพเคลื่อนไหวของระดับความสูงของวิวได้ ดูข้อมูลเพิ่มเติมได้ที่ เอกสารอ้างอิง API สำหรับ ViewPropertyAnimator และคู่มือนักพัฒนาซอฟต์แวร์ภาพเคลื่อนไหวของพร็อพเพอร์ตี้

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

ปรับแต่งเงาและเส้นขอบของมุมมอง

ขอบเขตของ Drawable พื้นหลังของมุมมองจะเป็นตัวกำหนดรูปร่างเริ่มต้นของ เงา เส้นขอบแสดงรูปร่างด้านนอกของออบเจ็กต์กราฟิกและ กำหนดพื้นที่ระลอกสำหรับการตอบสนองต่อการสัมผัส

ลองพิจารณา View ต่อไปนี้ซึ่งกำหนดด้วย Drawable พื้นหลัง

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

Drawable พื้นหลังมีการกำหนดเป็นสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน ดังนี้

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

มุมมองจะทอดเงาที่มีมุมโค้งมน เนื่องจาก Drawable พื้นหลัง กำหนดโครงร่างของมุมมอง การระบุเส้นขอบที่กำหนดเองจะลบล้างรูปร่างเริ่มต้น ของเงาของมุมมอง

หากต้องการกำหนดโครงร่างที่กำหนดเองสำหรับมุมมองในโค้ด ให้ทำดังนี้

1. ขยาย ViewOutlineProvider คลาส
2. แทนที่เมธอด getOutline()
3. กำหนดผู้ให้บริการโครงร่างใหม่ให้กับมุมมองของคุณด้วยเมธอด View.setOutlineProvider()

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

ยอดดูคลิป

การครอบตัดมุมมองช่วยให้คุณเปลี่ยนรูปร่างของมุมมองได้ คุณสามารถตัดมุมมองเพื่อ ให้สอดคล้องกับองค์ประกอบการออกแบบอื่นๆ หรือเปลี่ยนรูปร่างของมุมมองเพื่อ ตอบสนองต่อข้อมูลจากผู้ใช้ คุณสามารถตัดมุมมองไปยังพื้นที่โครงร่างได้โดยใช้เมธอด View.setClipToOutline() เฉพาะเส้นขอบที่เป็นสี่เหลี่ยมผืนผ้า วงกลม และสี่เหลี่ยมผืนผ้าโค้งมนเท่านั้นที่รองรับการตัดตามที่กำหนดโดยเมธอด Outline.canClip()

หากต้องการคลิปมุมมองให้เป็นรูปร่างของ Drawable ให้ตั้งค่า Drawable เป็น พื้นหลังของมุมมอง ดังที่แสดงในตัวอย่างก่อนหน้า แล้วเรียกใช้ เมธอด View.setClipToOutline()

การครอบตัดมุมมองเป็นการดำเนินการที่มีค่าใช้จ่ายสูง ดังนั้นอย่าสร้างภาพเคลื่อนไหวให้กับรูปร่างที่ใช้ เพื่อครอบตัดมุมมอง หากต้องการสร้างเอฟเฟกต์นี้ ให้ใช้ ภาพเคลื่อนไหว การเปิดเผย