Garis vertikal menggunakan XML drawable


162

Saya mencoba mencari cara untuk mendefinisikan garis vertikal (tebal 1dp) untuk digunakan sebagai drawable.

Untuk membuat horisontal, itu cukup mudah:

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

Pertanyaannya adalah, bagaimana cara membuat garis ini vertikal?

Ya, ada solusi, seperti menggambar bentuk persegi panjang 1px tebal, tapi itu mempersulit XML yang dapat ditarik, jika terdiri dari beberapa <item>elemen.

Adakah yang punya peluang dengan ini?

MEMPERBARUI

Kasus masih belum terpecahkan. Namun, Bagi siapa saja yang melakukan perang salib dokumentasi Android - Anda mungkin menemukan ini berguna: Missing Android XML Manual

MEMPERBARUI

Saya tidak menemukan cara lain selain yang saya tandai sebagai benar. Meskipun demikian, triknya terasa agak "berat", jadi jika Anda mengetahui jawabannya, jangan lupa untuk berbagi;)

Jawaban:


394

Alih-alih bentuk, Anda dapat mencoba View:

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

Saya hanya menggunakan ini untuk garis horizontal, tetapi saya akan berpikir itu akan bekerja untuk garis vertikal juga.

Menggunakan:

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

untuk garis horizontal.


4
terima kasih Mark :)! Saya sadar saya bisa menggunakan pandangan untuk mencapai ini. Masalahnya adalah saya mengumpulkan pandangan yang sedikit lebih kompleks yang ingin saya gunakan sebagai gambar untuk latar belakang sel tabel. Ada berbagai jenis bentuk / gradien / garis di sana. Menggunakan view AKAN menjadi solusi, namun saya harus meletakkannya di "layer" gambar yang berbeda dan itu berpotensi menembak diri sendiri di kaki ketika saya akan menemukan pengubahan ukuran dll. Saya heran mengapa tidak ada dokumentasi pada " bentuk "xmls, mungkin seseorang dari google dapat mencerahkan kami? :)
Kaspa

1
Menggunakan marginRight / Start dan Kiri / End juga terkadang menarik untuk mendapatkan ruang di sisinya.
George

108

Anda dapat membuat sarang di dalam tag rotate.

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

Namun, satu-satunya masalah adalah tata letak params didefinisikan dalam tata letak Anda xml akan menjadi dimensi yang digunakan untuk menggambar bentuk aslinya. Berarti jika Anda ingin garis Anda menjadi 30dp tinggi, Anda perlu menentukan layout_width 30dp di tata letak Anda xml. Tetapi lebar akhir juga akan 30dp dalam kasus itu, yang kemungkinan tidak diinginkan untuk sebagian besar situasi. Ini pada dasarnya berarti lebar dan tinggi harus memiliki nilai yang sama, nilai panjang yang Anda inginkan untuk garis. Saya tidak tahu bagaimana cara memperbaikinya.

Ini tampaknya menjadi solusi "cara android", tetapi kecuali jika ada beberapa perbaikan atau solusi untuk masalah dimensi yang saya sebutkan maka ini kemungkinan tidak akan berhasil bagi kebanyakan orang. Yang benar-benar kita butuhkan adalah atribut orientasi di <shape /> atau <stroke />.

Anda juga dapat mencoba mereferensikan drawable lain di atribut tag rotate, seperti:

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

Namun saya belum menguji ini dan berharap memiliki masalah yang sama.

- EDIT -

Oh, aku benar-benar menemukan perbaikan. Anda dapat menggunakan margin negatif di layout xml Anda untuk menyingkirkan ruang ekstra yang tidak diinginkan. Seperti:

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

4
sementara margin negatif akan bekerja untuk 99% dari perangkat .... hanya tahu, ada perangkat di luar sana yang akan memaksa Tutup jika Anda melakukan ini. Beberapa perangkat mengalami kesulitan menaikkan margin negatif
Kent Andersen

2
@ cephus saya menggunakan kode pertama Anda, tetapi saya perlu baris di atas tampilan. Itu di tengah pandangan saya. Bagaimana saya bisa mengatur gravitasi untuk itu (di dalam file xml bentuk)?
Behzad

20

Anda dapat menggunakan atribut rotate

 <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
Ini jelas merupakan jawaban yang lebih baik (atau yang terbaik) karena, sementara jawaban @ commonsware cukup untuk garis vertikal normal. Jika kita tidak ingin membuat garis putus-putus (katakan misalnya), ini adalah satu-satunya jawaban yang akan berfungsi dengan baik.
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>

Bekerja untukku. Letakkan sebagai latar belakang tampilan dengan fill_parent atau ukuran tetap pada ketinggian dp


12

Saya datang dengan solusi yang berbeda. Idenya adalah untuk mengisi drawable terlebih dahulu dengan warna yang Anda inginkan menjadi garis dan kemudian mengisi seluruh area lagi dengan warna latar belakang saat menggunakan padding kiri atau kanan. Jelas ini hanya berfungsi untuk garis vertikal di paling kiri atau kanan gambar Anda.

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

Saya membutuhkan latar belakang dengan batas di kiri, kanan, bawah dan ini berhasil untuk saya, terima kasih!
Andrii Chernenko

Luar biasa, dengan ini saya berhasil membuat pembagi yang rapi di LinearLayout ( showDividers="middle"). Untuk mendapatkan pembagi 2dp, saya perlu menentukan di android:left="3dp"sini.
Jonik

Tip: untuk membuat drawable ini bermanfaat secara umum, gunakan @android:color/transparentalih-alih hardcoding @color/background_color.
Jonik

Sebenarnya untuk kebutuhan pembagi vertikal saya, solusi ini bahkan lebih sederhana . :)
Jonik

@Jonik Tentu, tapi itu hanya berfungsi dengan tampilan ketinggian tetap, bukan dengan wrap_content.
Eric Kok

10

Saya pikir ini adalah solusi paling sederhana:

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

Hebat. Tambahkan android:heightke sizejika Anda ingin mengontrol juga dimensi itu.
Giulio Piancastelli

4

Saya perlu menambahkan pandangan saya secara dinamis / terprogram, jadi menambahkan tampilan tambahan akan menjadi rumit. Tinggi tampilan saya adalah WRAP_CONTENT, jadi saya tidak bisa menggunakan solusi persegi panjang. Saya menemukan posting blog di sini tentang memperluas TextView, mengesampingkan onDraw () dan melukis di baris, jadi saya menerapkannya dan berfungsi dengan baik. Lihat kode saya di bawah ini:

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);
    }
}

Saya membutuhkan garis vertikal di sebelah kiri, tetapi parameter drawline adalah drawLine(startX, startY, stopX, stopY, paint)sehingga Anda dapat menggambar garis lurus ke arah mana pun di tampilan. Maka dalam kegiatan saya, saya memiliki NoteTextView note = new NoteTextView(this); Semoga ini bisa membantu.


3

sangat sederhana ... untuk menambahkan garis vertikal di xml android ...

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

Ini berfungsi baik ketika Anda tidak dapat menggunakan fill_parent untuk tinggi karena tinggi induk diatur ke wrap_content.
Sergey Aldoukhov

2

Tergantung, di mana Anda ingin memiliki garis vertikal, tetapi jika Anda ingin perbatasan vertikal misalnya, Anda dapat memiliki tampilan induk memiliki latar belakang yang dapat digambar khusus. Dan Anda kemudian dapat mendefinisikan gambar seperti ini:

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

Contoh ini akan membuat garis hitam tipis 1dp di sisi kanan tampilan, yang akan dapat digambar sebagai latar belakang.


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

Sepertinya tidak ada yang menyebutkan opsi ini:

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

Anda bisa menggunakan bentuk tetapi alih-alih garis, buat persegi panjang.

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

dan Dalam tata letak Anda gunakan ini ...

<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"/>

Anda mungkin harus bermain dengan lebar, tergantung pada ukuran tanda hubung, untuk membuatnya menjadi satu baris.

Semoga ini bisa membantu Ceria


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

Untuk membuat garis vertikal, cukup gunakan persegi panjang dengan lebar 1dp:

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

Jangan gunakan stroke, gunakan solid(yang merupakan warna "isi") untuk menentukan warna garis.


-1
 <View
        android:layout_width="2dp"
        android:layout_height="40dp"

        android:background="#ffffff"
        android:padding="10dp" />`
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.