代码之家 › 专栏 › 技术社区 › Kaspa

使用XML可绘制的竖线

android-drawable android-xml line android-layout android

134

Kaspa · 技术社区 · 15 年前

我想知道如何定义一条垂直线(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>

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

是的,有一些解决方法,例如绘制一个1倍厚的矩形,但是如果它由多个 <item> 元素。

有人有机会吗?

更新

此案仍未解决。然而, 对于Android文档改革的任何人-您可能会发现这很有用: Missing Android XML Manual

更新

除了我标记为正确的那个,我找不到其他方法。虽然感觉有点“沉重”,但它确实起了作用,因此,如果您碰巧知道答案,请不要忘记分享;)

15 回复 | 直到 6 年前

347

Jared Burrows 10 年前

你可以尝试用 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" />

对于水平线。

Jared Burrows 10 年前

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

<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中定义一个30dp的布局宽度。但在这种情况下,最终宽度也将为30dp,这在大多数情况下可能是不可取的。这基本上意味着宽度和高度都必须是相同的值,即行所需长度的值。我不知道怎么解决这个问题。

这似乎是“Android方式”的解决方案,但除非我提到的维度问题有一些修复或解决方法,否则这可能对大多数人都不起作用。我们真正需要的是<shape/>或<stroke/>中的方向属性。

您还可以尝试在旋转标记的属性中引用另一个可绘图项,例如:

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

logcat 12 年前

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

为我工作。将其作为视图背景,填充父对象或固定尺寸的dp高度

user4679242 10 年前

可以使用“旋转”属性

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

Eric Kok 12 年前

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

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

willlma 12 年前

我需要以动态/编程方式添加视图,所以添加额外的视图会很麻烦。我的视图高度是包装内容,因此我不能使用矩形解决方案。我找到一篇博文 here 关于扩展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); 希望这有帮助。

user3130068 11 年前

很简单… 在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"/>

Lukas1 11 年前

视情况而定,您希望在哪里有垂直线,但如果您想要一个垂直边框,例如,您可以让父视图有一个自定义的可绘制的背景。然后你可以这样定义这个抽屉:

<?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细黑线,将此可绘制作为背景。

a.ch. 7 年前

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

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

Boxlady 11 年前

你可以使用一个形状,但不要用线条,而是把它做成矩形。

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

根据破折号的大小,您可能需要调整宽度才能使其成为一行。

希望这有帮助干杯

YasirAzgar 11 年前

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>

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

David Wasser 7 年前

要创建垂直线,只需使用宽度为1dp的矩形:

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

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

a.ch. 6 年前

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

-1

Surender Kumar 10 年前

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

        android:background="#ffffff"
        android:padding="10dp" />`

-2

Noor Nawaz 10 年前

非常简单,我认为更好的方法。

<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Section Text"
            android:id="@+id/textView6"
            android:textColor="@color/emphasis"
            android:drawableBottom="@drawable/underline"/>

下行链路

<?xml version="1.0" encoding="utf-8"?>
<shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <size android:width="1000dp" android:height="2dp" />
      <solid android:color="@color/emphasis"/>
</shape>