使用 XML 绘制的垂直线

我试图找出如何定义一个垂直线(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 手册

更新

我找不到别的办法，除了我标记为正确的那个。这种方法虽然让人感觉有点“沉重”，但是确实有效，因此如果你碰巧知道答案，不要忘记分享;)

271213 次浏览
小开
最佳答案

你可以试试 View:

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

我只对水平线使用了这个，但是我认为对于垂直线也可以。

用途:

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

水平线。

小开

您可以将您的形状嵌套在一个旋转标记中。

<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 方式”的解决方案，但除非有一些修复或解决方案的尺寸问题，我提到，那么这可能不会为大多数人的工作。我们真正需要的是一个方向属性，在 < 形状/> 或 < 中风/> 。

您还可以尝试引用其他可绘制的属性，比如:

<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" />
小开 
<?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 高度

小开

我需要动态地/程序化地添加视图，因此添加额外的视图会很麻烦。我的视图高度是 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); 希望这个能帮上忙。

小开

我想到了一个不同的解决方案。这个想法是先用你喜欢的颜色填充线条，然后再用背景颜色填充整个区域，同时使用左边或右边填充。显然，这只适用于您的绘图工具最左边或最右边的垂直线。

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

您可以使用一个形状，但不使用直线，而是使其成为矩形。

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

您可能必须根据破折号的大小调整宽度，才能将其放入一条线中。

希望这个能帮上忙 干杯

小开

很简单。 在 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"/>
小开

取决于您希望在哪里使用垂直线，但是如果您希望使用垂直边框，例如，您可以使父视图具有自定义绘制的背景。然后你可以像这样定义可画性:

<?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 的细黑线，该黑线将以此作为背景。

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


..........
.......
......
小开 
 <View
android:layout_width="2dp"
android:layout_height="40dp"


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

您可以使用 RotleAttribute

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

要做一条垂直线，只需要使用一个宽度为1dp 的矩形:

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

不要使用 stroke，使用 solid(即“填充”颜色)来指定行的颜色。

小开

我认为这是最简单的解决办法:

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

似乎没有人提到这个选项:

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

虽然@CommonsWare 的解决方案可以工作，但是它不能用于例如 layer-list绘图中。结合 <rotate>和 <shape>的选项会导致大小问题。下面是一个使用 Android 矢量绘图工具的解决方案。这是一个1x10dp 的白线(可以通过修改 width，height和 strokeColor的属性来调整) :

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="1"
android:viewportHeight="10"
android:width="1dp"
android:height="10dp">


<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M0.5,0 V10" />


</vector>
小开

在 Android 中使用旋转绘图的时候似乎有一个 bug，就像这里的帖子所说的那样: stackoverflow.com/a/8716798/3849039

根据我的观点，创建自定义视图是解决这个问题的最佳方案。

下面的链接节省我的时间。

Https://gist.github.com/mlagerberg/4aab34e6f8bc66b1eef7/revisions

小开

我用这个可绘制的水平和垂直线

Https://gist.github.com/utkuglsvn/410ffb867bef3d89e85bf6bbd57950c1

示例 xml:

<ImageView
android:id="@+id/imageView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:src="@drawable/vertical_line"
app:layout_constraintEnd_toEndOf="@+id/imageView7"
app:layout_constraintStart_toStartOf="@+id/imageView7"
app:layout_constraintTop_toBottomOf="@+id/imageView8" />

提交答案