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

Androider
źródło

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

Alex Kucherenko
źródło
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"/>
toddles_fp
źródło
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" />
Camille Sévigny
źródło
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>
użytkownik2240225
źródło
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>
Khemraj
źródło
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" />
pprados
źródło
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" >
Deepak Goel
źródło
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>
Farid Ahmed
źródło
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.

SHASHWAT DOSHI
źródło
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.

programista Androida
źródło
12

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

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />
elfekz
źródło
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.

Wijay Sharma
źródło
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 ...

Archan Desai
źródło
10

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

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>
Kamel
źródło
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"/>
Yogesh Sarvaiya
źródło
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);
alcsan
źródło
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" />
Maksudul Hasan Raju
źródło
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
programista marzeń
źródło
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

Cyclotron3x3
źródło
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" />
Irshu
źródło
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" />
kod 511788465541441
źródło
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"/>
Jyoti Sharma
źródło
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" />
LG
źródło
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"
Hossein
źródło
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"
         />
Mayank Garg
źródło
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>

FAHAD HAMMAD ALOTAIBI
źródło
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" />/>
Sunil
źródło
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

Dan Alboteanu
źródło
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"
/>
shreedhar bhat
źródło
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());
Morozow
źródło