有没有一种简单的方法可以在 Android 视图的顶部和底部添加边框？

Is there an easy way to add a border to the top and bottom of an Android View?

提问by emmby

I have a TextView and I'd like to add a black border along its top and bottom borders. I tried adding android:drawableTopand android:drawableBottomto the TextView, but that only caused the entire view to become black.

我有一个 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" />

Is there a way to easily add a top and bottom border to a View (in particular, a TextView) in Android?

有没有办法在 Android 中轻松地向视图（特别是 TextView）添加顶部和底部边框？

回答by Emile

In android 2.2 you could do the following.

在 android 2.2 中，您可以执行以下操作。

Create an xml drawable such as /res/drawable/textlines.xml and assign this as a TextView's background property.

创建一个 xml drawable，例如 /res/drawable/textlines.xml 并将其指定为 TextView 的背景属性。

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

/res/drawable/textlines.xml

<?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="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

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.

这样做的缺点是您必须指定不透明的背景颜色，因为透明胶片不起作用。（至少我认为他们做到了，但我错了）。在上面的示例中，您可以看到第一个形状 #FFdddddd 的纯色被复制到第二个形状的笔触颜色中。

回答by user1051892

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.

我使用了一个技巧，使边框显示在容器外。使用这个技巧，只绘制一条线，因此将显示底层视图的背景。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>

回答by Timmmm

Option 1: Shape Drawable

选项 1：形状可绘制

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 drawablefolder that looks something like this:

如果您想要在布局或视图周围设置边框以设置背景，这是最简单的选项。在drawable文件夹中创建一个如下所示的 XML 文件：

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

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

You can remove the solidif you don't want a fill. The set background="@drawable/your_shape_drawable"on your layout/view.

solid如果您不想要填充，可以删除。background="@drawable/your_shape_drawable"布局/视图上的集合。

Option 2: Background View

选项 2：背景视图

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.

这是我在RelativeLayout. 基本上，您在要提供边框的视图下有一个黑色方块，然后为该视图提供一些填充（不是边距！），以便黑色方块在边缘显示出来。

Obviously this only works properly if the view doesn't have any transparent areas. If it does I would recommend you write a custom BorderViewwhich only draws the border - it should only be a few dozen lines of code.

显然，这只有在视图没有任何透明区域时才能正常工作。如果是这样，我建议您编写一个BorderView只绘制边框的自定义- 它应该只有几十行代码。

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

If you're wondering, it doeswork with adjustViewBounds=true. However, it doesn't work if you want to have a background in an entire RelativeLayout, because there is a bug that stops you filling a RelativeLayoutwith a View. In that case I'd recommend the Shapedrawable.

如果您想知道，它确实适用于adjustViewBounds=true. 但是，如果你想有一个完整的背景这是行不通的RelativeLayout，因为那里是阻止你填充一个bugRelativeLayout用View。在这种情况下，我会推荐Shapedrawable。

Option 3: 9-patch

选项 3：9-patch

A final option is to use a 9-patch drawable like this one:

最后一个选择是使用像这样的 9-patch drawable：

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.

您可以在任何可以设置的视图上使用它android:background="@drawable/..."。是的，它确实需要是 6x6 - 我试过 5x5 但它没有用。

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 Shapedrawable, which isn't very powerful.

这种方法的缺点是你不能很容易地改变颜色，但是如果你想要花哨的边框（例如，只有顶部和底部的边框，就像在这个问题中一样）那么你可能无法使用Shapedrawable ，这不是很强大。

Option 4: Extra views

选项 4：额外的视图

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 empty Views above and below it like this:

如果您只想要视图上方和下方的边框，我忘了提及这个非常简单的选项。您可以将视图垂直放置LinearLayout（如果还没有），然后View在其上方和下方添加空的s，如下所示：

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

回答by Tigger

To add a 1dpwhite border at the bottom only and to have a transparent background you can use the following which is simpler than most answers here.

要1dp仅在底部添加白色边框并具有透明背景，您可以使用以下比此处的大多数答案更简单的方法。

For the TextViewor other view add:

对于TextView或其他视图添加：

android:background="@drawable/borderbottom"

And in the drawabledirectory add the following XML, called borderbottom.xml

并在drawable目录中添加以下 XML，称为borderbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#ffffffff" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

If you want a border at the top, change the android:top="-2dp"to android:bottom="-2dp"

如果你想在顶部有一个边框，改变android:top="-2dp"为android:bottom="-2dp"

The colour does not need to be white and the background does not need to be transparent either.

颜色不需要是白色，背景也不需要是透明的。

The solidelement may not be required. This will depend on your design (thanks V. Kalyuzhnyu).

该solid元素可能不是必需的。这将取决于您的设计（感谢 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.

基本上，此 XML 将使用矩形形状创建边框，然后将顶部、右侧和左侧推到形状的渲染区域之外。这仅留下底部边框可见。

回答by gregschlom

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.xmlwith the code below and assign it as a TextView's background property.

创建一个/res/drawable/top_bottom_borders.xml使用以下代码命名的 xml drawable 并将其指定为 TextView 的背景属性。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#DDDD00" /> <!-- border color -->
        </shape>
    </item>

    <item
        android:bottom="1dp" 
        android:top="1dp">   <!-- adjust borders width here -->
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />  <!-- background color -->
        </shape>
    </item>
</layer-list>

Tested on Android KitKat through Marshmallow

通过 Marshmallow 在 Android KitKat 上进行测试

回答by phreakhead

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:

所以我想做一些稍微不同的事情：仅在底部设置边框，以模拟 ListView 分隔线。我修改了 Piet Delport 的回答并得到了这个：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
      <shape 
        android:shape="rectangle">
            <solid android:color="@color/background_trans_light" />    

        </shape>
   </item>

    <!-- this mess is what we have to do to get a bottom border only. -->
   <item android:top="-2dp"
         android:left="-2dp"
         android:right="-2dp"
         android:bottom="1px"> 
      <shape 
        android:shape="rectangle">    
            <stroke android:width="1dp" android:color="@color/background_trans_mid" />
            <solid android:color="@null" />
        </shape>
   </item>

</layer-list>

Note using px instead of dp to get exactly 1 pixel divider (some phone DPIs will make a 1dp line disappear).

请注意使用 px 而不是 dp 来获得精确的 1 像素分隔符（某些手机 DPI 会使 1dp 线消失）。

回答by MattZ

Just as @Nic Hubbard said, there is a very easy way to add a border line.

正如@Nic Hubbard 所说，有一种非常简单的方法可以添加边界线。

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#000000" >
</View>

You can change the height and background color to whatever you want.

您可以将高度和背景颜色更改为您想要的任何颜色。

回答by vovahost

My answers is based on @Emile version but I use transparent color instead of solid.
This example will draw a 2dp bottom border.

我的答案基于@Emile 版本，但我使用透明色而不是纯色。
这个例子将绘制一个 2dp 的底部边框。

<?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="2dp"
                     android:color="#50C0E9" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item  android:bottom="2dp" >
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="@color/bgcolor" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

@color/bgcoloris the color of the background on wich you draw your view with border.

@color/bgcolor是你用边框绘制视图的背景颜色。

If you want to change the position of the border change the offset with one of:

如果要更改边框的位置，请使用以下之一更改偏移量：

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

or combine them to have 2 or more borders:

或将它们组合成 2 个或更多边框：

android:bottom="2dp" android:top="2dp"

回答by okaram

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.

您还可以将视图包装在 FrameLayout 中，然后将框架的背景颜色和填充设置为您想要的；但是，默认情况下 textview 具有“透明”背景，因此您也需要更改 textview 的背景颜色。

回答by Nic Hubbard

Why not just create a 1dp high view with a background color? Then it can be easily placed where you want.

为什么不创建一个带有背景颜色的 1dp 高视图？然后它可以很容易地放在你想要的地方。