有没有一种简单的方法可以在 Android 视图的顶部和底部添加边框?
我有一个 TextView,我想沿着其顶部和底部边框添加黑色边框。我尝试将 android:drawableTop
和 android:drawableBottom
添加到 TextView,但这只会导致整个视图变黑。
<TextView
android:background="@android:color/green"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="@android:color/black"
android:drawableBottom="@android:color/black"
android:text="la la la" />
有没有一种方法可以轻松地向 Android 中的视图(特别是 TextView)添加顶部和底部边框?
I have a TextView and I'd like to add a black border along its top and bottom borders. I tried adding android:drawableTop
and android:drawableBottom
to the TextView, but that only caused the entire view to become black.
<TextView
android:background="@android:color/green"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="@android:color/black"
android:drawableBottom="@android:color/black"
android:text="la la la" />
Is there a way to easily add a top and bottom border to a View (in particular, a TextView) in Android?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(25)
在 android 2.2 中你可以执行以下操作。
创建一个 xml 可绘制对象,例如 /res/drawable/textlines.xml 并将其指定为 TextView 的背景属性。
/res/drawable/textlines.xml
这样做的缺点是您必须指定不透明的背景颜色,因为透明胶片不起作用。 (至少我认为他们做到了,但我错了)。在上面的示例中,您可以看到第一个形状 #FFdddddd 的纯色被复制到第二个形状的描边颜色中。
In android 2.2 you could do the following.
Create an xml drawable such as /res/drawable/textlines.xml and assign this as a TextView's background property.
/res/drawable/textlines.xml
The down side to this is that you have to specify an opaque background colour, as transparencies won't work. (At least i thought they did but i was mistaken). In the above example you can see that the solid colour of the first shape #FFdddddd is copied in the 2nd shapes stroke colour.
我使用了一个技巧,使边框显示在容器之外。使用此技巧,仅绘制一条线,因此将显示底层视图的背景。
I've used a trick so that the border is displayed outside the container. With this trick only a line is drawn so the background will be shown of the underlying view.
要仅在底部添加 1dp 白色边框并具有透明背景,您可以使用以下内容,这比此处的大多数答案更简单。
对于
TextView
或其他视图添加:并在
drawable
目录中添加以下 XML,名为borderbottom.xml
如果您想要在top,将
android:top="-2dp"
更改为android:bottom="-2dp"
颜色不需要是白色,背景不需要是要么透明。
可能不需要
solid
元素。这将取决于您的设计(感谢 V. Kalyuzhnyu)。基本上,此 XML 将使用矩形形状创建边框,但随后将顶部、右侧和左侧推到形状的渲染区域之外。这使得底部边框可见。
To add a
1dp
white border at the bottom only and to have a transparent background you can use the following which is simpler than most answers here.For the
TextView
or other view add:And in the
drawable
directory add the following XML, calledborderbottom.xml
If you want a border at the top, change the
android:top="-2dp"
toandroid:bottom="-2dp"
The colour does not need to be white and the background does not need to be transparent either.
The
solid
element may not be required. This will depend on your design (thanks V. Kalyuzhnyu).Basically, this XML will create a border using the rectangle shape, but then pushes the top, right and left sides beyond the render area for the shape. This leaves just the bottom border visible.
选项 1:可绘制形状
如果您希望布局或视图周围有边框并可以在其中设置背景,这是最简单的选项。在
drawable
文件夹中创建一个 XML 文件,如下所示:如果您不需要填充,可以删除
solid
。布局/视图上的设置background="@drawable/your_shape_drawable"
。选项 2:背景视图
这是我在
RelativeLayout
中使用的一个小技巧。基本上,您在要为其提供边框的视图下有一个黑色方块,然后为该视图提供一些填充(不是边距!),以便黑色方块在边缘显示出来。显然,只有当视图没有任何透明区域时,这才可以正常工作。如果确实如此,我建议您编写一个自定义
BorderView
,它只绘制边框 - 它应该只有几十行代码。如果您想知道,它确实可以与
adjustViewBounds=true
一起使用。但是,如果您想在整个RelativeLayout
中拥有背景,则它不起作用,因为有一个错误会阻止您使用View 填充
。在这种情况下,我建议使用RelativeLayout
Shape
可绘制对象。选项 3:9-patch
最后一个选项是使用 9-patch 可绘制对象,如下所示:
您可以在任何需要的视图上使用它。可以设置
android:background="@drawable/..."
。是的,它确实需要是 6x6 - 我尝试过 5x5,但没有成功。这种方法的缺点是你不能很容易地改变颜色,但如果你想要花哨的边框(例如,只有顶部和底部的边框,如这个问题),那么你可能无法使用 < code>Shape 可绘制,功能不是很强大。
选项 4:额外的视图
如果您只需要视图上方和下方的边框,我忘记提及这个非常简单的选项。您可以将视图放在垂直的 LinearLayout 中(如果还没有),然后在其上方和下方添加空的 View,如下所示:
Option 1: Shape Drawable
This is the simplest option if you want a border around a layout or view in which you can set the background. Create an XML file in the
drawable
folder that looks something like this:You can remove the
solid
if you don't want a fill. The setbackground="@drawable/your_shape_drawable"
on your layout/view.Option 2: Background View
Here's a little trick I've used in a
RelativeLayout
. Basically you have a black square under the view you want to give a border, and then give that view some padding (not margin!) so the black square shows through at the edges.Obviously this only works properly if the view doesn't have any transparent areas. If it does I would recommend you write a custom
BorderView
which only draws the border - it should only be a few dozen lines of code.If you're wondering, it does work with
adjustViewBounds=true
. However, it doesn't work if you want to have a background in an entireRelativeLayout
, because there is a bug that stops you filling aRelativeLayout
with aView
. In that case I'd recommend theShape
drawable.Option 3: 9-patch
A final option is to use a 9-patch drawable like this one:
You can use it on any view where you can set
android:background="@drawable/..."
. And yes it does need to be 6x6 - I tried 5x5 and it didn't work.The disadvantage of this method is you can't change the colours very easily, but if you want fancy borders (e.g. only a border at the top and bottom, as in this question) then you may not be able to do them with the
Shape
drawable, which isn't very powerful.Option 4: Extra views
I forgot to mention this really simple option if you only want borders above and below your view. You can put your view in a vertical
LinearLayout
(if it isn't already) and then add emptyView
s above and below it like this:目前接受的答案不起作用。由于抗锯齿,它会在视图的左侧和右侧创建细垂直边框。
这个版本运行完美。它还允许您独立设置边框宽度,如果需要,您还可以在左侧/右侧添加边框。唯一的缺点是它不支持透明度。
使用以下代码创建一个名为
/res/drawable/top_bottom_borders.xml
的 xml 可绘制对象,并将其指定为 TextView 的背景属性。通过 Marshmallow 在 Android KitKat 上进行测试
The currently accepted answer doesn't work. It creates thin vertical borders on the left and right sides of the view as a result of anti-aliasing.
This version works perfectly. It also allows you to set the border widths independently, and you can also add borders on the left / right sides if you want. The only drawback is that it does NOT support transparency.
Create an xml drawable named
/res/drawable/top_bottom_borders.xml
with the code below and assign it as a TextView's background property.Tested on Android KitKat through Marshmallow
所以我想做一些稍微不同的事情:仅在底部添加边框,以模拟 ListView 分隔线。我修改了 Piet Delport 的答案并得到了这个:
注意使用 px 而不是 dp 来精确获得 1 像素分隔线(某些手机 DPI 会使 1dp 线消失)。
So I wanted to do something slightly different: a border on the bottom ONLY, to simulate a ListView divider. I modified Piet Delport's answer and got this:
Note using px instead of dp to get exactly 1 pixel divider (some phone DPIs will make a 1dp line disappear).
将文件添加到 res/drawable
将此文件上的链接添加到背景属性
Add file to res/drawable
Add link on this file to background property
正如@Nic Hubbard 所说,有一种非常简单的方法来添加边框线。
您可以将高度和背景颜色更改为您想要的任何内容。
Just as @Nic Hubbard said, there is a very easy way to add a border line.
You can change the height and background color to whatever you want.
您还可以将视图包装在 FrameLayout 中,然后将框架的背景颜色和填充设置为您想要的;但是,默认情况下,文本视图具有“透明”背景,因此您也需要更改文本视图的背景颜色。
You can also wrap the view in a FrameLayout, then set the frame's background color and padding to what you want; however, the textview, by default has a 'transparent' background, so you'd need to change the textview's background color too.
我的答案基于@Emile 版本,但我使用透明颜色而不是纯色。
此示例将绘制 2dp 底部边框。
@color/bgcolor 是您用边框绘制视图的背景颜色。
如果要更改边框的位置,请使用以下之一更改偏移量:
或将它们组合起来具有 2 个或更多边框:
My answers is based on @Emile version but I use transparent color instead of solid.
This example will draw a 2dp bottom border.
@color/bgcolor is the color of the background on wich you draw your view with border.
If you want to change the position of the border change the offset with one of:
or combine them to have 2 or more borders:
使用
InsetDrawable
添加边框以插入边框的最简单方法,以下将仅显示顶部边框:Simplest way to add borders to inset the borders using
InsetDrawable
,following will show top border only :您可以通过以下代码片段来完成此操作 -
预览 -
You can do this by this code snippet -
Preview -
为什么不直接创建一个带有背景颜色的 1dp 高视图呢?然后可以轻松地将其放置在您想要的位置。
Why not just create a 1dp high view with a background color? Then it can be easily placed where you want.
要改变这一点:
我更喜欢“drawable/top_bottom_border.xml”中的这种方法:
这只会生成边框,而不是在背景有颜色时出现的矩形。
To change this:
I prefer this approach in "drawable/top_bottom_border.xml":
This only makes the borders, not a rectangle that will appear if your background has a color.
只是为了将我的解决方案添加到列表中。
我想要一个半透明的底部边框,该边框延伸超过原始形状(因此半透明边框位于父矩形的外部)。
这给了我;
Just to add my solution to the list..
I wanted a semi transparent bottom border that extends past the original shape (So the semi-transparent border was outside the parent rectangle).
Which gives me;
首先制作一个内容如下所示的 xml 文件,并将其命名为 border.xml 并将其放置在 res 目录内的布局文件夹中,
然后在代码中使用
这将在 TextView 的顶部和底部创建一条黑线。
First make a xml file with contents shown below and name it border.xml and place it inside the layout folder inside the res directory
After that inside the code use
This will make a black line on top and bottom of the TextView.
只需在
View
的顶部和底部添加视图即可Simply add Views at the top and bottom of the
View
写下下面的代码
Write down below code
尝试使用线性布局包裹图像,并将其背景设置为您想要的文本周围的边框颜色。然后将文本视图上的填充设置为您想要的边框厚度。
Try wrapping the image with a linearlayout, and set it's background to the border color you want around the text. Then set the padding on the textview to be the thickness you want for your border.
您还可以使用 9 路径来完成您的工作。创建它,使彩色像素的高度不会增加,而只会增加透明像素的高度。
You can also use a 9-path to do your job. Create it so that colored pixel do not multiply in height but only the transparent pixel.
根据 Pi Delport 和 Emile 接受的答案,我让它变得简单一点
Based on accepted answer of Pi Delport and Emile, I made it a little simpler
只需在要添加边框的文本下方添加此 TextView
Just Add this TextView below the text where you want to add the border
只是为了强制执行 @phreakhead ´s 和 user1051892 的回答,
如果为负,则必须大于
描边 android:width>.如果没有,项目的绘画将与笔画的绘画混合,您可能会认为这些值不起作用。Just to enforce @phreakhead ´s and user1051892 ´s answers,
<item android:bottom|android:left|android:right|android:top>
if negative, must to be greater than<stroke android:width>
. If not, item´s painting will be mixed with stroke´s painting and you may think these values are not working.