Android绘图分隔线/分隔线在布局中？

684

我想在布局的中间画一条线，并将其用作其他项（如TextView）的分隔符。为此有一个好的小部件。我真的不想使用图像，因为很难将其他组件与之匹配。我希望它也能相对定位。谢谢

android  layout  draw 
— 安卓人
source

Answers:

1684

我通常使用以下代码添加水平线：

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

要添加垂直分隔符，请切换layout_width和layout_height值

— 亚历克斯·库切连科（Alex Kucherenko）
source
10
也为我工作。也可以添加android：layout_marginTop =“ 2dp”（等）在顶部和底部添加空格。
— 捏
4
这对于简单的水平线非常有用。但是，如果您希望在末端出现褪色，请在此处使用其他方法之一。
— Scott Biggs，2012年
91
甚至更好，请使用layout_height="2dp" and android:background="?android:attr/listDivider"
— Dan Dar3 2012年
17
您应该使用px而不是dp作为分隔符。除非您实际上希望分隔器的大小有所变化，并且有可能降至1/2像素以下。:)
— 奥斯汀·汉森
9
— Alex Kucherenko
620

改善Alex Kucherenko和Dan Dar3提供的答案

我将此添加到我的样式中：

<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"/>
— toddles_fp
source
40
这很棒，恕我直言是最好的解决方案！这样，您不必手动设置颜色，因此当您拥有多个主题时（我使用Theme.Sherlock和Theme.Sherlock.Light），一致性会更容易。
— Kopfgeldjaeger 2013年
2
+1-替代了我到目前为止使用的9行<Image>解决方案。非常...时尚
— AVIDeveloper 2013年
3
这似乎是最干净的解决方案。谢谢！
— FrozenCow 2014年
2
这似乎可行，但是在使用API​​ 21的Android Studio预览中却没有显示出来……我无法测试这是否只是预览问题还是在真实设备上……
— DominicM
3
我以为它没有在Android Studio预览中也没有显示，但是在放大预览后，我可以辨别出显示的模糊线。
— Nick Spacek
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" />
— 卡米尔·塞维尼（CamilleSévigny）
source
1
谢谢，为我工作。在DrawerLayout中看起来特别好看
— Martin Vysny 2013年
4
@Ahmed我想如果您有白色活动背景，则不能使用此功能，在这种情况下，请使用android：src =“ @ android：drawable / divider_horizo​​ntal_bright”代替。
— romanos 2014年
95

您可以在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>
— 用户名
source
4
请注意，这只是从API级别11
— 圣
不幸的是，该方法没有用粗体突出显示分隔线。
— 原始Android
越少越好！Thanx
— 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>
— Khemraj
source
这与视图重叠了整个东西。
— ChumiestBucket '18
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" />
— 普拉多斯
source
1
我会为其他人辩称这种方法，因为它使用了已经存在的样式，但是它可能不会令所有人满意。
— 电磁阀2012年
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" >
— 迪帕克·戈尔（Deepak Goel）
source
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>
— 法里德·艾哈迈德（Farid Ahmed）
source
1
这应该是可以接受的答案，因为这是在LinearLayout
— -JaydeepW
这将适用于布局中的所有元素吗？
— 拉米·阿洛什
20 
<View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray" />

在两个布局之间放置此代码即可获得Divider。

— 鲨鱼DO子
source
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 / 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>

请注意，由于某种原因，图形设计器中的预览显示为“ android.graphics.bitmap_delegate.nativeRecycle（I）Z”。不确定其含义，但是可以忽略，因为它在新版本的android和旧版本（在android 4.2和2.3上测试）都可以正常工作。

似乎仅在图形设计器中使用API​​17时才会显示该错误。

— android开发人员
source
12

添加此视图；在您的textviews

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

非常简单。只需创建具有黑色背景色的视图即可。

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

这将创建一条具有背景色的水平线。您还可以像其他任何视图一样添加其他属性，例如边距，填充等。

— 维杰·夏尔马
source
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" />

此代码在两个控件之间画线...

— 阿尚·德赛
source
10

它将水平分隔线添加到布局中的任何位置。

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>
— 卡梅尔
source
该行仅在Textview下。
— -
10

您可以<View>在First 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
source
8

运行时版本：

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);
— 阿尔山
source
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" />
— 马克苏杜尔·哈桑·拉朱
source
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
— 梦想开发者
source
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>

在此处输入图片说明

— 回旋加速器3x3
source
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" />
— Irshu
source
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" />
— 代码511788465541441
source
不使用android：src =“？android：attr / listDivider” ....只需添加android：background =“＃FFFFFF”
— bebosh 2014年
4

使用以下方法添加水平黑线：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>
— 乔蒂·夏尔马
source
3

要完成CamilleSévigny的答案，您还可以定义自己的线条形状，例如自定义线条颜色。

在可绘制目录中定义xml形状。line_horizo​​ntal.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" />
— LG
source
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"
— 侯赛因
source
3

这将帮助您解决此问题。在这里创建一个小视图以在两条视图之间用黑线分隔。

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />
— 玛雅克·加格（Mayank Garg）
source
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>

— 法哈德·哈马德·奥洛塔比
source
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" />/>
— 苏尼尔
source
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>

请注意，一个部分的末尾包含分隔线

— 丹·阿尔伯特努（Dan Alboteanu）
source
1

简单的解决方案

只需在您的布局中添加此代码，然后将“ Id_of__view_present_above”替换为视图的ID（在其下方需要分隔符）即可。

<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"
/>
— 什里德巴特
source
3
stackoverflow.com/help/how-to-answer 寻找Brevity is acceptable, but fuller explanations are better.
— Andy K，
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());
— 莫罗佐夫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.