Comment ajouter un diviseur (vertical) à un LinearLayout horizontal?

92

J'essaye d'ajouter un diviseur à une disposition linéaire horizontale mais je ne vais nulle part. Le séparateur ne s'affiche tout simplement pas. Je suis un débutant total avec Android.

Voici mon XML de mise en page:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/llTopBar"
        android:orientation="horizontal"
        android:divider="#00ff00"
        android:dividerPadding="22dip"
        android:showDividers="middle"
       >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="asdf" />
            <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="asdf"
             />

    </LinearLayout>

</RelativeLayout>
Ahmed-Anas
la source
Sur quelle version d'Android utilisez-vous cela? setDividerDrawable n'existe que depuis l'API 11
alex
jelly bean 4.2 api 17
Ahmed-Anas
Si vous avez tout essayé, assurez-vous que LinearLayout a la bonne orientation. Définir une hauteur pour un diviseur avec une orientation horizontale sera très déroutant.
Nino van Hooff le
1
N'oubliez pas l' article exaspérant SHOWDIVIDERS !!!!!!
Fattie

Réponses:

217

utilisez ceci pour le diviseur horizontal

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

et ceci pour diviseur vertical

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

OU si vous pouvez utiliser le diviseur LinearLayout, pour le diviseur horizontal

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:height="1dp"/>
    <solid android:color="#f6f6f6"/>
</shape>

et dans LinearLayout

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

Si vous souhaitez utiliser un diviseur vertical android:height="1dp", utilisez plutôt une formeandroid:width="1dp"

Astuce: n'oubliez pas l' android:showDividersarticle.

Cuves Kapil
la source
3
Merci. mais comment puis-je ajouter ceci à l'attribut "android: divider"? fondamentalement, ce que je veux dire, c'est une sorte de moyen automatique d'ajouter le diviseur entre chaque élément? Je veux dire, n'est-ce pas pourquoi l'attribut android: divider est-il là?
Ahmed-Anas
@ death_relic0 android: le diviseur est disponible pour ListView, Expandable Listview et TabWidget
Padma Kumar
9
merci, mais pourquoi est-il ici alors: s developer.android.com/reference/android/widget/…
Ahmed-Anas
Il semble que vous devriez utiliser n'importe quel dessinable, pas de couleur
demaksee
7
Il semble que vous avez mélangé vos valeurs layout_widthet layout_height: car horizontal layout_widthdevrait "fill_parent"et layout_heightdevrait être "1dp". Doit être échangé de la même manière pour le diviseur vertical.
Jay Sidri
69

Essayez ceci, créez un diviseur dans le res/drawabledossier:

vertical_divider_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <size android:width="1dip" />
    <solid android:color="#666666" />    
</shape> 

Et utilisez l' dividerattribut dans LinearLayout comme ceci:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:divider="@drawable/vertical_divider_1"
    android:dividerPadding="12dip"
    android:showDividers="middle"
    android:background="#ffffff" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

Remarque: android:divider est uniquement disponible dans Android 3.0 (niveau d'API 11) ou supérieur.

ShreeshaDas
la source
mais cela ne fera qu'ajouter un diviseur .. supposons que j'ai 10 éléments, ajouter du code supplémentaire pour un diviseur entre chaque élément semble être un gaspillage
Ahmed-Anas
@ death_relic0 Pourquoi ne pas créer une mise en page distincte pour le séparateur, puis utiliser la balise include pour l'ajouter n'importe où et autant de fois que vous le souhaitez. Je pense que cela me ferait mieux et pas de gaspillage.
GrIsHu
39

Il est facile d'ajouter un séparateur à la mise en page, nous n'avons pas besoin d'une vue séparée.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:divider="?android:listDivider"
    android:dividerPadding="2.5dp"
    android:orientation="horizontal"
    android:showDividers="middle"
    android:weightSum="2" ></LinearLayout>

Au-dessus du code, créez un diviseur vertical pour LinearLayout

Khaintt
la source
J'oublie toujours l'attribut showDividers. Je vous remercie!
Unknownweirdo
1
Merci pour la pointe à utiliser? Android: listDivider. Je viens de remarquer que cela est invisible dans l'API 21 ou supérieur. Dans les versions inférieures de l'API, une petite ligne grise est affichée
user114676
@KetanMehta nous le définirons avec l'attribut 'android: divider', c'est dessinable ou couleur.
khaintt
Android: Divider prend-il en charge l'API 15 +?
RoCk RoCk
17

Mise à jour: pré-Honeycomb utilisant AppCompat

Si vous utilisez la bibliothèque AppCompat v7, vous souhaiterez peut-être utiliser la LinearLayoutCompatvue. En utilisant cette approche, vous pouvez utiliser des séparateurs dessinables sur Android 2.1, 2.2 et 2.3.

Exemple de code:

<android.support.v7.widget.LinearLayoutCompat
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:showDividers="middle"
        app:divider="@drawable/divider">

drawable / divider.xml: (diviseur avec un peu de remplissage en haut et en bas)

<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:insetBottom="2dp"
        android:insetTop="2dp">
    <shape>
        <size android:width="1dp" />
        <solid android:color="#FFCCCCCC" />
    </shape>
</inset>

Remarque très importante: la LinearLayoutCompatvue ne s'étend pas LinearLayoutet vous ne devez donc pas utiliser les propriétés android:showDividersou android:dividermais les propriétés personnalisées: app:showDividerset app:divider. Dans le code, vous devez également utiliser le LinearLayoutCompat.LayoutParamspas le LinearLayout.LayoutParams!

Rolf ツ
la source
Est-ce la seule façon d'ajouter un remplissage vertical à un séparateur?
SARose
1
@SARose non, vous pouvez toujours créer une vue personnalisée ou pirater des composants de vue existants. C'est cependant la méthode par défaut et préférée pour le faire.
Rolf ツ
8

Je viens de rencontrer le même problème aujourd'hui. Comme l'indiquent les réponses précédentes, le problème provient de l'utilisation d'une couleur dans la balise de séparation, plutôt que d'un dessin. Cependant, au lieu d'écrire mon propre xml dessinable, je préfère utiliser autant que possible les attributs thématiques. Vous pouvez utiliser android: attr / dividerHorizontal et android: attr / dividerVertical pour obtenir un dessin prédéfini à la place:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:showDividers="middle"
    android:divider="?android:attr/dividerVertical"
    android:orientation="horizontal">
    <!-- other views -->
</LinearLayout>

Les attributs sont disponibles dans l'API 11 et au-dessus.

De plus, comme mentionné par bocekm dans sa réponse, la propriété dividerPadding n'ajoute PAS de remplissage supplémentaire de chaque côté d'un diviseur vertical, comme on pourrait le supposer. Au lieu de cela, il définit le remplissage supérieur et inférieur et peut donc tronquer le diviseur s'il est trop grand.

Nicolai Buch-Andersen
la source
6

Vous pouvez utiliser le séparateur intégré, cela fonctionnera pour les deux orientations.

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:divider="?android:attr/listDivider"
  android:orientation="horizontal"
  android:showDividers="middle">
Amilcar Andrade
la source
3

Frustrant, vous devez activer l'affichage des diviseurs de code dans votre activité. Par exemple:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Set the view to your layout
    setContentView(R.layout.yourlayout);

    // Find the LinearLayout within and enable the divider
    ((LinearLayout)v.findViewById(R.id.llTopBar)).
        setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);

}
dougc
la source
Bien que ce soit une autre façon de le faire, ce n'est pas nécessaire.
Ricardo A.
2

Votre diviseur peut ne pas s'afficher en raison d'un dividerPadding trop grand. Vous définissez 22dip, cela signifie que le diviseur est tronqué de 22dip à partir du haut et de 22dip à partir du bas. Si la hauteur de votre mise en page est inférieure ou égale à 44dip, aucun séparateur n'est visible.

bocekm
la source
1

Si la réponse de Kapil Vats ne fonctionne pas, essayez quelque chose comme ceci:

drawable / divider_horizontal_green_22.xml

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

    <size android:width="22dip"/>
    <solid android:color="#00ff00"/>

</shape>

layout / your_layout.xml

LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/llTopBar"
            android:orientation="horizontal"
            android:divider="@drawable/divider_horizontal_green_22"
            android:showDividers="middle"
           >

J'ai rencontré un problème où l'attribut padding ne fonctionnait pas, j'ai donc dû définir la hauteur du diviseur directement dans le diviseur.

Remarque:

Si vous voulez l'utiliser dans un LinearLayout vertical, créez-en un nouveau, comme ceci: drawable / divider_vertical_green_22.xml

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

    <size android:height="22dip"/>
    <solid android:color="#00ff00"/>

</shape>
Ionut Negru
la source
0

Pour être dessiné, le diviseur de LinearLayoutdoit avoir une certaine hauteur tandis que ColorDrawable(ce qui est essentiellement #00ff00aussi bien que toute autre couleur codée en dur) n'a pas. Un moyen simple (et correct) de résoudre ce problème consiste à envelopper votre couleur dans certaines Drawableavec une hauteur prédéfinie, telle que shapedessinable

Dmitry Zaytsev
la source
-1

Vous devez créer la vue any pour séparateur comme textview ou imageview, puis définir l'arrière-plan pour cela si vous avez une image, sinon utilisez la couleur comme arrière-plan.

J'espère que cela vous aide.

itsrajesh4uguys
la source