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

Question

我有一个 TextView，我想在它的顶部和底部边框上添加一个黑色边框。我尝试将android:drawableTopand添加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）？

score 451 · Accepted Answer

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

创建一个 xml 可绘制对象，例如 /res/drawable/textlines.xml 并将其分配为 TextView 的背景属性。

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

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

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

score 300 · Accepted Answer

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

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

score 114 · Accepted Answer

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

对于TextView或其他视图添加：

android:background="@drawable/borderbottom"

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

如果要在顶部添加边框，请将其更改android:top="-2dp"为android:bottom="-2dp"

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

该solid元素可能不是必需的。这将取决于您的设计（感谢 V. Kalyuzhnyu）。

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

score 100 · Accepted Answer

选项 1：形状可绘制

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

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

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

选项 2：背景视图

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

显然，这只有在视图没有任何透明区域时才能正常工作。如果是这样，我建议您编写一个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/..." />

如果您想知道，它确实适用于adjustViewBounds=true. RelativeLayout但是，如果您想在RelativeLayout整个View. 在那种情况下，我会推荐Shapedrawable。

选项 3：9 补丁

最后一种选择是使用像这样的 9-patch 可绘制对象：

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

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

选项 4：额外视图

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

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

score 40 · Accepted Answer

当前接受的答案不起作用。由于抗锯齿，它会在视图的左侧和右侧创建细的垂直边框。

这个版本完美运行。它还允许您独立设置边框宽度，您还可以根据需要在左侧/右侧添加边框。唯一的缺点是它不支持透明度。

创建一个/res/drawable/top_bottom_borders.xml使用以下代码命名的 xml 可绘制对象，并将其分配为 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>

通过 Marshmallow 在 Android KitKat 上测试

score 36 · Accepted Answer

所以我想做一些稍微不同的事情：仅底部的边框，以模拟 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>

请注意使用 px 而不是 dp 来获得恰好 1 个像素的分隔线（某些电话 DPI 会使 1dp 线消失）。

score 9 · Accepted Answer

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

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

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

score 9 · Accepted Answer

将文件添加到 res/drawable

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

将此文件上的链接添加到背景属性

score 8 · Accepted Answer

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

score 8 · Accepted Answer

我的答案基于@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/bgcolor是您用边框绘制视图的背景颜色。

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

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

或将它们组合为具有 2 个或更多边框：

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

score 5 · Accepted Answer

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

score 5 · Accepted Answer

要改变这一点：

<TextView
    android:text="My text"
    android:background="@drawable/top_bottom_border"/>

我更喜欢“drawable/top_bottom_border.xml”中的这种方法：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
</layer-list>

这只会制作边框，而不是在您的背景有颜色时出现的矩形。

score 5 · Accepted Answer

添加边框以使用插入边框的最简单方法InsetDrawable，以下将仅显示顶部边框：

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

        <solid android:color="@color/light_gray" />
        <stroke
            android:width=".5dp"
            android:color="@color/dark_gray" />
    </shape>
</inset>

score 4 · Accepted Answer

首先制作一个xml文件，内容如下图，命名为border.xml，放到res目录下的layout文件夹中

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#0000" />
    <padding android:left="0dp" android:top="1dp" android:right="0dp"
        android:bottom="1dp" />
</shape>

之后在代码里面使用

TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);

这将在 TextView 的顶部和底部形成一条黑线。

score 4 · Accepted Answer

只是将我的解决方案添加到列表中..

我想要一个延伸到原始形状之外的半透明底部边框（所以半透明边框在父矩形之外）。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape android:shape="rectangle" >      
      <solid android:color="#33000000" /> <!-- Border colour -->
    </shape>
  </item>
  <item  android:bottom="2dp" >
    <shape android:shape="rectangle" >     
      <solid android:color="#164586" />
    </shape>
  </item>
</layer-list>

这给了我；

在此处输入图像描述

score 4 · Accepted Answer

只需在顶部和底部添加视图View

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:gravity="center"
        android:text="Testing"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

score 4 · Accepted Answer

您可以通过此代码段执行此操作 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Minus (-) how much dp you gave in the stroke width from left right-->
    <item android:left="-10dp" android:right="-10dp">
        <shape
            android:shape="rectangle">
            <stroke android:width="10dp" android:color="@android:color/holo_red_dark" />
           <!--This is the main background -->
            <solid android:color="#FFDDDDDD" />
        </shape>
    </item>
</layer-list>

预览 -

score 3 · Accepted Answer

写下下面的代码

<View
    android:layout_width="wrap_content"
    android:layout_height="2dip"
    android:layout_below="@+id/topics_text"
    android:layout_marginTop="7dp"
    android:layout_margin="10dp"
    android:background="#ffffff" />

score 1 · Accepted Answer

尝试使用线性布局包装图像，并将其背景设置为您想要的文本周围的边框颜色。然后将 textview 上的填充设置为您想要的边框厚度。

score 1 · Accepted Answer

您还可以使用 9 路径来完成您的工作。创建它以使彩色像素的高度不会增加，而只会增加透明像素。

score 0 · Accepted Answer

// Just simply add border around the image view or view

<ImageView
                android:id="@+id/imageView2"
                android:layout_width="90dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/imageView1"
                android:background="@android:color/white"
                android:padding="5dip" />

// After that dynamically put color into your view or image view object

objView.setBackgroundColor(Color.GREEN);

//VinodJ/Abhishek

score 0 · Accepted Answer

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/light_grey1" />
<stroke
    android:width="1dip"
    android:color="@color/light_grey1" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

    </shape>

score -1 · Accepted Answer

<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

只需在要添加边框的文本下方添加此 TextView

score -1 · Accepted Answer

只是为了强制执行@phreakhead和user1051892 的答案，<item android:bottom|android:left|android:right|android:top>如果是否定的，必须大于<stroke android:width>. 如果没有，item 的绘画将与 stroke 的绘画混合，您可能会认为这些值不起作用。

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

24 回答 24

选项 1：形状可绘制

选项 2：背景视图

选项 3：9 补丁

选项 4：额外视图

Related

Reference