Ligne de séparation / séparation de dessin Android dans la disposition?

684

Je voudrais tracer une ligne au milieu d'une mise en page et l'utiliser comme séparateur d'autres éléments comme TextView. Existe-t-il un bon widget pour cela. Je ne veux pas vraiment utiliser une image car il serait difficile de faire correspondre les autres composants avec elle. Et je veux qu'il soit également relativement bien positionné. Merci

Androider
la source

Réponses:

1687

J'utilise habituellement ce code pour ajouter une ligne horizontale:

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

Pour ajouter un séparateur vertical, changez les valeurs layout_widthetlayout_height

Alex Kucherenko
la source
10
Fonctionne aussi pour moi. Peut également ajouter android: layout_marginTop = "2dp" (etc) pour ajouter des espaces en haut et en bas.
Pincer
4
C'est parfait pour une simple ligne horizontale. Mais si vous voulez que la couleur se fane aux extrémités, utilisez l'une des autres méthodes ici.
Scott Biggs
91
Ou encore mieux, utilisezlayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3
17
Vous devez utiliser px au lieu de dp pour les séparateurs. À moins que vous ne vouliez réellement que la taille du séparateur varie et, éventuellement, tombe en dessous de 1/2 pixels. :)
Austin Hanson
9
Les spécifications de conception des matériaux recommandent d'utiliser 1dp d'épaisseur google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko
620

Pour améliorer les réponses fournies par Alex Kucherenko et Dan Dar3

J'ai ajouté ceci à mes styles:

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

Ensuite, dans mes mises en page est moins de code et plus simple à lire.

<View style="@style/Divider"/>
toddles_fp
la source
40
C'est super et à mon humble avis la meilleure solution! De cette façon, vous n'avez pas à définir manuellement la couleur, donc la cohérence est plus facile lorsque vous avez plusieurs thèmes (j'utilise Theme.Sherlock et Theme.Sherlock.Light).
Kopfgeldjaeger
2
+1 - Un excellent remplacement pour la solution <Image> à 9 lignes que j'ai utilisée jusqu'à présent. Très ... élégant
AVIDeveloper
3
Cela semble être la solution la plus propre. Merci!
FrozenCow
2
Cela semble fonctionner, mais dans l'aperçu d'Android Studio avec l'API 21, il n'est pas affiché ... Je n'ai pas pu tester si ce n'est qu'un problème d'aperçu ou également sur de vrais appareils ...
DominicM
3
Je pensais que cela ne s'affichait pas également dans l'aperçu d'Android Studio, mais après avoir zoomé sur l'aperçu, je peux distinguer la faible ligne qui s'affiche.
Nick Spacek
136

Ajoutez ceci dans votre mise en page où vous voulez que le séparateur (modifiez les attributs en fonction de vos besoins):

<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" />
Camille Sévigny
la source
1
Merci, a travaillé pour moi. Un look particulièrement agréable dans DrawerLayout
Martin Vysny
4
@Ahmed Vous ne pouvez pas l'utiliser lorsque vous avez un fond d'activité blanc, je suppose, dans ce cas, utilisez android: src = "@ android: drawable / divider_horizontal_bright" à la place.
romanos
96

Vous pouvez l'utiliser dans LinearLayout:

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

Par exemple:

<?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>
user2240225
la source
4
Notez que cela n'est disponible qu'à partir du niveau d'API 11
San
Malheureusement, cette méthode ne met pas en évidence les séparateurs avec des couleurs vives.
L'Android d'origine
moins c'est mieux! Thanx
pablo.vix
60

Manière la plus simple:

Séparateur vertical:

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

Vue du diviseur vertical

Diviseur horizontal:

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

Vue du diviseur horizontal

C'est tout oui!

Il suffit de mettre cela 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>
Khemraj
la source
cela chevauche le tout avec une vue.
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" />
pprados
la source
1
Je défendrais cette méthode plus que d'autres au motif qu'elle utilise un style déjà existant, mais elle pourrait ne pas plaire à tout le monde.
Solénoïde
3
L'inconvénient de cette approche est cependant que le mauvais Android ne garantit PAS le style existant.
Youngjae
46

utilisez ce code. Ça aidera

<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" >
Deepak Goel
la source
20

Écrivez simplement ceci:

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

exemple complet:

<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>
Farid Ahmed
la source
1
Cette réponse devrait être acceptée car c'est la façon la plus correcte d'ajouter un diviseur à unLinearLayout
JaydeepW
Ce sera pour tous les éléments de la mise en page, correct?
Rami Alloush
20
<View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray" />

Entre deux dispositions Mettez ce code pour obtenir Divider.

SHASHWAT DOSHI
la source
18

si vous utilisez actionBarSherlock, vous pouvez utiliser la classe com.actionbarsherlock.internal.widget.IcsLinearLayout afin de prendre en charge les séparateurs et de les afficher entre les vues.

exemple d'utilisation:

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

notez que pour une raison quelconque, l'aperçu dans le concepteur graphique indique "android.graphics.bitmap_delegate.nativeRecycle (I) Z". Je ne sais pas ce que cela signifie, mais il peut être ignoré car il fonctionne bien sur les nouvelles versions d'Android et les anciennes (testées sur Android 4.2 et 2.3).

semble que l'erreur ne s'affiche que lorsque vous utilisez API17 pour le concepteur graphique.

développeur android
la source
12

Ajout de cette vue; qui dessine un séparateur entre votretextviews

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

C'est très simple. Créez simplement une vue avec la couleur d'arrière-plan noire.

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

Cela créera une ligne horizontale avec la couleur d'arrière-plan. Vous pouvez également ajouter d'autres attributs tels que des marges, des rembourrages, etc., comme n'importe quelle autre vue.

Wijay Sharma
la source
11

Voici votre réponse ... c'est un exemple pour tracer une ligne entre les contrôles ...

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

Ce code trace une ligne entre deux contrôles ...

Archan Desai
la source
10

Il ajoute un séparateur horizontal n'importe où dans votre mise en page.

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>
Kamel
la source
La ligne ne passe que sous Textview.
live-love
10

Vous pouvez utiliser cet <View>élément juste après le First TextView.

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

Version d'exécution:

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);
alcsan
la source
7

utilisez ce code xml pour ajouter une ligne verticale

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

utilisez ce code xml pour ajouter une ligne horizontale

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />
Maksudul Hasan Raju
la source
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
développeur de rêve
la source
6

Dans les cas où l'on utilise une android:layout_weightpropriété pour affecter l'espace d'écran disponible aux composants de disposition, par exemple

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

Pour ajouter un séparateur entre les deux dispositions existantes qui a déjà pris tout l'espace de l'écran, nous ne pouvons pas simplement ajouter un autre LinearLayout avec android:weight:"1"car cela fera trois colonnes de largeur égale dont nous ne voulons pas. Au lieu de cela, nous diminuerons la quantité d'espace que nous donnerons à cette nouvelle disposition. Le code final ressemblerait à ceci:

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

entrez la description de l'image ici

Cyclotron3x3
la source
5

Si vous allez l’utiliser beaucoup, la meilleure chose à faire est de

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>

maintenant dans votre mise en page, ajoutez-le simplement comme:

<View style="@style/Seperator" />
Irshu
la source
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" />
code511788465541441
la source
sans utiliser android: src = "? android: attr / listDivider" .... il suffit d'ajouter android: background = "# FFFFFF"
bebosh
4

Ajoutez une ligne noire horizontale en utilisant ceci:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>
Jyoti Sharma
la source
3

Pour compléter la réponse de Camille Sévigny, vous pouvez également définir votre propre forme de ligne, par exemple pour personnaliser la couleur de la ligne.

Définissez une forme xml dans un répertoire dessinable. 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>

Utilisez cette ligne dans votre mise en page avec les attributs souhaités:

    <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" />
LG
la source
3

J'utilise habituellement ce code:

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

si vous avez un objet dans votre mise en page et que vous souhaitez définir une ligne ci-dessous qui utilise cet attribut dans ImageView:

android:layout_below="@+id/textBox1"
Hossein
la source
3

Cela vous aiderait à résoudre ce problème. Ici, une petite vue est créée pour faire une ligne noire comme séparateur entre deux vues.

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />
Mayank Garg
la source
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>

FAHAD HAMMAD ALOTAIBI
la source
2

Voici le code "une ligne de séparation horizontale entre deux vues de texte". Essaye ça

    <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" />/>
Sunil
la source
1

Divisez l'espace en deux parties égales:

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

Notez qu'une partie contient un séparateur à la fin

Dan Alboteanu
la source
1

Solution simple

ajoutez simplement ce code dans votre mise en page et remplacez 'Id_of__view_present_above' par l'id de la vue, en dessous de laquelle vous avez besoin du séparateur.

<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"
/>
shreedhar bhat
la source
3
stackoverflow.com/help/how-to-answer Recherchez->Brevity is acceptable, but fuller explanations are better.
Andy K
0

Par exemple, si vous avez utilisé recyclerView pour vos articles:

dans build.gradle, écrivez:

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

Si vous souhaitez définir des valeurs de couleur, de taille et de marge, vous pouvez spécifier comme suit:

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());
Morozov
la source