Разделитель рисования Android / разделительная линия в макете?


684

Я хотел бы нарисовать линию прямо в середине макета и использовать его в качестве разделителя других элементов, таких как TextView. Есть хороший виджет для этого. Я действительно не хочу использовать изображение, так как было бы трудно сопоставить другие компоненты с ним. И я хочу, чтобы это тоже было относительно позиционировано. Спасибо

Ответы:


1687

Я обычно использую этот код для добавления горизонтальной линии:

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

Чтобы добавить вертикальный разделитель, переключение layout_widthи layout_heightзначения


10
У меня тоже работает. Также можно добавить android: layout_marginTop = "2dp" (и т. Д.), Чтобы добавить пробелы сверху и снизу.
Ущипните

4
Это отлично подходит для простой горизонтальной линии. Но если вы хотите, чтобы цвета на концах исчезали, используйте один из других методов здесь.
Скотт Биггс

91
Или, что еще лучше, используйтеlayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
Вы должны использовать px вместо dp для разделителей. Если вы на самом деле не хотите, чтобы размер разделителя изменялся и, возможно, упал ниже 1/2 пикселя. :)
Остин Хэнсон

9
Спецификация дизайна материала рекомендует использовать 1dp толщиной google.com/design/spec/components/dividers.html#dividers-specs
Алексей Кучеренко,

620

Улучшить ответы, предоставленные Алексеем Кучеренко и Даном Дар3

Я добавил это в мои стили:

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

Тогда в моих макетах меньше кода и проще для чтения.

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

40
Это здорово и ИМХО лучшее решение! Таким образом, вам не нужно вручную устанавливать цвет, поэтому согласованность становится проще, когда у вас более одной темы (я использую Theme.Sherlock и Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1 - отличная замена для 9-строчного решения <Image>, которое я использовал до сих пор. Очень ... стильно
AVIDeveloper

3
Это кажется самым чистым решением. Спасибо!
FrozenCow

2
Кажется, это работает, но в предварительном просмотре Android Studio с API 21 оно не отображается ... Я не мог проверить, является ли это проблемой предварительного просмотра или также на реальных устройствах ...
DominicM

3
Я думал, что это не было показано в предварительном просмотре Android Studio, но после увеличения предварительного просмотра я могу различить тусклую линию, которая отображается.
Ник Спейсек

136

Добавьте это в свой макет, где вы хотите разделитель (измените атрибуты, чтобы соответствовать вашим потребностям):

<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
Спасибо, сработало для меня. Особенно хорошо смотрится в DrawerLayout
Martin Vysny

4
@Ahmed Вы не можете использовать это, когда у вас есть белый фон активности, я полагаю, в этом случае используйте вместо этого android: src = "@ android: drawable / divider_horizont_bright".
Romanos

96

Вы можете использовать это в LinearLayout:

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

Например:

<?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
Обратите внимание , что эта функция доступна только от уровня API 11
Сан -

К сожалению, этот метод не выделяет разделители жирным цветом.
Оригинальный Android

чем меньше тем лучше! Спасибо
pablo.vix

60

Самый простой способ:

Вертикальный разделитель:

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

Вертикальный разделитель

Горизонтальный разделитель:

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

Горизонтальный разделитель

Это все да!

Просто вставьте это в 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>

это перекрывает все это с видом.
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
Я бы защищал этот метод больше, чем другие за счет того, что он использует уже существующий стиль, но он может не понравиться всем.
Соленоид

3
Недостаток этого подхода, однако, плохой Android не гарантирует существующий стиль.
Youngjae

46

используйте этот код. Это поможет

<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

Просто напишите это:

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

полный пример:

<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
Это должен быть принятый ответ, так как это самый правильный способ добавления делителя кLinearLayout
JaydeepW

Это будет для всех элементов в макете, Corrent?
Рами Аллоуш

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

Между двумя макетами Поместите этот код, чтобы получить разделитель.


18

если вы используете actionBarSherlock, вы можете использовать класс com.actionbarsherlock.internal.widget.IcsLinearLayout для поддержки разделителей и отображения их между представлениями.

пример использования:

<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 /divr.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>

обратите внимание, что по какой-то причине в графическом конструкторе отображается сообщение «android.graphics.bitmap_delegate.nativeRecycle (I) Z». не уверен, что это значит, но его можно игнорировать, так как он отлично работает как на новых версиях Android, так и на старых (протестировано на Android 4.2 и 2.3).

Кажется, ошибка отображается только при использовании API17 для графического дизайнера.


12

Добавление этого вида; который рисует разделитель между вашимtextviews

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

12

Это очень просто. Просто создайте вид с черным цветом фона.

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

Это создаст горизонтальную линию с цветом фона. Вы также можете добавить другие атрибуты, такие как поля, отступы и т. Д., Как и любой другой вид.


11

Вот ваш ответ .. это пример, чтобы нарисовать линию между элементами управления ...

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

Этот код рисует линию между двумя элементами управления ...


10

Он добавляет горизонтальный разделитель в любом месте вашего макета.

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

Строка идет только под Textview.
живи-люби

10

Вы можете использовать этот <View>элемент сразу после первого TextView.

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

8

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

используйте этот код XML для добавления вертикальной линии

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

используйте этот код XML, чтобы добавить горизонтальную линию

<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

android:layout_weightНапример, в случае использования свойства для назначения доступного пространства экрана компонентам макета.

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

Чтобы добавить разделитель между существующими двумя макетами, который уже занял все пространство экрана, мы не можем просто добавить еще один LinearLayout, android:weight:"1"потому что это создаст три столбца равной ширины, которые нам не нужны. Вместо этого мы уменьшим количество места, которое будем отдавать этому новому макету. Конечный код будет выглядеть так:

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

введите описание изображения здесь


5

Если вы собираетесь его часто использовать, лучше всего

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>

Теперь в вашем макете, просто добавьте его так:

<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: src = "? android: attr / listDivider" .... просто добавьте android: background = "# FFFFFF"
bebosh

4

Добавьте горизонтальную черную линию, используя это:

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

3

Чтобы завершить ответ Камиля Севиньи, вы можете дополнительно определить свою собственную форму линии, например, чтобы настроить цвет линии.

Определите форму XML в каталоге для рисования. 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>

Используйте эту строку в вашем макете с желаемыми атрибутами:

    <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

Я обычно использую этот код:

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

если у вас есть объект в макете, и вы хотите установить строку ниже, используйте этот атрибут в ImageView:

android:layout_below="@+id/textBox1"

3

Это поможет вам решить эту проблему. Здесь создается небольшой вид, чтобы сделать черную линию в качестве разделителя между двумя видами.

 <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

Вот код "горизонтальная разделительная линия между двумя текстовыми представлениями". Попробуй это

    <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

Разделите пространство на две равные части:

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

Обратите внимание, что одна часть содержит разделитель в конце


1

Простое решение

просто добавьте этот код в свой макет и замените «Id_of__view_present_above» на идентификатор представления, ниже которого вам нужен разделитель.

<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 Поищите->Brevity is acceptable, but fuller explanations are better.
Энди К

0

Например, если вы использовали recyclerView для своих товаров:

в build.gradle напишите:

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

Если вы хотите установить цвет, размер и значения полей, вы можете указать следующее:

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());
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.