เส้นแนวตั้งโดยใช้ XML drawable


162

ฉันพยายามหาวิธีกำหนดเส้นแนวตั้ง (หนา 1dp) เพื่อใช้เป็น drawable

หากต้องการสร้างแนวนอนมันค่อนข้างตรงไปตรงมา:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp" android:color="#0000FF"/>
    <size android:height="50dp" />     
</shape>

คำถามคือทำอย่างไรถึงจะทำให้บรรทัดนี้เป็นแนวดิ่ง

ใช่มีวิธีแก้ไขปัญหาเช่นการวาดรูปสี่เหลี่ยมผืนผ้าหนา 1px แต่จะทำให้ XML ที่วาดได้ซับซ้อนขึ้นหากประกอบไปด้วย<item>องค์ประกอบหลายอย่าง

ใครมีโอกาสกับเรื่องนี้?

UPDATE

เคสยังไม่ได้รับการแก้ไข อย่างไรก็ตามสำหรับทุกคนในสงครามครูเสดเอกสาร Android - คุณอาจพบว่ามีประโยชน์นี้: คู่มือ Android XML หายไป

UPDATE

ฉันไม่พบวิธีอื่นนอกจากวิธีที่ฉันทำเครื่องหมายว่าถูกต้อง มันหลอกลวง แต่รู้สึกว่า "หนัก" เล็กน้อยดังนั้นถ้าคุณรู้คำตอบอย่าลืมแบ่งปัน;)

คำตอบ:


394

แทนที่จะเป็นรูปร่างคุณสามารถลองView:

<View
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:background="#FF0000FF" />

ฉันใช้สิ่งนี้กับเส้นแนวนอนเท่านั้น แต่ฉันคิดว่ามันจะใช้ได้กับเส้นแนวตั้งด้วย

ใช้:

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="#FF0000FF" />

สำหรับเส้นแนวนอน


4
ขอบคุณ Mark :)! ฉันรู้ว่าฉันสามารถใช้มุมมองเพื่อให้บรรลุนี้ สิ่งที่ฉันกำลังรวบรวมมุมมองที่ซับซ้อนมากขึ้นเล็กน้อยที่ฉันต้องการใช้เป็น drawable สำหรับพื้นหลังของเซลล์ตาราง รูปร่าง / การไล่ระดับสี / เส้นมีหลายประเภท การใช้มุมมองจะเป็นวิธีแก้ปัญหา แต่ฉันจะต้องใส่มันลงไปใน "เลเยอร์" การวาดภาพที่แตกต่างกันและนั่นอาจเป็นตัวคุณเองเมื่อฉันจะเจอการปรับขนาด ฯลฯ ฉันสงสัยว่าทำไมไม่มีเอกสารเกี่ยวกับ " รูปร่าง "xmls อาจจะมีบางคนที่มาจาก google สอนเราได้เหรอ? :)
Kaspa

1
การใช้ marginRight / Start และ Left / End บางครั้งก็น่าสนใจเช่นกันที่จะได้พื้นที่ด้านข้าง
George

108

คุณสามารถซ้อนรูปร่างของคุณภายในแท็กหมุน

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape 
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#ff00ff"
            android:dashWidth="1dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

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

นี่น่าจะเป็นวิธี "วิธี android" แต่ถ้ามีการแก้ไขหรือวิธีแก้ปัญหาสำหรับปัญหามิติที่ฉันพูดถึงก็มีแนวโน้มว่าจะไม่ทำงานสำหรับคนส่วนใหญ่ สิ่งที่เราต้องการจริงๆคือคุณลักษณะการวางแนวใน <รูปร่าง /> หรือ <จังหวะ />

คุณสามารถลองอ้างอิง drawable อื่นในแอตทริบิวต์ของแท็กหมุนได้เช่น:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/horizontal_line" />

อย่างไรก็ตามฉันยังไม่ได้ทดสอบและคาดหวังว่ามันจะมีปัญหาเดียวกัน

- แก้ไข -

โอ้จริงฉันคิดว่าการแก้ไข คุณสามารถใช้มาร์จิ้นติดลบในเลย์เอาต์ xml ของคุณเพื่อกำจัดพื้นที่พิเศษที่ไม่ต้องการ เช่น:

<ImageView
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="-15dp"
    android:layout_marginRight="-15dp"
    android:src="@drawable/dashed_vertical_line" />

4
ในขณะที่ระยะขอบติดลบจะทำงานได้ถึง 99% ของอุปกรณ์ .... เพิ่งรู้ว่ามีอุปกรณ์อยู่ข้างนอกซึ่งจะบังคับปิดหากคุณทำเช่นนี้ อุปกรณ์บางอย่างมีปัญหาในการพองอัตรากำไรขั้นต้นติดลบ
Kent Andersen

2
@cephus ฉันใช้รหัสแรกของคุณ แต่ฉันต้องการบรรทัดที่ด้านบนของมุมมอง มันอยู่ในใจกลางของมุมมองของฉัน ฉันจะกำหนดแรงโน้มถ่วงให้กับมันได้อย่างไร (ภายในไฟล์รูปร่าง xml)
Behzad

20

คุณสามารถใช้คุณสมบัติการหมุนได้

 <item>
    <rotate
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:shape="line"
            android:top="1dip" >
            <stroke
                android:width="1dip"
                 />
        </shape>
    </rotate>
</item>

6
นี่เป็นคำตอบที่ดีกว่า (หรือดีที่สุด) แน่นอนเพราะในขณะที่คำตอบของ @ commonsware ก็เพียงพอสำหรับบรรทัดแนวตั้งปกติ หากเราไม่ต้องการสร้างเส้นประ (ตัวอย่างเช่น) นี่เป็นคำตอบเดียวที่ทำงานได้อย่างถูกต้อง
Subin Sebastian

16
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
    <stroke android:width="1dp" android:color="@color/white" />
    <size android:width="2dp" />
</shape>

ทำงานสำหรับฉัน วางไว้เป็นพื้นหลังของมุมมองด้วย fill_parent หรือขนาดคงที่ในความสูง dp


11

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/divider_color" />
    <item android:left="6dp" android:drawable="@color/background_color" />
</layer-list>

ฉันต้องการพื้นหลังที่มีเส้นขอบด้านซ้ายขวาล่างและนี่ใช้ได้สำหรับฉันขอบคุณ!
Andrii Chernenko

ยอดเยี่ยมด้วยสิ่งนี้ฉันจัดการเพื่อสร้างตัวแบ่งที่เรียบร้อยใน LinearLayout ของฉัน ( showDividers="middle") เพื่อให้ได้ตัวหาร 2dp ฉันต้องระบุandroid:left="3dp"ที่นี่
Jonik

เคล็ดลับ: เพื่อให้นี้ drawable มีประโยชน์มากขึ้นโดยทั่วไปใช้ @android:color/transparentแทน @color/background_colorhardcoding
Jonik

ที่จริงแล้วสำหรับความต้องการตัวแบ่งแนวตั้งของฉันวิธีนี้ง่ายกว่ามาก :)
Jonik

@Jonik แน่นอน wrap_contentแต่ที่ทำงานเฉพาะกับมุมมองความสูงคงไม่ได้กับ
Eric Kok

10

ฉันคิดว่านี่เป็นวิธีที่ง่ายที่สุด:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:gravity="center">
        <shape android:shape="rectangle">
            <size android:width="1dp" />
            <solid android:color="#0000FF" />
        </shape>
    </item>

</layer-list>

ยอดเยี่ยม เพิ่มandroid:heightลงในsizeหากคุณต้องการควบคุมมิตินั้นด้วย
Giulio Piancastelli

4

ฉันจำเป็นต้องเพิ่มมุมมองของฉันแบบไดนามิก / โดยทางโปรแกรมดังนั้นการเพิ่มมุมมองเพิ่มเติมจะยุ่งยาก มุมมองความสูงของฉันคือ WRAP_CONTENT ดังนั้นฉันจึงไม่สามารถใช้โซลูชันสี่เหลี่ยมผืนผ้าได้ ฉันพบบล็อกโพสต์ที่นี่เกี่ยวกับการขยาย TextView, การเอาชนะ onDraw () และการระบายสีในบรรทัดดังนั้นฉันจึงใช้มันและมันทำงานได้ดี ดูรหัสของฉันด้านล่าง:

public class NoteTextView extends TextView {
    public NoteTextView(Context context) {
       super(context);
    }
    private Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#F00000FF"));
        paint.setStrokeWidth(0);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, 0, getHeight(), paint);
    }
}

ฉันต้องการเส้นแนวตั้งทางด้านซ้าย แต่พารามิเตอร์ Drawline เป็นdrawLine(startX, startY, stopX, stopY, paint)เพื่อให้คุณสามารถวาดเส้นตรงใด ๆ ในทิศทางใดก็ได้ในมุมมอง จากนั้นในกิจกรรมของฉันฉัน NoteTextView note = new NoteTextView(this); หวังว่านี่จะช่วยได้


3

มันง่ายมาก ... เพื่อเพิ่มเส้นแนวตั้งใน android xml ...

<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:rotation="90"
android:background="@android:color/darker_gray"/>

สิ่งนี้ใช้งานได้ดีเมื่อคุณไม่สามารถใช้ fill_parent สำหรับความสูงได้เนื่องจากความสูงหลักถูกตั้งค่าเป็น wrap_content
Sergey Aldoukhov

2

ขึ้นอยู่กับตำแหน่งที่คุณต้องการให้มีเส้นแนวตั้ง แต่ถ้าคุณต้องการเส้นขอบแนวตั้งคุณสามารถให้มุมมองพาเรนต์มีพื้นหลังแบบกำหนดเองได้ และคุณสามารถนิยาม drawable ดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="#000000" />
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
        </shape>
    </item>

</layer-list>

ตัวอย่างนี้จะสร้างเส้นสีดำบาง ๆ 1dp ที่ด้านขวาของมุมมองซึ่งจะมี drawable นี้เป็นพื้นหลัง


2
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>

    </item>

</layer-list>

2

ดูเหมือนว่าไม่มีใครพูดถึงตัวเลือกนี้:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white" android:width="1dp"/>
</layer-list>

1

คุณสามารถใช้รูปร่าง แต่แทนที่จะเป็นเส้นทำให้เป็นรูปสี่เหลี่ยมผืนผ้า

android:shape="rectangle">
<stroke
    android:width="5dp"
    android:color="#ff000000"
    android:dashGap="10px"
    android:dashWidth="30px" />

และในรูปแบบของคุณใช้สิ่งนี้ ...

<ImageView
    android:layout_width="7dp"
    android:layout_height="match_parent"
    android:src="@drawable/dashline"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layerType="software"/>

คุณอาจต้องเล่นด้วยความกว้างขึ้นอยู่กับขนาดของเครื่องหมายขีดคั่นเพื่อให้เป็นเส้นเดียว

หวังว่านี่จะช่วยไชโย


1
add this in your styles.xml

        <style name="Divider">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:background">@color/divider_color</item>
        </style>

        <style name="Divider_invisible">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
        </style>

then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table. 

     <TableLayout
                android:id="@+id/table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:stretchColumns="*" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:background="#92C94A" >

                    <TextView
                        android:id="@+id/textView11"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp" />
    //...................................................................    

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider_invisible" />
                    </LinearLayout>
        //...................................................................
                    <TextView
                        android:id="@+id/textView12"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/main_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
  //...............................................................  
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    //...................................................................
                    <TextView
                        android:id="@+id/textView13"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/side_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

                    <TextView
                        android:id="@+id/textView14"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/total"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
                </TableRow>

                <!-- display this button in 3rd column via layout_column(zero based) -->

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#6F9C33" >

                    <TextView
                        android:id="@+id/textView21"
                        android:padding="5dp"
                        android:text="@string/servings"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    ..........
    .......
    ......

0

หากต้องการสร้างเส้นแนวตั้งเพียงใช้สี่เหลี่ยมที่มีความกว้าง 1dp:

<shape>
    <size
        android:width="1dp"
        android:height="16dp" />
    <solid
        android:color="#c8cdd2" />
</shape>

อย่าใช้strokeใช้solid(ซึ่งเป็นสี "เติม") เพื่อระบุสีของเส้น


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