Android Zeichnungstrenner / Trennlinie im Layout?


684

Ich möchte eine Linie genau in der Mitte eines Layouts zeichnen und sie als Trennzeichen für andere Elemente wie TextView verwenden. Gibt es dafür ein gutes Widget? Ich möchte ein Bild nicht wirklich verwenden, da es schwierig wäre, die anderen Komponenten darauf abzustimmen. Und ich möchte, dass es auch relativ positioniert ist. Vielen Dank

Antworten:


1684

Normalerweise benutze ich diesen Code, um eine horizontale Linie hinzuzufügen:

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

Um ein vertikales Trennzeichen hinzuzufügen, wechseln Sie die Werte layout_widthundlayout_height


10
Funktioniert auch bei mir. Kann auch android hinzufügen: layout_marginTop = "2dp" (etc), um Leerzeichen oben und unten hinzuzufügen.
Prise

4
Dies ist ideal für eine einfache horizontale Linie. Wenn Sie jedoch möchten, dass die Farbe an den Enden verblasst, verwenden Sie hier eine der anderen Methoden.
Scott Biggs

91
Oder noch besser, verwenden Sielayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
Sie sollten px anstelle von dp für Teiler verwenden. Es sei denn, Sie möchten tatsächlich, dass die Teilergröße variiert und möglicherweise unter 1/2 Pixel fällt. :)
Austin Hanson

9
Die Materialdesignspezifikation empfiehlt die Verwendung von 1 dp dickem google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Verbesserung der Antworten von Alex Kucherenko und Dan Dar3

Ich habe dies zu meinen Stilen hinzugefügt:

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

Dann ist in meinen Layouts weniger Code und einfacher zu lesen.

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

40
Das ist großartig und meiner Meinung nach die beste Lösung! Auf diese Weise müssen Sie die Farbe nicht manuell einstellen, sodass die Konsistenz einfacher ist, wenn Sie mehr als ein Thema haben (ich verwende Theme.Sherlock und Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1 - Ein großartiger Ersatz für die 9-Zeilen-Lösung <Image>, die ich bisher verwendet habe. Sehr ... stilvoll
AVIDeveloper

3
Dies scheint die sauberste Lösung zu sein. Vielen Dank!
FrozenCow

2
Dies scheint zu funktionieren, aber in der Android Studio-Vorschau mit API 21 wird es nicht angezeigt ... Ich konnte nicht testen, ob dies nur ein Problem der Vorschau oder auch auf realen Geräten ist ...
DominicM

3
Ich dachte, es wird nicht auch in der Android Studio-Vorschau angezeigt, aber nachdem ich die Vorschau vergrößert habe, kann ich die schwache Linie erkennen, die angezeigt wird.
Nick Spacek

136

Fügen Sie dies in Ihr Layout ein, in dem Sie den Teiler haben möchten (ändern Sie die Attribute entsprechend Ihren Anforderungen):

<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
Danke, hat für mich gearbeitet. Sieht besonders gut aus in DrawerLayout
Martin Vysny

4
@Ahmed Sie können dies nicht verwenden, wenn Sie einen weißen Aktivitätshintergrund haben. In diesem Fall verwenden Sie stattdessen android: src = "@ android: drawable / divider_horizontal_bright".
Romanos

96

Sie können dies verwenden in LinearLayout:

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

Zum Beispiel:

<?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
Beachten Sie, dass dies nur von API Level 11
San

Leider hebt diese Methode die Teiler nicht mit kräftigen Farben hervor.
Das Original Android

weniger ist besser! Thanx
pablo.vix

60

Einfachster Weg:

Vertikaler Teiler:

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

Vertikale Teileransicht

Horizontaler Teiler:

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

Horizontale Teileransicht

Das ist alles ja!

Gib das einfach ein 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>

Dies überlappt das Ganze mit einer Ansicht.
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
Ich würde diese Methode mehr verteidigen als andere, weil sie einen bereits existierenden Stil verwendet, aber es könnte nicht jedem gefallen.
Magnet

3
Der Nachteil dieses Ansatzes ist jedoch, dass schlechtes Android NICHT den vorhandenen Stil garantiert.
Youngjae

46

Verwenden Sie diesen Code. Es wird helfen

<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

Schreiben Sie einfach Folgendes:

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

vollständiges Beispiel:

<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
Dies sollte als Antwort akzeptiert werden, da dies die korrekteste Methode ist, um einen Teiler zu einemLinearLayout
JaydeepW

Dies gilt für alle Elemente im Layout ,, corrent?
Rami Alloush

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

Zwischen zwei Layouts Geben Sie diesen Code ein, um Divider zu erhalten.


18

Wenn Sie actionBarSherlock verwenden, können Sie die Klasse com.actionbarsherlock.internal.widget.IcsLinearLayout verwenden, um Teiler zu unterstützen und sie zwischen den Ansichten anzuzeigen .

Anwendungsbeispiel:

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

Beachten Sie, dass in der Vorschau des Grafikdesigners aus irgendeinem Grund "android.graphics.bitmap_delegate.nativeRecycle (I) Z" steht. Ich bin mir nicht sicher, was es bedeutet, aber es kann ignoriert werden, da es sowohl auf neuen als auch auf alten Android-Versionen (getestet auf Android 4.2 und 2.3) einwandfrei funktioniert.

Anscheinend wird der Fehler nur angezeigt, wenn API17 für den Grafikdesigner verwendet wird.


12

Hinzufügen dieser Ansicht; das zieht ein Trennzeichen zwischen Ihremtextviews

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

12

Es ist sehr einfach. Erstellen Sie einfach eine Ansicht mit der schwarzen Hintergrundfarbe.

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

Dadurch wird eine horizontale Linie mit Hintergrundfarbe erstellt. Sie können wie in jeder anderen Ansicht auch andere Attribute wie Ränder, Auffüllungen usw. hinzufügen.


11

Hier ist Ihre Antwort ... dies ist ein Beispiel, um eine Grenze zwischen Steuerelementen zu ziehen ...

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

Dieser Code zieht eine Linie zwischen zwei Steuerelementen ...


10

Es fügt an einer beliebigen Stelle in Ihrem Layout einen horizontalen Teiler hinzu.

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

Die Zeile wird nur unter der Textansicht angezeigt.
Live-Liebe

10

Sie können dieses <View>Element direkt nach der ersten Textansicht verwenden.

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

8

Laufzeitversion:

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

Verwenden Sie diesen XML-Code, um eine vertikale Linie hinzuzufügen

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

Verwenden Sie diesen XML-Code, um eine horizontale Linie hinzuzufügen

<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

In Fällen, in denen beispielsweise android:layout_weightEigenschaften verwendet werden, um Layoutkomponenten verfügbaren Bildschirmbereich zuzuweisen

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

Um ein Trennzeichen zwischen den beiden vorhandenen Layouts hinzuzufügen, das bereits den gesamten Bildschirmbereich belegt hat, können wir nicht einfach ein weiteres LinearLayout hinzufügen, android:weight:"1"da dadurch drei Spalten gleicher Breite erstellt werden, die wir nicht möchten. Stattdessen werden wir den Platz verringern, den wir diesem neuen Layout geben werden. Der endgültige Code würde folgendermaßen aussehen:

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

Geben Sie hier die Bildbeschreibung ein


5

Wenn Sie es häufig verwenden, ist es am besten, es zu tun

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>

Fügen Sie es jetzt in Ihrem Layout wie folgt hinzu:

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

ohne android: src = "? android: attr / listDivider" .... füge einfach android: background = "# FFFFFF" hinzu
bebosh

4

Fügen Sie eine horizontale schwarze Linie hinzu, indem Sie Folgendes verwenden:

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

3

Um die Antwort von Camille Sévigny zu vervollständigen, können Sie zusätzlich Ihre eigene Linienform definieren, um beispielsweise die Linienfarbe anzupassen.

Definieren Sie eine XML-Form im Zeichenverzeichnis. 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>

Verwenden Sie diese Zeile in Ihrem Layout mit den gewünschten Attributen:

    <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

Normalerweise benutze ich diesen 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" />

Wenn Sie ein Objekt in Ihrem Layout haben und eine Zeile darunter festlegen möchten, verwenden Sie dieses Attribut in ImageView:

android:layout_below="@+id/textBox1"

3

Dies würde Ihnen helfen, dieses Problem zu lösen. Hier wird eine kleine Ansicht erstellt, um eine schwarze Linie als Trennzeichen zwischen zwei Ansichten zu erstellen.

 <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

Hier ist der Code "eine horizontale Trennlinie zwischen zwei Textansichten". Versuche dies

    <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

Teilen Sie den Raum in zwei gleiche Teile:

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

Beachten Sie, dass ein Teil am Ende einen Teiler enthält


1

Einfache Lösung

Fügen Sie einfach diesen Code in Ihr Layout ein und ersetzen Sie 'Id_of__view_present_above' durch die ID der Ansicht, unter der Sie den Teiler benötigen.

<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 Suchen Sie nach- >Brevity is acceptable, but fuller explanations are better.
Andy K

0

Wenn Sie beispielsweise recyclerView für Ihre Artikel verwendet haben:

in build.gradle schreibe:

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

Wenn Sie Farb-, Größen- und Randwerte festlegen möchten, können Sie Folgendes angeben:

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());
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.