使用XML可绘制的垂直线


162

我试图弄清楚如何定义一条垂直线(1dp粗)以用作可绘制对象。

要制作一个水平的,很简单:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp" android:color="#0000FF"/>
    <size android:height="50dp" />     
</shape>

问题是,如何使这条线垂直?

是的,有一些解决方法,例如绘制一个1px厚的矩形,但是如果可绘制XML由多个<item>元素组成,则会使XML复杂化。

有人有这个机会吗?

更新

案件仍未解决。但是,对于所有参加Android文档工作的人来说,您可能会发现这很有用: 缺少Android XML手册

更新

除了我标记为正确的方法外,我没有发现其他方法。它确实可以解决问题,但是感觉有点“沉重”,因此,如果您碰巧知道答案,别忘了分享;)

Answers:


394

您可以尝试使用View

<View
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:background="#FF0000FF" />

我仅将其用于水平线,但我认为它也适用于垂直线。

用:

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="#FF0000FF" />

一条水平线。


4
谢谢马克:)!我知道我可以使用一种视图来实现这一目标。事情是,我正在组装一个更复杂的视图,希望将其用作表格单元格背景的可绘制对象。那里有不同类型的形状/渐变/线条。使用视图将是一种解决方案,但是我必须将其放置在不同的图形“图层”中,当我遇到调整大小等问题时,这可能会令自己措手不及。我想知道为什么在“形状”的xmls,也许Google的某个人可以启发我们?:)
Kaspa

1
有时还需要使用marginRight / Start和Left / End,以获取侧面的空间。
乔治

108

您可以将形状嵌套在旋转标签内。

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape 
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#ff00ff"
            android:dashWidth="1dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

但是,唯一的问题是,在布局xml中定义的布局参数将是用于绘制原始形状的尺寸。这意味着如果您希望线高30dp,则需要在布局xml中将layout_width定义为30dp。但在这种情况下,最终宽度也将为30dp,这在大多数情况下可能是不希望的。从本质上讲,这意味着宽度和高度必须为相同的值,即线的所需长度的值。我不知道如何解决此问题。

这似乎是“ android方式”的解决方案,但是除非我提到有关尺寸问题的解决方法或变通办法,否则对于大多数人来说这可能行不通。我们真正需要的是<shape />或<stroke />中的direction属性。

您还可以尝试在Rotate标签的属性中引用另一个drawable,例如:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/horizontal_line" />

但是我还没有测试过,并期望它有同样的问题。

-编辑-

哦,我实际上想出了个解决方法。您可以在布局xml中使用负边距来消除多余的多余空间。如:

<ImageView
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="-15dp"
    android:layout_marginRight="-15dp"
    android:src="@drawable/dashed_vertical_line" />

4
而负边距将对99%的设备起作用。...只知道,如果您这样做,则有设备会强制关闭。某些设备难以扩大负利润
Kent Andersen 2012年

2
@cephus我使用您的第一个代码,但是我需要在视图顶部显示该行。这是我观点的中心。如何设置重力(在xml文件中)?
Behzad

20

您可以使用旋转属性

 <item>
    <rotate
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:shape="line"
            android:top="1dip" >
            <stroke
                android:width="1dip"
                 />
        </shape>
    </rotate>
</item>

6
这绝对是一个更好(或最好)的答案,因为@commonsware的答案足以满足常规垂直线的需要。如果我们不想创建虚线(例如),这是唯一可以正常工作的答案。
Subin Sebastian 2015年

16
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
    <stroke android:width="1dp" android:color="@color/white" />
    <size android:width="2dp" />
</shape>

工作适合我。以fill_parent或dp高度固定大小作为背景放置


11

我想出了一个不同的解决方案。这个想法是先用您喜欢的线条颜色填充可绘制对象,然后在使用左或右填充时再次用背景颜色填充整个区域。显然,这仅适用于可绘制对象左侧或右侧的垂直线。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/divider_color" />
    <item android:left="6dp" android:drawable="@color/background_color" />
</layer-list>

我需要在左侧,右侧,底部带有边框的背景,这对我有用,谢谢!
Andrii Chernenko 2013年

太好了,我设法在LinearLayout(showDividers="middle")中创建了整洁的分隔线。要获得2dp分频器,我需要在android:left="3dp"此处指定。
Jonik 2013年

提示:为使此drawable更通用,请使用 @android:color/transparent而不是hardcoding @color/background_color
Jonik 2013年

实际上,对于我的垂直分隔器需求,此解决方案甚至更简单。:)
Jonik 2013年

@Jonik当然可以,但这仅适用于固定高度的视图,不适用于wrap_content
Eric Kok

10

我认为这是最简单的解决方案:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:gravity="center">
        <shape android:shape="rectangle">
            <size android:width="1dp" />
            <solid android:color="#0000FF" />
        </shape>
    </item>

</layer-list>

精彩。添加android:heightsize,如果你还想来控制尺寸。
Giulio Piancastelli,

4

我需要动态/以编程方式添加视图,因此添加额外的视图会很麻烦。我的视图高度为WRAP_CONTENT,因此无法使用矩形解决方案。我在这里找到了有关扩展TextView,覆盖onDraw()和在线绘画的博客文章,因此我实现了这一点,并且效果很好。请参阅下面的代码:

public class NoteTextView extends TextView {
    public NoteTextView(Context context) {
       super(context);
    }
    private Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#F00000FF"));
        paint.setStrokeWidth(0);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, 0, getHeight(), paint);
    }
}

我需要在左边有一条垂直线,但是drawLine(startX, startY, stopX, stopY, paint)画线参数是这样,因此您可以在视图的任何方向上绘制任何直线。然后在我的活动中,我NoteTextView note = new NoteTextView(this); 希望这会有所 帮助。


3

它非常简单...在android xml中添加垂直线...

<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:rotation="90"
android:background="@android:color/darker_gray"/>

当您不能将fill_parent用作高度时,这很有用,因为父高度设置为wrap_content。
谢尔盖·阿尔杜霍夫

2

视情况而定,在哪儿要有垂直线,但是例如,如果要有垂直边框,则可以让父视图具有自定义可绘制背景。然后可以这样定义drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="#000000" />
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
        </shape>
    </item>

</layer-list>

本示例将在视图的右侧创建一条1dp的细黑线,并将其作为背景绘制。


2
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>

    </item>

</layer-list>

2

似乎没有人提到此选项:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white" android:width="1dp"/>
</layer-list>

1

您可以使用形状,但可以用线条代替矩形。

android:shape="rectangle">
<stroke
    android:width="5dp"
    android:color="#ff000000"
    android:dashGap="10px"
    android:dashWidth="30px" />

在您的布局中使用此...

<ImageView
    android:layout_width="7dp"
    android:layout_height="match_parent"
    android:src="@drawable/dashline"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layerType="software"/>

您可能需要根据虚线的大小来调整宽度,以使其成为一行。

希望这对干杯有帮助


1
add this in your styles.xml

        <style name="Divider">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:background">@color/divider_color</item>
        </style>

        <style name="Divider_invisible">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
        </style>

then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table. 

     <TableLayout
                android:id="@+id/table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:stretchColumns="*" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:background="#92C94A" >

                    <TextView
                        android:id="@+id/textView11"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp" />
    //...................................................................    

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider_invisible" />
                    </LinearLayout>
        //...................................................................
                    <TextView
                        android:id="@+id/textView12"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/main_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
  //...............................................................  
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

    //...................................................................
                    <TextView
                        android:id="@+id/textView13"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/side_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

                    <TextView
                        android:id="@+id/textView14"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/total"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
                </TableRow>

                <!-- display this button in 3rd column via layout_column(zero based) -->

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#6F9C33" >

                    <TextView
                        android:id="@+id/textView21"
                        android:padding="5dp"
                        android:text="@string/servings"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

    ..........
    .......
    ......

0

要制作一条垂直线,只需使用一个宽度为1dp的矩形即可:

<shape>
    <size
        android:width="1dp"
        android:height="16dp" />
    <solid
        android:color="#c8cdd2" />
</shape>

不要使用stroke,而使用solid(这是“填充”颜色)指定线条的颜色。


-1
 <View
        android:layout_width="2dp"
        android:layout_height="40dp"

        android:background="#ffffff"
        android:padding="10dp" />`
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.