Pemisah Gambar / Garis Pembagi di Layout Android?


684

Saya ingin menggambar garis tepat di tengah-tengah tata letak dan menggunakannya sebagai pemisah item lain seperti TextView. Apakah ada widget yang bagus untuk ini? Saya tidak benar-benar ingin menggunakan gambar karena akan sulit untuk mencocokkan komponen lain dengan itu. Dan saya ingin posisinya juga relatif. Terima kasih

Jawaban:


1685

Saya biasanya menggunakan kode ini untuk menambahkan garis horizontal:

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"/>

Untuk menambahkan pemisah vertikal, alihkan layout_widthdan layout_heightnilai


10
Bekerja untuk saya juga. Dapat juga menambahkan android: layout_marginTop = "2dp" (dll) untuk menambahkan spasi di atas dan bawah.
Pinch

4
Ini bagus untuk garis horizontal sederhana. Tetapi jika Anda ingin warna memudar di ujungnya, gunakan salah satu metode lain di sini.
Scott Biggs

91
Atau bahkan lebih baik, gunakanlayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
Anda harus menggunakan px bukan dp untuk pembagi. Kecuali jika Anda benar-benar ingin ukuran pembagi bervariasi dan, berpotensi, turun di bawah 1/2 piksel. :)
Austin Hanson

9
Spesifikasi desain bahan merekomendasikan penggunaan google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Untuk memperbaiki jawaban yang diberikan oleh Alex Kucherenko dan Dan Dar3

Saya menambahkan ini ke gaya saya:

<style name="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:background">?android:attr/listDivider</item>
</style>

Kemudian di layout saya kurang kode dan lebih mudah dibaca.

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

40
Ini bagus dan IMHO solusi terbaik! Dengan begitu Anda tidak perlu mengatur warna secara manual, jadi konsistensi lebih mudah bila Anda memiliki lebih dari satu tema (saya menggunakan Theme.Sherlock dan Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1 - Pengganti hebat untuk solusi <Image> 9-baris yang saya gunakan sejauh ini. Sangat ... stylish
AVIDeveloper

3
Ini sepertinya solusi terbersih. Terima kasih!
FrozenCow

2
Ini tampaknya berfungsi tetapi dalam pratinjau Android Studio dengan API 21 tidak ditampilkan ... Saya tidak dapat menguji apakah ini hanya masalah pratinjau atau juga pada perangkat nyata ...
DominicM

3
Saya pikir itu tidak ditampilkan di pratinjau Android Studio, tetapi setelah memperbesar pratinjau saya bisa melihat garis samar yang ditampilkan.
Nick Spacek

136

Tambahkan ini di tata letak Anda di mana Anda ingin pembagi (memodifikasi atribut yang sesuai dengan kebutuhan Anda):

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/divider_horizontal_dark"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" />

1
Terima kasih, berhasil untuk saya. Terlihat sangat bagus di DrawerLayout
Martin Vysny

4
@Ahmed Anda tidak dapat menggunakan ini ketika Anda memiliki latar belakang aktivitas putih, saya kira, dalam hal ini gunakan android: src = "@ android: drawable / divider_horizontal_bright" sebagai gantinya.
romanos

96

Anda dapat menggunakan ini di LinearLayout:

android:divider="?android:dividerHorizontal"
android:showDividers="middle"

Sebagai contoh:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="?android:dividerHorizontal"
    android:showDividers="middle"
    android:orientation="vertical" >            

        <TextView 
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>
        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>

</LinearLayout>

4
Perhatikan bahwa ini hanya tersedia dari API level 11
San

Sayangnya metode ini tidak menyorot pembagi dengan warna-warna berani.
Android Asli

lebih sedikit lebih baik! Thanx
pablo.vix

60

Cara termudah:

Pembagi vertikal:

<View style="@style/Divider.Vertical"/>

Tampilan pembagi vertikal

Pembagi horizontal:

<View style="@style/Divider.Horizontal"/>

Tampilan pembagi horizontal

Itu saja ya!

Masukkan saja ini res>values>styles.xml

<style name="Divider">
    <item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
</style>

<style name="Divider.Horizontal" parent="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item> // You can change thickness here.

</style>

<style name="Divider.Vertical" parent="Divider">
    <item name="android:layout_width">1dp</item>
    <item name="android:layout_height">match_parent</item>
</style>

ini tumpang tindih dengan Tampilan.
ChumiestBucket

56
<TextView
    android:id="@+id/line"
    style="?android:attr/listSeparatorTextViewStyle"
    android:paddingTop="5dip"
    android:gravity="center_horizontal"
    android:layout_below="@+id/connect_help"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000" />

1
Saya akan membela metode ini lebih dari yang lain di akun yang menggunakan gaya yang sudah ada, tetapi mungkin tidak menyenangkan semua orang.
Solenoid

3
Namun kelemahan dari pendekatan ini adalah, Android yang buruk TIDAK menjamin gaya yang ada.
Youngjae

46

gunakan kode ini. Itu akan membantu

<LinearLayout
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:divider="?android:dividerHorizontal"
    android:gravity="center"
    android:orientation="vertical"
    android:showDividers="middle" >

20

Tulis saja ini:

 android:divider="?android:dividerHorizontal"
 android:showDividers="middle"

contoh lengkap:

<LinearLayout
        android:id="@+id/llTipInformation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvServiceRating"
        android:orientation="horizontal"
        android:divider="?android:dividerHorizontal"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:showDividers="middle">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tippercent"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tiptotal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>

</LinearLayout>

1
Ini harus diterima sebagai jawaban karena ini adalah cara paling benar untuk menambahkan pembagi keLinearLayout
JaydeepW

Ini akan untuk semua elemen dalam tata letak ,, koreksi?
Rami Alloush

20
<View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray" />

Antara dua Tata Letak Masukkan kode ini untuk mendapatkan Divider.


18

jika Anda menggunakan actionBarSherlock, Anda dapat menggunakan kelas com.actionbarsherlock.internal.widget.IcsLinearLayout untuk mendukung pembagi dan menunjukkannya di antara tampilan.

contoh penggunaan:

<com.actionbarsherlock.internal.widget.IcsLinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:divider="@drawable/divider"
    android:dividerPadding="10dp"
    android:orientation="vertical"
    android:showDividers="beginning|middle|end" >
... children...

res / drawable / divider.xml:

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

    <size android:height="2dip" />

    <solid android:color="#FFff0000" />

</shape>

harap dicatat bahwa untuk beberapa alasan, pratinjau pada desainer grafis mengatakan "android.graphics.bitmap_delegate.nativeRecycle (I) Z". tidak yakin apa artinya, tetapi dapat diabaikan karena berfungsi dengan baik pada versi baru Android dan yang lama (diuji pada Android 4.2 dan 2.3).

Tampaknya kesalahan hanya ditampilkan saat menggunakan API17 untuk desainer grafis.


12

Menambahkan tampilan ini; yang menarik pemisah antara Andatextviews

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

12

Sangat sederhana. Cukup buat Tampilan dengan warna latar belakang hitam.

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000"/>

Ini akan membuat garis horizontal dengan warna latar belakang. Anda juga dapat menambahkan atribut lain seperti margin, paddings, dll seperti tampilan lainnya.


11

Inilah jawaban Anda..ini adalah contoh untuk menarik garis di antara kontrol ...

<TextView
            android:id="@+id/textView1"
            style="@style/behindMenuItemLabel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:text="FaceBook Feeds" />

         <View
             android:layout_width="fill_parent"
             android:layout_height="2dp"
             android:background="#d13033"/>

         <ListView
            android:id="@+id/list1"
            android:layout_width="350dp"
            android:layout_height="50dp" />

Kode ini menarik garis antara dua kontrol ...


10

Ini menambah pembagi horizontal ke mana saja di tata letak Anda.

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>

Baris hanya berjalan di bawah Textview.
live-love

10

Anda dapat menggunakan <View>elemen ini tepat setelah TextView Pertama.

 <View
         android:layout_marginTop="@dimen/d10dp"
         android:id="@+id/view1"
         android:layout_width="fill_parent"
         android:layout_height="1dp"
         android:background="#c0c0c0"/>

8

Versi runtime:

View dividerView = new View(getContext());
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
dividerView.setLayoutParams(lp);

TypedArray array = getContext().getTheme()
    .obtainStyledAttributes(new int[] {android.R.attr.listDivider});
Drawable draw = array.getDrawable(0);       
array.recycle();

dividerView.setBackgroundDrawable(draw);
mParentLayout.addView(dividerView);

7

gunakan kode xml ini untuk menambahkan garis vertikal

 <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:background="#000000" />

gunakan kode xml ini untuk menambahkan garis horizontal

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

6
//for vertical line:

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




//for horizontal line: 

<View
   android:layout_width="fill_parent"
   android:layout_height="1dp"
   android:background="#00000000" />
//it works like a charm

6

Dalam kasus di mana seseorang menggunakan android:layout_weightproperti untuk menetapkan ruang layar yang tersedia untuk komponen tata letak, misalnya

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

     /* And we want to add a verical separator here */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
     </LinearLayout>

</LinearLayout>

Untuk menambahkan pemisah antara dua tata letak yang sudah ada yang telah mengambil seluruh ruang layar, kita tidak bisa hanya menambahkan LinearLayout dengan android:weight:"1"karena itu akan membuat tiga kolom lebar sama dengan yang tidak kita inginkan. Sebagai gantinya, kami akan mengurangi jumlah ruang yang akan kami berikan untuk tata letak baru ini. Kode final akan terlihat seperti ini:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

                    /* *************** ********************** */

    /* Add another LinearLayout with android:layout_weight="0.01" and 
       android:background="#your_choice" */
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.01"
        android:background="@android:color/darker_gray"
     />

    /* Or View can be used */
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
     />

                     /* *************** ********************** */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

</LinearLayout>

masukkan deskripsi gambar di sini


5

Jika Anda akan sering menggunakannya, hal terbaik untuk dilakukan adalah

styles.xml:

<style name="Seperator">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@color/light_color</item>
    </style>

sekarang di tata letak Anda, tambahkan saja seperti:

<View style="@style/Seperator" />

4
<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="2dp"
    android:scaleType="fitXY"
    android:src="?android:attr/listDivider" />

tanpa menggunakan android: src = "? android: attr / listDivider" .... tambahkan saja android: background = "# FFFFFF"
bebosh

4

Tambahkan garis hitam horizontal menggunakan ini:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>

3

Untuk menyelesaikan jawaban Camille Sévigny Anda juga dapat menentukan bentuk garis Anda sendiri misalnya untuk mengubahsuaikan warna garis.

Tentukan bentuk xml di direktori yang dapat digambar. line_horizontal.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
    <stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
    <size android:width="5dp" />
</shape>

Gunakan baris ini di tata letak Anda dengan atribut yang diinginkan:

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="2dp"
        android:src="@drawable/line_horizontal" />

3

Saya biasanya menggunakan kode ini:

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:background="#aa000000" />

jika Anda memiliki objek di tata letak Anda dan Anda ingin mengatur baris di bawah ini yang menggunakan atribut ini di ImageView:

android:layout_below="@+id/textBox1"

3

Ini akan membantu Anda untuk menyelesaikan masalah ini. Di sini tampilan kecil dibuat untuk membuat garis hitam sebagai pemisah antara dua tampilan.

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />

2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item
    android:bottom="0dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/divider" />
    </shape>
</item>


2

Berikut adalah kode "garis pembagi horizontal antara dua Tampilan Teks". Coba ini

    <TextView
        android:id="@id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="5dp"
        android:inputType="textPersonName"
        android:text:"address" />


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/black"/>


    <TextView
        android:id="@id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" 
        android:text:"Upload File" />/>

1

Membagi ruang menjadi dua bagian yang sama:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="?android:dividerHorizontal"
        android:showDividers="end"></LinearLayout>

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

</LinearLayout>

Perhatikan bahwa satu bagian berisi pembagi di bagian akhir


1

Solusi sederhana

cukup tambahkan kode ini di tata letak Anda dan ganti 'Id_of__view_present_above' ke id tampilan, di bawah ini Anda memerlukan pembagi.

<TextView
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:background="#c0c0c0"
  android:id="@+id/your_id"
  android:layout_marginTop="16dp" 
  android:layout_below="@+id/Id_of__view_present_above"
/>

3
stackoverflow.com/help/how-to-answer Cari->Brevity is acceptable, but fuller explanations are better.
Andy K

0

Misalnya jika Anda menggunakan recyclerView untuk item Anda:

di build.gradle tulis:

dependencies {
    compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'

Jika Anda ingin mengatur nilai warna, ukuran dan margin, Anda dapat menentukan sebagai berikut:

RecyclerView recyclerView = (RecyclerView) 
findViewById(R.id.recyclerview);
recyclerView.addItemDecoration(
        new HorizontalDividerItemDecoration.Builder(this)
                .color(Color.RED)
                .sizeResId(R.dimen.divider)
                .marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
                .build());
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.