Yerleşimde Android Çizim Ayırıcı / Bölücü Hattı?


684

Bir mizanpajın tam ortasında bir çizgi çizmek ve TextView gibi diğer öğelerin ayırıcısı olarak kullanmak istiyorum. Bunun için iyi bir widget var mı? Bir görüntüyü gerçekten kullanmak istemiyorum, çünkü diğer bileşenleri onunla eşleştirmek zor olurdu. Ben de göreceli olarak konumlandırılmasını istiyorum. Teşekkürler

Yanıtlar:


1687

Genellikle yatay çizgi eklemek için bu kodu kullanın:

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

Dikey ayırıcı eklemek için layout_widthve layout_heightdeğerlerini değiştirin


10
Benim için de çalışıyor. Ayrıca android ekleyebilir: layout_marginTop = "2dp" (vb.) Üstte ve altta boşluk eklemek için.
Çimdikle

4
Bu basit bir yatay çizgi için mükemmeldir. Ancak rengin uçlarda solmasını istiyorsanız, buradaki diğer yöntemlerden birini kullanın.
Scott Biggs

91
Ya da daha iyisi, kullanınlayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
Bölücüler için dp yerine px kullanmalısınız. Gerçekten bölücü boyutunun değişmesini ve potansiyel olarak 1/2 pikselin altına düşmesini istemiyorsanız. :)
Austin Hanson

9
Malzeme tasarım spesifikasyonu 1dp kalınlığında google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Alex Kucherenko ve Dan Dar3 tarafından verilen cevapları geliştirmek

Bunu stillerime ekledim:

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

Sonra benim düzenleri daha az kod ve okumak daha basit.

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

40
Bu harika ve IMHO en iyi çözüm! Bu şekilde rengi manuel olarak ayarlamak zorunda kalmazsınız, bu nedenle birden fazla temanız olduğunda tutarlılık daha kolaydır (Theme.Sherlock ve Theme.Sherlock.Light kullanıyorum).
Kopfgeldjaeger

2
+1 - Şimdiye kadar kullandığım 9 satırlık <Image> çözümü için harika bir yedek. Very ... stylish
AVIDeveloper

3
Bu en temiz çözüm gibi görünüyor. Teşekkürler!
FrozenCow

2
Bu işe yarıyor gibi görünüyor, ancak API 21 ile Android Studio önizlemesinde gösterilmiyor ... Bunun sadece önizlemenin bir sorunu mu yoksa gerçek cihazlarda mı olduğunu test
edemedim

3
Android Studio önizlemesinde de gösterilmediğini düşündüm, ancak önizlemeyi yakınlaştırdıktan sonra görüntülenen soluk çizgiyi çıkarabilirim.
Nick Spacek

136

Bunu düzeninize bölücünün istediğiniz yere ekleyin (özellikleri ihtiyaçlarınıza göre değiştirin):

<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
Teşekkürler, benim için çalıştı. DrawerLayout'ta özellikle güzel görünüyor
Martin Vysny

4
@Ahmed Beyaz etkinlik arka planınız varsa bunu kullanamazsınız, bu durumda android kullanın: src = "@ android: drawable / divider_horizontal_bright".
romanos

96

Bunu şu dillerde kullanabilirsiniz LinearLayout:

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

Örneğin:

<?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
Bunun yalnızca API düzey 11
San

Ne yazık ki bu yöntem, bölücüleri kalın renklerle vurgulamaz.
Orijinal Android

daha az daha iyidir! Thanx
pablo.vix

60

En kolay yol:

Dikey bölücü:

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

Dikey bölücü görünümü

Yatay bölücü:

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

Yatay bölücü görünümü

Hepsi bu!

Sadece içine koy 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>

bu, bir Görünüm ile her şeyin üzerine gelir.
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
Bu yöntemi, hesaptaki diğerlerinin zaten mevcut bir stili kullandığından daha fazla savunurum, ancak herkesi memnun etmeyebilir.
Solenoid

3
Ancak bu yaklaşımın dezavantajı, zayıf Android'in mevcut stili garanti ETMEMEKTEDİR.
Youngjae

46

bu kodu kullanın. Yardımcı olacaktır

<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

Sadece şunu yazın:

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

tam örnek:

<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
Bu, LinearLayout
a'ya

Bu düzendeki tüm elemanlar için olacak, corrent?
Rami Alloush

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

İki Düzen arasında Bölücü almak için bu kodu girin.


18

actionBarSherlock kullanıyorsanız, ayırıcıları desteklemek ve görünümler arasında göstermek için com.actionbarsherlock.internal.widget.IcsLinearLayout sınıfını kullanabilirsiniz .

kullanım örneği:

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

nedense, grafik tasarımcı önizleme "android.graphics.bitmap_delegate.nativeRecycle (I) Z" diyor. ne anlama geldiğinden emin değilim, ama hem android hem de eski olanların yeni sürümlerinde (android 4.2 ve 2.3'te test edildi) iyi çalıştığı için göz ardı edilebilir.

hata sadece grafik tasarımcı için API17 kullanıldığında gösterilir.


12

Bu görünümü ekleyerek; arasında bir ayırıcıtextviews

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

12

Çok basit. Sadece siyah arka plan rengiyle bir Görünüm oluşturun.

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

Bu, arka plan rengiyle yatay bir çizgi oluşturur. Diğer görünümlerde olduğu gibi kenar boşlukları, dolgular vb. Gibi başka özellikler de ekleyebilirsiniz.


11

İşte cevabınız .. Bu kontroller arasında çizgi çizmek için bir örnek ...

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

Bu kod iki kontrol arasında çizgi çizer ...


10

Düzeninizdeki herhangi bir yere yatay bir ayırıcı ekler.

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

Satır yalnızca Metin Görünümü'nün altına gider.
canlı aşk

10

Bu <View>öğeyi İlk TextView'den hemen sonra kullanabilirsiniz .

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

8

Çalışma zamanı sürümü:

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

dikey çizgi eklemek için bu xml kodunu kullanın

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

yatay çizgi eklemek için bu xml kodunu kullanın

<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

Birinin android:layout_weightmizanpaj bileşenlerine kullanılabilir ekran alanı atamak için özelliği kullandığı durumlarda , örneğin

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

Tüm ekran alanını zaten almış olan mevcut iki düzen arasına bir ayırıcı eklemek için, sadece başka bir LinearLayout ekleyemeyiz, android:weight:"1"çünkü bu istemediğimiz üç eşit genişlikli sütun oluşturacaktır. Bunun yerine, bu yeni düzene vereceğimiz alan miktarını azaltacağız. Nihai kod şöyle görünecektir:

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

resim açıklamasını buraya girin


5

Çok kullanacaksanız, yapılacak en iyi şey

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>

şimdi düzeninize ekleyin:

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

android kullanmadan: src = "? android: attr / listDivider" .... sadece android ekle: background = "# FFFFFF"
bebosh

4

Bunu kullanarak yatay bir siyah çizgi ekleyin:

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

3

Camille Sévigny yanıtını tamamlamak için, örneğin çizgi rengini özelleştirmek için kendi çizgi şeklinizi de tanımlayabilirsiniz.

Çekilebilir dizinde bir xml şekli tanımlayın. 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>

Düzeninizde bu satırı istediğiniz özelliklerle kullanın:

    <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

Genellikle bu kodu kullanıyorum:

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

mizanpajınızda bir nesne varsa ve ImageView'de bu özelliği kullanan aşağıdaki satırın ayarlanmasını istiyorsanız:

android:layout_below="@+id/textBox1"

3

Bu, bu sorunu çözmenize yardımcı olacaktır. Burada, iki görünüm arasında ayırıcı olarak siyah bir çizgi yapmak için küçük bir görünüm oluşturulur.

 <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

İşte kod "iki Metin Görünümü arasında yatay bir ayırıcı çizgi". Bunu dene

    <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

Boşluğu iki eşit parçaya bölün:

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

Bir bölümün sonunda bir bölücü içerdiğine dikkat edin


1

Basit çözüm

bu kodu mizanpajınıza ekleyin ve 'id_of__view_present_above' ifadesini, aşağıda bölücüye ihtiyacınız olan görünümün kimliğine değiştirin.

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

0

Örneğin, öğeleriniz için recyclerView kullandıysanız:

build.gradle yaz:

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

Renk, boyut ve kenar boşluğu değerlerini ayarlamak istiyorsanız, aşağıdakileri belirtebilirsiniz:

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());
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.