การใช้ขอบลบใน Android เป็นการปฏิบัติที่ไม่ดีหรือไม่


114

การสาธิตขอบลบ:

                         ใส่คำอธิบายภาพที่นี่

สถานการณ์

มุมมองที่ทับซ้อนกันโดยการตั้งค่าระยะขอบเชิงลบให้กับมุมมองใดมุมมองหนึ่งเพื่อบุกรุกกรอบขอบเขตของมุมมองอื่น

ความคิด

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

ฉันยังทราบว่าตั้งแต่ API 21 เราสามารถตั้งค่าtranslationZและelevation คุณลักษณะที่จะทำให้มุมมองที่ปรากฏด้านบนหรือด้านล่างของมุมมองอื่น ๆ แต่กังวลของฉันพื้นมาจากความจริงที่ว่าในเอกสารสำหรับlayout_marginแอตทริบิวต์ก็ระบุไว้อย่างชัดเจนว่าค่าอัตรากำไรที่ควรจะเป็นในเชิงบวกให้ ฉันอ้าง:

ข้อความที่ตัดตอนมา:
ระบุช่องว่างเพิ่มเติมทางด้านซ้ายบนขวาและด้านล่างของมุมมองนี้ พื้นที่นี้อยู่นอกขอบเขตของมุมมองนี้ ค่ามาร์จิ้นที่ควรจะเป็นในเชิงบวก ต้องเป็นค่ามิติซึ่งเป็นตัวเลขทศนิยมที่ต่อท้ายด้วยหน่วยเช่น "14.5sp" หน่วยที่ใช้ได้ ได้แก่ px (พิกเซล), dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น), sp (พิกเซลที่ปรับขนาดตามขนาดตัวอักษรที่ต้องการ), นิ้ว (นิ้ว), มม. (มิลลิเมตร) ...

ในช่วงหลายปีที่ผ่านมาตั้งแต่แรกที่ถามคำถามนี้ฉันไม่ได้มีปัญหาใด ๆ เกี่ยวกับระยะขอบติดลบพยายามหลีกเลี่ยงการใช้พวกเขาให้มากที่สุด แต่ก็ไม่พบปัญหาใด ๆ ดังนั้นแม้ว่าเอกสารจะระบุว่าฉันก็ไม่ได้เช่นกัน กังวลเกี่ยวกับมัน


1
ฉันรู้ว่าการทดสอบเอสเปรสโซจะไม่สามารถมองเห็นวัตถุได้หากขอบด้านใดด้านหนึ่งเป็นลบ ... ดังนั้นจึงมีเหตุผลที่จะไม่ใช้
Tim Boland

คำตอบ:


193

ในปี 2010 @RomainGuy (หลัก Android วิศวกร) ระบุว่าอัตรากำไรขั้นต้นในทางลบมีพฤติกรรมที่ไม่ระบุรายละเอียด

ในปี 2011 @RomainGuy ระบุว่าคุณสามารถใช้ระยะขอบลบบนLinearLayoutและRelativeLayout .

ในปี 2016 ที่ระบุไว้ @RomainGuy ที่พวกเขาไม่เคยได้รับการสนับสนุนอย่างเป็นทางการและจะไม่ได้รับการสนับสนุนโดย ConstraintLayout

มันง่ายที่จะแก้ไขข้อ จำกัด นี้

เพิ่มมุมมองตัวช่วย (ความสูง 0dp ความกว้างที่ จำกัด ไว้ที่ระดับบนสุด) ที่ด้านล่างของมุมมองฐานของคุณที่ด้านล่างเพิ่มระยะขอบที่คุณต้องการ
จากนั้นวางตำแหน่งมุมมองของคุณไว้ด้านล่างมุมมองนี้เพื่อให้มีระยะขอบ "ลบ" แต่ไม่ต้องใช้ค่าลบที่ไม่รองรับ


1
ดูเหมือนว่าจะเป็นสิ่งที่ไม่เป็นอันตรายปล่อยให้เปิดไว้เผื่อว่าใครมีข้อมูลเชิงลึกอื่น ๆ
Juan Cortés

1
@DrewLeSueur: ฉันจะไม่ตั้งสมมติฐานนั้น ฉันไม่รู้ว่าช่องว่างในเชิงลบจะหมายถึงอะไร
CommonsWare

1
@CommonsWare ช่วยบอกหน่อยได้ไหมว่าทำแบบนั้นได้ไหม `- @ dimen / anyvalue" ฉันต้องการเรียกค่าที่ประกาศ แต่ลบช่วยด้วย
deadfish

2
@ 100kg: ขออภัย แต่ไม่รองรับ
CommonsWare

21
ฉันสังเกตเห็นว่าในAndroid 4.4 KitKat มีบางอย่างเปลี่ยนแปลงไปเกี่ยวกับระยะขอบติดลบ (เทียบกับ 4.3 อย่างน้อยใน Asus Nexus 7) ปรากฎที่คุณต้องการandroid:clipChildren="false"และandroid:clipToPadding="false"ที่คุณก่อนหน้านี้ไม่ได้หรือสิ่งที่ทำลายเช่นนี้
Jonik

18

หวังว่านี่จะช่วยใครบางคนได้ นี่คือโค้ดตัวอย่างที่ใช้งานได้โดยใช้ConstraintLayoutคำตอบของ @ CommonsWare:

เพิ่มมุมมองตัวช่วย (ความสูง 0dp ความกว้างที่ จำกัด ไว้ที่ระดับบนสุด) ที่ด้านล่างของมุมมองฐานของคุณที่ด้านล่างเพิ่มระยะขอบที่คุณต้องการ จากนั้นวางตำแหน่งมุมมองของคุณไว้ด้านล่างมุมมองนี้เพื่อให้มีระยะขอบ "ลบ" แต่ไม่ต้องใช้ค่าลบที่ไม่รองรับ

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

<TextView
    android:id="@+id/below"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#F1B36D"
    android:padding="30dp"
    android:text="I'm below"
    android:textColor="#ffffff"
    android:textSize="48sp"
    android:textAlignment="center"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="0dp" />

<android.support.v4.widget.Space
    android:id="@+id/space"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="32dp"
    app:layout_constraintBottom_toBottomOf="@+id/below"
    app:layout_constraintLeft_toLeftOf="@id/below"
    app:layout_constraintRight_toRightOf="@id/below" />

<TextView
    android:id="@+id/top"
    android:layout_width="100dp"
    android:layout_height="60dp"
    android:textAlignment="center"
    android:textColor="#ffffff"
    android:text="I'M ON TOP!"
    android:background="#676563"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

เอาท์พุท:

ใส่คำอธิบายภาพที่นี่


16

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


4

ในอดีตอาจเป็นแนวทางปฏิบัติที่ไม่ดี แต่ด้วยการออกแบบวัสดุและปุ่มการทำงานแบบลอยดูเหมือนว่าจะเป็นสิ่งที่หลีกเลี่ยงไม่ได้และจำเป็นในหลาย ๆ กรณีในตอนนี้ โดยทั่วไปเมื่อคุณมีเค้าโครงสองแบบที่แยกจากกันซึ่งคุณไม่สามารถใส่ลงใน RelativeLayout เดียวได้เนื่องจากต้องการการจัดการที่แยกจากกันอย่างชัดเจน (เช่นคิดว่าส่วนหัวและเนื้อหาเป็นต้น) วิธีเดียวที่จะซ้อนทับ FAB คือการทำให้มันหลุดออกจากหนึ่งในนั้น เค้าโครงโดยใช้ระยะขอบลบ และทำให้เกิดปัญหาเพิ่มเติมกับพื้นที่ที่คลิกได้


3

สำหรับฉันและเกี่ยวกับการตั้งค่าขอบลบบน TextView (ฉันรู้ว่า OP หมายถึง ViewGroup แต่ฉันกำลังมองหาปัญหาเกี่ยวกับการตั้งค่าระยะขอบติดลบและฉันมาถึงที่นี่) ... ฉันพบปัญหากับ 4.0.3 ( API 15) เท่านั้นและการตั้งค่าandroid:layout_marginTopหรือandroid:layout_marginBottomเป็นค่าลบเช่น -2dp

ด้วยเหตุผลบางประการ TextView ไม่แสดงเลย ดูเหมือนว่าจะ "หายไป" จากมุมมอง (ไม่ใช่แค่มองไม่เห็น)

เมื่อฉันลองสิ่งนี้กับ layout_margin อีก 3 เวอร์ชันฉันไม่เห็นปัญหา

โปรดทราบว่าฉันยังไม่ได้ลองใช้กับอุปกรณ์จริงนี่คือการใช้โปรแกรมจำลอง 4.0.3 นี่เป็นสิ่งที่แปลกอันดับสองที่ฉันพบว่ามีผลเฉพาะ 4.0.3 ดังนั้นกฎใหม่ของฉันคือต้องทดสอบกับโปรแกรมจำลอง 4.0.3 เสมอ :)

ฉันประสบความสำเร็จในการลดขอบล่างของ TextView โดยใช้android:lineSpacingExtra="-2dp"สิ่งที่ใช้งานได้แม้ว่าฉันจะมีandroid:singleLine="true"(และฉันก็ไม่คิดว่าระยะห่างระหว่างบรรทัดจะเป็นปัจจัย)


1
ฉันพบพฤติกรรมที่คล้ายกันใน Nexus 4 (ซึ่งก็คือ xhdpi) และ 4.2.2 มีเค้าโครงที่ไม่มีช่องว่างภายในแม้ว่าเค้าโครงหลักจะมีช่องว่างภายในก็ตาม มี TextView อยู่ข้างในโดยมี marginTop ติดลบ บน 5.0 ทำงานได้ดี ใน 4.2.2 ทั้งในอุปกรณ์และในโปรแกรมจำลองสำหรับ Nexus 4 จะหายไป วิธีแก้ปัญหาคือการย้ายช่องว่างภายในไปยังเค้าโครงที่มี TextView
louielouie

3

negative marginไม่มีคุณไม่ควรใช้ คุณควรใช้translateแทน แม้ว่าระยะขอบติดลบจะใช้งานได้ในบางครั้งเมื่อคุณเปลี่ยนเค้าโครงโดยใช้โปรแกรมแปลก็ช่วยได้ และมุมมองไม่สามารถล้นหน้าจอหากคุณใช้ระยะขอบ


0

ฉันรู้แค่ว่ามันเป็นไปได้ในช่วงเวลาสั้น ๆ แต่ฉันไม่เห็นปัญหากับมัน เพียงแค่ระวังขนาดหน้าจอและสิ่งนั้น ๆ เพื่อที่คุณจะได้ไม่เผลอทำกับรายการที่ไม่ควรวางซ้อนกันบนหน้าจอ (เช่นข้อความที่อยู่ด้านบนของข้อความน่าจะเป็นความคิดที่ไม่ดี)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.