使用 XML 可绘制的垂直线
Posted
技术标签:
【中文标题】使用 XML 可绘制的垂直线【英文标题】：Vertical line using XML drawable 【发布时间】：2011-02-09 04:02:25 【问题描述】：我试图弄清楚如何定义一条垂直线（1dp 粗）用作可绘制对象。
要制作一个水平的，它非常简单：
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android: android:color="#0000FF"/>
<size android: />
</shape>
问题是，如何让这条线垂直？
是的，有一些变通方法，例如绘制一个 1px 厚的矩形，但如果它由多个 <item> 元素组成，这会使可绘制 XML 变得复杂。
有人有这个机会吗？
更新
案件仍未解决。然而， 对于 Android 文档运动中的任何人 - 您可能会发现这很有用： Missing Android XML Manual
更新
除了我标记为正确的方法之外，我没有找到其他方法。虽然感觉有点“沉重”，但它确实起到了作用，因此如果你碰巧知道答案，别忘了分享；）
【问题讨论】：
【参考方案1】：你可以试试View：
<View
android:layout_
android:layout_
android:background="#FF0000FF" />
我只将它用于水平线，但我认为它也适用于垂直线。
用途：
<View
android:layout_
android:layout_
android:background="#FF0000FF" />
用于水平线。
【讨论】：
感谢马克 :)！我知道我可以使用视图来实现这一点。问题是我正在组装一个更复杂的视图，我想将其用作表格单元格背景的可绘制对象。那里有不同类型的形状/渐变/线条。使用视图将是一个解决方案，但是我必须将它放在不同的绘图“层”中，当我遇到调整大小等时，这可能会在脚上射击自己。我想知道为什么没有关于“ shape" xmls，也许谷歌的人可以启发我们？ :) 使用 marginRight/Start 和 Left/End 有时也很有趣，可以在两侧留出空间。【参考方案2】：您可以将形状嵌套在旋转标签内。
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90">
<shape
android:shape="line">
<stroke
android:
android:color="#ff00ff"
android:dashWidth="1dp"
android:dashGap="2dp" />
</shape>
</rotate>
但是，唯一的问题是您的布局 xml 中定义的布局参数将是用于绘制原始形状的尺寸。这意味着如果您希望您的线条高度为 30dp，则需要在布局 xml 中定义 30dp 的 layout_width。但在这种情况下，最终宽度也将是 30dp，这在大多数情况下可能是不可取的。这实质上意味着宽度和高度必须是相同的值，即您想要的线条长度的值。我不知道如何解决这个问题。
这似乎是“android 方式”的解决方案，但除非我提到的尺寸问题有一些修复或解决方法，否则这可能对大多数人不起作用。我们真正需要的是
您也可以尝试在旋转标签的属性中引用另一个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_
android:layout_
android:layout_marginLeft="-15dp"
android:layout_marginRight="-15dp"
android:src="@drawable/dashed_vertical_line" />
【讨论】：
虽然负边距适用于 99% 的设备……但要知道，如果您这样做，有些设备会强制关闭。某些设备无法提高负边距 @cephus 我使用您的第一个代码，但我需要视图顶部的行。它在我视野的中心。如何为它设置重力（在形状 xml 文件中）？ 完美这个作品【参考方案3】：你可以使用旋转属性
<item>
<rotate
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:shape="line"
android:top="1dip" >
<stroke
android:
/>
</shape>
</rotate>
</item>
【讨论】：
这绝对是一个更好（或最好）的答案，因为@commonsware 的答案足以满足正常的垂直线。如果我们不想创建虚线（例如），这是唯一可以正常工作的答案。【参考方案4】：<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke android: android:color="@color/white" />
<size android: />
</shape>
为我工作。将其作为填充父视图的背景或在 dp 高度中固定大小
【讨论】：
【参考方案5】：我认为这是最简单的解决方案：
<?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: />
<solid android:color="#0000FF" />
</shape>
</item>
</layer-list>
【讨论】：
太棒了。如果您还想控制该维度，请将android:height 添加到size。【参考方案6】：
我想出了一个不同的解决方案。这个想法是先用你喜欢线条的颜色填充可绘制对象，然后在使用左或右填充时再次用背景颜色填充整个区域。显然，这只适用于可绘制对象最左侧或右侧的垂直线。
<?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>
【讨论】：
我需要在左、右、下有边框的背景，这对我有用，谢谢！ 太棒了，我设法在我的 LinearLayout (showDividers="middle") 中创建了整齐的分隔线。要获得 2dp 分隔符，我需要在此处指定 android:left="3dp"。
提示：为了让这个drawable更普遍有用，使用@android:color/transparent而不是硬编码@color/background_color。
实际上是为了满足我的垂直分隔线需求，this solution is even simpler。 :)
@Jonik 当然，但这仅适用于固定高度视图，不适用于 wrap_content。【参考方案7】：
我需要以动态/编程方式添加我的视图，因此添加额外的视图会很麻烦。我的视图高度是 WRAP_CONTENT，所以我不能使用矩形解决方案。我发现了一篇关于扩展 TextView、覆盖 onDraw() 和画线的博客文章here，所以我实现了它并且效果很好。请参阅下面的代码：
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);
希望这可以帮助。
【讨论】：
【参考方案8】：很简单... 在android xml中添加一条垂直线...
<View
android:layout_
android:layout_
android:layout_marginTop="5dp"
android:rotation="90"
android:background="@android:color/darker_gray"/>
【讨论】：
这在您不能使用 fill_parent 作为高度时非常有用，因为父高度设置为 wrap_content。【参考方案9】：取决于你想要垂直线的位置，但是如果你想要一个垂直边框，你可以让父视图有一个自定义的可绘制背景。然后你可以像这样定义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: 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 的细黑线，并将此可绘制对象作为背景。
【讨论】：
【参考方案10】：<?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:
android:color="#1fc78c" />
</shape>
</item>
</layer-list>
【讨论】：
【参考方案11】：好像没有人提到这个选项：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@color/white" android:/>
</layer-list>
【讨论】：
【参考方案12】：虽然@CommonsWare 的解决方案有效，但不能使用 e。 G。在layer-listdrawable 中。组合<rotate> 和<shape> 的选项会导致大小问题。这是使用 Android Vector Drawable 的解决方案。这个Drawable是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:
android:>
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M0.5,0 V10" />
</vector>
【讨论】：
【参考方案13】：您可以使用形状而不是线，而是将其设为矩形。
android:shape="rectangle">
<stroke
android:
android:color="#ff000000"
android:dashGap="10px"
android:dashWidth="30px" />
在你的布局中使用这个...
<ImageView
android:layout_
android:layout_
android:src="@drawable/dashline"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layerType="software"/>
您可能必须根据虚线的大小调整宽度，才能将其排成一行。
希望这会有所帮助 干杯
【讨论】：
【参考方案14】：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_
android:layout_
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_
android:layout_
android:background="#92C94A" >
<TextView
android:id="@+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
//...................................................................
<LinearLayout
android:layout_
android:layout_ >
<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_
android:layout_ >
<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_
android:layout_ >
<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_
android:layout_
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_
android:layout_ >
<View style="@style/Divider" />
</LinearLayout>
..........
.......
......
【讨论】：
【参考方案15】：要制作一条垂直线，只需使用宽度为 1dp 的矩形：
<shape>
<size
android:
android: />
<solid
android:color="#c8cdd2" />
</shape>
不要使用stroke，使用solid（即“填充”颜色）来指定线条的颜色。
【讨论】：
【参考方案16】：根据此处的线程，在 Android M 及更高版本中使用可旋转绘图时似乎存在错误：***.com/a/8716798/3849039
在我看来，创建一个自定义视图是最好的解决方案。
下面的链接可以节省我的时间。
https://gist.github.com/mlagerberg/4aab34e6f8bc66b1eef7/revisions
【讨论】：
【参考方案17】：我将这个drawable用于水平和垂直线
https://gist.github.com/UtkuGlsvn/410ffb867bef3d89e85bf6bbd57950c1
示例 xml：
<ImageView
android:id="@+id/imageView9"
android:layout_
android:layout_
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" />
【讨论】：
【参考方案18】： <View
android:layout_
android:layout_
android:background="#ffffff"
android:padding="10dp" />`
【讨论】：
以上是关于使用 XML 可绘制的垂直线的主要内容，如果未能解决你的问题，请参考以下文章