จังหวะ Android แบบเปิดด้าน?


96

เป็นไปได้ไหมที่จะสร้างวัตถุรูปทรง Android ที่มีเส้นขีดเฉพาะบางด้าน?

เช่นฉันมี:

<stroke 
 android:width="3dip" 
 android:color="#000000"
    android:dashWidth="10dip" 
    android:dashGap="6dip" />

ซึ่งคล้ายกับ CSS นี้:

border: 3px dashed black;

ฉันจะตั้งจังหวะเพียงด้านเดียวได้อย่างไร? นี่คือวิธีที่ฉันจะทำใน CSS:

border-left: 3px dashed black;

คุณทำสิ่งนี้ใน Android XML ได้อย่างไร

คำตอบ:


127

ฉันได้รับทางออกที่ดีกับสิ่งนี้:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
    <item android:top="-1dp" android:right="-1dp" android:left="-1dp">
      <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="#ffffff" />
      </shape>
    </item>

</layer-list>

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

แก้ไข 1

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

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

แก้ไข 2

สนุก แต่ฉันพยายามใช้สิ่งนี้ในอีก 6 ปีต่อมาและฉันไม่สามารถรับผลลัพธ์ที่ดีบนอุปกรณ์ Lollipop ได้

อาจเป็นวิธีแก้ปัญหาปัจจุบันคือการใช้ 9-patch Android ควรแก้ปัญหาได้ง่ายสำหรับปัญหานี้หลังจากเวลานี้


สิ่งนี้ใช้ได้ผลกับฉันเช่นกัน แต่ฉันไม่รู้ว่าทำไมฉันต้องใช้ -2dp แทน -1dp ถ้าฉันใช้อย่างหลังฉันก็ยังคงเห็นเส้นบาง ๆ
Edu Zamora

1
@EduZamora ใช่ดูเหมือนว่าสำหรับอุปกรณ์ความหนาแน่นสูง -1dp ไม่ทำงานตามที่คาดไว้
htafoya

ฉันยังได้รับเส้นขอบสำหรับทุกด้าน แต่ไม่ใช่ขอบล่างเท่านั้น
Cheok Yan Cheng

@YanChengCHEOK ลองใช้ 1px แทน 1dp
htafoya

@htafoya นี่เป็นทางออกที่ยอดเยี่ยม ขอบคุณ!
abriggs

54

ฉันรู้ว่าคำถามนี้โพสต์ไว้นานแล้วดังนั้นผู้โพสต์คำถามนี้จะไม่ใช้คำตอบ แต่คำถามนี้อาจช่วยคนอื่นได้

 <?xml version="1.0" encoding="UTF-8"?>
    <!-- inset is used to remove border from top, it can remove border from any other side-->
    <inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:insetTop="-2dp"
        >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rectangle">
        <stroke android:width="1dp" android:color="#b7b7b7" />
        <corners android:bottomRightRadius="5dp"  android:bottomLeftRadius="5dp"/>

        <solid android:color="#454444"/>
    </shape>
    </inset>

ใช้insetแท็กและระบุค่าลบสำหรับเส้นขอบด้านข้างที่คุณต้องการลบ

ค่าที่เป็นไปได้คือ:

android:insetTop="-1dp" android:insetBottom="-1dp" android:insetLeft="-1dp" android:insetRight="-1dp"


ใช่และอย่าทำในสิ่งที่ฉันทำและลองใส่ attr แทรกในแท็กจังหวะโดยไม่อ่านคำตอบที่เหลือ! (ขอบคุณสำหรับคำตอบ BTW OP. โซลูชั่นที่สมบูรณ์แบบ)
Kiran

สง่า! ฉันชอบวิธีนี้
Hao Qi

41

ฉันแก้ไขสิ่งนี้โดยใช้ list-layer รวมสองรูปร่างโดยหนึ่งในนั้นมีความสูง 1dp วางไว้ที่ด้านล่าง

optionscreen_bottomrectangle.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
      <shape>
            <solid android:color="#535353" />
      </shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
     <shape>
           <solid android:color="#252525" />
     </shape>
</item>
</layer-list>

จากนั้นในไฟล์ layout / main.xml

<TextView
    android:id="@+id/bottom_rectangle"
    android:background="@drawable/optionscreen_bottomrectangle"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_below="@id/table_options"
    android:layout_above="@id/exit_bar"/>

ซึ่งเติมช่องว่างระหว่าง table_options และ exit_bar ด้วยพื้นหลังและก่อน exit_bar จะพิมพ์บรรทัด 1dp นี่เป็นเคล็ดลับสำหรับฉันฉันหวังว่ามันจะช่วยคนอื่นได้

คำตอบแก้ไขเพื่อวางเลเยอร์ตามลำดับที่ถูกต้อง ขอบคุณ Alex!


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

31

อีกอย่างใช้คำตอบอื่นโดยใช้ช่องว่างภายในแทน ตัวอย่างข้อมูลเล็ก ๆ น้อย ๆ นี้ทำเส้นขอบด้านบนและด้านล่าง

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the line -->
    <item>
          <shape>
                <padding android:left="0dp" android:top="1dp" android:right="0dp" android:bottom="1dp"/>
                <solid android:color="#898989" />
          </shape>
    </item>
    <!-- This is the main color -->
    <item>
         <shape>
             <solid android:color="#ffffff" />
         </shape>
    </item>
</layer-list>

4
นี่เป็นคำตอบที่ดีที่สุดหากคุณต้องการมุมโค้งมน
MacKinley Smith

สิ่งนี้ยังช่วยฉันอย่างมาก โปรดลองและโหวตเพิ่ม
Boy

@ug_ ฉันคิดว่านี่เป็นแนวทางที่ดีที่สุด ทำงานได้อย่างสมบูรณ์ขอบคุณ
Lalit Sharma

ผลงาน ดูผิดอย่างสิ้นเชิงในบานหน้าต่างแสดงตัวอย่าง Android Studio (v1.1) แต่บนอุปกรณ์ไม่เป็นไร
Murat Ögat

26

คำตอบของ @ Maragues คือย้อนกลับเนื่องจากรายการเลเยอร์วาดได้จากบนลงล่าง (หมายถึงรายการสุดท้ายในรายการจะวาดอยู่ด้านบน):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
      <shape>
            <solid android:color="#535353" />
      </shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
     <shape>
           <solid android:color="#252525" />
     </shape>
</item>

</layer-list>

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


2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


<item>
    <shape android:shape="rectangle" >
        <stroke  android:width="2dp"
                 android:color="#BBBBBB" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>
<item  android:bottom="2dp" >
    <shape android:shape="rectangle" >
        <stroke  android:width="2dp"
                 android:color="@color/main_background_color" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>


2

ฉันใช้รหัสต่อไปนี้

<?xml version="1.0" encoding="UTF-8"?>
<!-- inset is used to remove border from top, it can remove border from any other side-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetTop="-2dp" android:insetLeft="-2dp" android:insetRight="-2dp"
    >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rectangle">
        <stroke android:width="1dp" android:color="@color/colorPrimary" />
        <solid android:color="#0000"/>
        <padding android:left="2dp" android:top="2dp" android:bottom="2dp" android:right="2dp"/>
    </shape>
</inset>

0

ง่ายและมีประสิทธิภาพ

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

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

<androidx.constraintlayout.widget.ConstraintLayout .. >

    <View
        android:id="@+id/center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:background="@color/transparent"/>

   <View
        android:id="@+id/left_overlay"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/center"
        app:layout_constraintTop_toBottomOf="@id/top_overlay"
        app:layout_constraintBottom_toTopOf="@id/bottom_overlay"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/right_overlay"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@id/center"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_overlay"
        app:layout_constraintBottom_toTopOf="@id/bottom_overlay"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/top_overlay"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/center"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/bottom_overlay"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/center"
        android:background="@color/black"
        android:alpha="0.5"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

GL

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