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

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


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

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

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>

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>

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

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

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>

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.


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.


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

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.


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


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

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

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

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

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

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


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

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

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

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

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"

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

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

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

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


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

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());
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.