Android Separator / linia podziału rysunku w układzie?


684

Chciałbym narysować linię pośrodku układu i użyć jej jako separatora innych elementów, takich jak TextView. Czy jest na to dobry widget. Naprawdę nie chcę używać obrazu, ponieważ trudno byłoby dopasować do niego inne komponenty. Chcę też, aby była relatywnie ustawiona. Dzięki

Odpowiedzi:


1686

Zwykle używam tego kodu, aby dodać poziomą linię:

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

Aby dodać separator pionowy, przełącz wartości layout_widthilayout_height


10
Dla mnie też działa. Można także dodać Androida: layout_marginTop = "2dp" (itp.), Aby dodać spacje na górze i na dole.
Szczypta

4
Jest to idealne rozwiązanie dla prostej linii poziomej. Ale jeśli chcesz, aby kolory blakły na końcach, użyj jednej z innych metod tutaj.
Scott Biggs,

91
Lub jeszcze lepiej, użyjlayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
W przypadku dzielników należy używać px zamiast dp. Chyba że faktycznie chcesz, aby rozmiar dzielnika się zmieniał i potencjalnie spadał poniżej 1/2 pikseli. :)
Austin Hanson,

9
Specyfikacja projektu materiału zaleca stosowanie grubości 1dp google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Aby poprawić odpowiedzi udzielone przez Alexa Kucherenko i Dana Dar3

Dodałem to do moich stylów:

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

W moich układach jest mniej kodu i łatwiej jest je czytać.

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

40
To jest świetne i IMHO najlepsze rozwiązanie! W ten sposób nie musisz ręcznie ustawiać koloru, więc spójność jest łatwiejsza, gdy masz więcej niż jeden motyw (używam Theme.Sherlock i Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1 - Świetny zamiennik 9-liniowego rozwiązania <Image>, z którego dotychczas korzystałem. Bardzo ... stylowy
AVIDeveloper

3
To wydaje się najczystszym rozwiązaniem. Dzięki!
FrozenCow

2
To wydaje się działać, ale w wersji zapoznawczej Android Studio z API 21 nie jest pokazane ... Nie mogłem przetestować, czy to tylko problem z podglądem, czy też na prawdziwych urządzeniach ...
DominicM

3
Myślałem, że nie wyświetla się to również w podglądzie Android Studio, ale po powiększeniu podglądu widzę słabą linię, która jest wyświetlana.
Nick Spacek

136

Dodaj to do swojego układu w miejscu, w którym chcesz podzielić (zmodyfikuj atrybuty, aby dopasować do swoich potrzeb):

<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
Dzięki, pracowałeś dla mnie. Szczególnie ładnie wygląda w DrawerLayout
Martin Vysny

4
@Ahmed Nie możesz tego użyć, gdy masz białe tło aktywności. W takim przypadku użyj androida: src = "@ android: drawable / divider_horizontal_bright".
romanos

96

Możesz użyć tego w LinearLayout:

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

Na przykład:

<?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
Zauważ, że jest dostępny tylko z poziomu API 11
San

Niestety ta metoda nie wyróżnia dzielników odważnymi kolorami.
Oryginalny Android

mniej znaczy lepiej! Dzięki
pablo.vix

60

Najprostszy sposób:

Rozdzielacz pionowy:

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

Widok pionowy dzielnika

Rozdzielacz poziomy:

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

Poziomy widok dzielnika

To wszystko tak!

Po prostu włóż to 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>

to nakłada się na całość z widokiem.
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
Broniłbym tej metody bardziej niż inni na koncie, że używa ona już istniejącego stylu, ale może nie zadowolić wszystkich.
Solenoid

3
Wadą tego podejścia jest jednak zły system Android NIE gwarantuje istniejącego stylu.
Youngjae

46

użyj tego kodu. To pomoże

<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

Po prostu napisz to:

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

pełny przykład:

<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
Należy zaakceptować odpowiedź, ponieważ jest to najbardziej poprawny sposób dodania dzielnika doLinearLayout
JaydeepW

Będzie to dotyczyło wszystkich elementów układu ,, corrent?
Rami Alloush,

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

Pomiędzy dwoma układami Umieść ten kod, aby uzyskać Divider.


18

jeśli używasz actionBarSherlock, możesz użyć klasy com.actionbarsherlock.internal.widget.IcsLinearLayout w celu obsługi dzielników i pokazania ich między widokami.

przykład użycia:

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

zwróć uwagę, że z jakiegoś powodu podgląd w projektancie graficznym mówi „android.graphics.bitmap_delegate.nativeRecycle (I) Z”. nie jestem pewien, co to znaczy, ale można go zignorować, ponieważ działa dobrze zarówno na nowych wersjach Androida, jak i na starszych (testowane na Androidzie 4.2 i 2.3).

wygląda na to, że błąd jest wyświetlany tylko podczas używania API17 dla projektanta graficznego.


12

Dodanie tego widoku; który rysuje separator między twoimtextviews

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

12

To jest bardzo proste. Po prostu utwórz widok z czarnym kolorem tła.

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

Spowoduje to utworzenie poziomej linii z kolorem tła. Możesz także dodać inne atrybuty, takie jak marginesy, wypełnienia itp., Tak jak każdy inny widok.


11

Oto twoja odpowiedź ... to jest przykład, aby narysować linię między kontrolkami ...

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

Ten kod rysuje linię między dwoma kontrolkami ...


10

Dodaje poziomy podział do dowolnego miejsca w układzie.

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

Linia przechodzi tylko pod widok tekstu.
live-love

10

Możesz użyć tego <View>elementu tuż po pierwszym TextView.

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

8

Wersja środowiska wykonawczego:

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

użyj tego kodu xml, aby dodać pionową linię

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

użyj tego kodu xml, aby dodać poziomą linię

<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

Na przykład w przypadkach, gdy używa się android:layout_weightwłaściwości do przypisania dostępnego miejsca na ekranie komponentom układu

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

Aby dodać separator między istniejącymi dwoma układami, który zajął już całą przestrzeń ekranu, nie możemy po prostu dodać kolejnego LinearLayout, android:weight:"1"ponieważ utworzą to trzy kolumny o równej szerokości, których nie chcemy. Zamiast tego zmniejszymy ilość miejsca, które będziemy poświęcać temu nowemu układowi. Ostateczny kod wyglądałby tak:

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

wprowadź opis zdjęcia tutaj


5

Jeśli zamierzasz często z niego korzystać, najlepiej jest to zrobić

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>

teraz w swoim układzie, po prostu dodaj go w następujący sposób:

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

bez użycia Androida: src = "? android: attr / listDivider" .... po prostu dodaj android: background = "# FFFFFF"
bebosh

4

Dodaj poziomą czarną linię, używając tego:

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

3

Aby uzupełnić odpowiedź Camille Sévigny, możesz dodatkowo zdefiniować własny kształt linii, na przykład aby dostosować kolor linii.

Zdefiniuj kształt xml w katalogu do rysowania. 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>

Użyj tego wiersza w swoim układzie z pożądanymi atrybutami:

    <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

Zwykle używam tego kodu:

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

jeśli masz obiekt w układzie i chcesz ustawić poniżej linię, która używa tego atrybutu w ImageView:

android:layout_below="@+id/textBox1"

3

Pomoże to rozwiązać ten problem. Tutaj tworzony jest mały widok, aby utworzyć czarną linię jako separator między dwoma widokami.

 <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

Oto kod „pozioma linia podziału między dwoma widokami tekstu”. Spróbuj tego

    <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

Podziel przestrzeń na dwie równe części:

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

Zauważ, że jedna część zawiera dzielnik na końcu


1

Proste rozwiązanie

po prostu dodaj ten kod do swojego układu i zastąp „Id_of__view_present_above” do identyfikatora widoku, poniżej którego potrzebujesz dzielnika.

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

0

Na przykład, jeśli użyłeś recyclinglerView do swoich produktów:

w build.gradle napisz:

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

Jeśli chcesz ustawić wartości koloru, rozmiaru i marginesów, możesz określić jako następujące:

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());
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.