Separatore di disegni Android / Linea di divisione nel layout?


684

Vorrei tracciare una linea proprio nel mezzo di un layout e usarlo come separatore di altri elementi come TextView. C'è un buon widget per questo. Non voglio davvero usare un'immagine in quanto sarebbe difficile far corrispondere gli altri componenti ad essa. E voglio che sia anche relativamente posizionato. Grazie

Risposte:


1687

Di solito uso questo codice per aggiungere una linea orizzontale:

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

Per aggiungere un separatore verticale, cambiare i valori layout_widthelayout_height


10
Funziona anche per me. Puoi anche aggiungere android: layout_marginTop = "2dp" (etc) per aggiungere spazi in alto e in basso.
Pizzica

4
Questo è ottimo per una semplice linea orizzontale. Ma se vuoi che il colore sbiadisca alle estremità, usa uno degli altri metodi qui.
Scott Biggs,

91
O ancora meglio, usalayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3 il

17
Dovresti usare px invece di dp per i divisori. A meno che tu non voglia effettivamente variare le dimensioni del divisore e, potenzialmente, scendere al di sotto di 1/2 pixel. :)
Austin Hanson,

9
Le specifiche di progettazione del materiale consigliano di utilizzare 1dp di spessore google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Migliorare le risposte fornite da Alex Kucherenko e Dan Dar3

Ho aggiunto questo ai miei stili:

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

Quindi nei miei layout è meno codice e più semplice da leggere.

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

40
Questo è fantastico e IMHO la soluzione migliore! In questo modo non devi impostare manualmente il colore, quindi la coerenza è più facile quando hai più di un tema (io uso Theme.Sherlock e Theme.Sherlock.Light).
Kopfgeldjaeger,

2
+1 - Un ottimo sostituto della soluzione <Image> a 9 righe che ho usato finora. Molto ... elegante
AVIDeveloper

3
Questa sembra la soluzione più pulita. Grazie!
FrozenCow

2
Questo sembra funzionare ma nell'anteprima di Android Studio con API 21 non viene mostrato ... Non ho potuto verificare se questo è solo un problema dell'anteprima o anche su dispositivi reali ...
DominicM

3
Pensavo che non fosse mostrato anche nell'anteprima di Android Studio, ma dopo aver ingrandito l'anteprima riesco a distinguere la linea debole che viene visualizzata.
Nick Spacek,

136

Aggiungi questo nel tuo layout dove desideri il divisore (modifica gli attributi in base alle tue esigenze):

<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
Grazie, ha lavorato per me. Sembra particolarmente bello in DrawerLayout
Martin Vysny il

4
@Ahmed Non puoi usarlo quando hai uno sfondo bianco di attività, suppongo, in quel caso usa android: src = "@ android: drawable / divider_horizontal_bright".
romanos,

96

Puoi usarlo in LinearLayout:

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

Per esempio:

<?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
Nota che questo è disponibile solo dal livello API 11
San

Purtroppo questo metodo non evidenzia i divisori con colori vivaci.
L'originale Android del

meno è meglio! Grazie
pablo.vix,

60

Il modo più semplice:

Divisore verticale:

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

Vista divisoria verticale

Divisore orizzontale:

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

Vista divisoria orizzontale

Questo è tutto sì!

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

questo si sovrappone a tutto con una vista.
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
Difenderei questo metodo più degli altri sull'account che utilizza uno stile già esistente, ma potrebbe non piacere a tutti.
Solenoide

3
Lo svantaggio di questo approccio è, tuttavia, Android scarso NON garantisce lo stile esistente.
Youngjae,

46

usa questo codice. Aiuterà

<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

Scrivi questo:

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

esempio completo:

<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
Questa dovrebbe essere una risposta accettata in quanto è il modo più corretto di aggiungere un divisore a unLinearLayout
JaydeepW

Questo sarà per tutti gli elementi nel layout, giusto?
Rami Alloush,

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

Tra due layout Inserire questo codice per ottenere il divisore.


18

se usi actionBarSherlock, puoi usare la classe com.actionbarsherlock.internal.widget.IcsLinearLayout per supportare i divisori e mostrarli tra le viste.

esempio di utilizzo:

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

si noti che per qualche motivo, l'anteprima nel designer grafico dice "android.graphics.bitmap_delegate.nativeRecycle (I) Z". non sono sicuro di cosa significhi, ma può essere ignorato in quanto funziona bene su entrambe le nuove versioni di Android e quelle precedenti (testato su Android 4.2 e 2.3).

sembra che l'errore venga visualizzato solo quando si utilizza API17 per il progettista grafico.


12

Aggiunta di questa vista; che disegna un separatore tra i tuoitextviews

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

12

È molto semplice. Basta creare una vista con il colore di sfondo nero.

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

Questo creerà una linea orizzontale con il colore di sfondo. Puoi anche aggiungere altri attributi come margini, risvolti, ecc. Proprio come qualsiasi altra vista.


11

Ecco la tua risposta ... questo è un esempio per tracciare una linea tra i controlli ...

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

Questo codice traccia la linea tra due controlli ...


10

Aggiunge un divisore orizzontale ovunque nel layout.

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

La linea va solo sotto la visualizzazione di testo.
live-love

10

È possibile utilizzare questo <View>elemento subito dopo 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

Versione 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

usa questo codice xml per aggiungere una linea verticale

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

usa questo codice xml per aggiungere una linea orizzontale

<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

Ad esempio, nei casi in cui si utilizza la android:layout_weightproprietà per assegnare lo spazio dello schermo disponibile ai componenti del layout

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

Per aggiungere un separatore tra i due layout esistenti che ha già occupato l'intero spazio dello schermo, non possiamo semplicemente aggiungere un altro LinearLayout android:weight:"1"perché ciò creerà tre colonne di uguale larghezza che non vogliamo. Invece, diminuiremo la quantità di spazio che daremo a questo nuovo layout. Il codice finale sarebbe simile al seguente:

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

inserisci qui la descrizione dell'immagine


5

Se la userai molto, la cosa migliore da fare è

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>

ora nel tuo layout, basta aggiungerlo come:

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

senza usare android: src = "? android: attr / listDivider" .... basta aggiungere android: background = "# FFFFFF"
bebosh

4

Aggiungi una linea nera orizzontale usando questo:

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

3

Per completare la risposta di Camille Sévigny puoi anche definire la tua forma di linea, ad esempio per personalizzare il colore della linea.

Definire una forma xml nella directory di disegno. 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>

Usa questa linea nel tuo layout con gli attributi desiderati:

    <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

Di solito uso questo codice:

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

se hai un oggetto nel tuo layout e vuoi impostare una riga sotto che usi questo attributo in ImageView:

android:layout_below="@+id/textBox1"

3

Questo ti aiuterebbe a risolvere questo problema. Qui viene creata una piccola vista per creare una linea nera come separatore tra due viste.

 <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

Ecco il codice "una linea di divisione orizzontale tra due viste di testo". Prova questo

    <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

Dividi lo spazio in due parti uguali:

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

Si noti che una parte contiene un divisore alla fine


1

Soluzione semplice

aggiungi questo codice nel tuo layout e sostituisci "Id_of__view_present_above" con l'id della vista, al di sotto del quale hai bisogno del divisore.

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

0

Ad esempio se hai usato recyclerView per i tuoi articoli:

in build.gradle scrivi:

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

Se si desidera impostare i valori di colore, dimensione e margine, è possibile specificare come segue:

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());
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.