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

Question

我有一个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)中添加顶部和底部边框？

Answer 1

在android 2.2中你可以做到以下几点.

创建一个xml drawable,例如/res/drawable/textlines.xml,并将其指定为TextView的background属性.

<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的纯色以第二个形状描边颜色复制.

Answer 2

我使用了一个技巧,以便边框显示在容器外面.使用此技巧只会绘制一条线,因此将显示底层视图的背景.

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

Answer 3

选项1:形状可绘制

如果您想在布局或视图周围设置边框,则可以设置背景,这是最简单的选项.在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>

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,因为有一个错误阻止你填充RelativeLayouta View.在那种情况下,我会推荐Shapedrawable.

选项3:9补丁

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

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

这种方法的缺点是你不能很容易地改变颜色,但是如果你想要花哨的边框(例如只有顶部和底部的边框,就像这个问题那样)那么你可能无法用Shape可绘制的边框来做,这不是很强大.

选项4:额外的观点

如果您只想在视图的上方和下方设置边框,我忘了提及这个非常简单的选项.您可以将视图放在垂直方向LinearLayout(如果还没有),然后View在其上方和下方添加空白,如下所示:

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

Answer 4

要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将使用矩形形状创建边框,但随后将顶部,右侧和左侧推到形状的渲染区域之外.这样只留下底部边框.

Answer 5

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

这个版本很完美.它还允许您独立设置边框宽度,如果需要,还可以在左/右侧添加边框.唯一的缺点是它不支持透明度.

创建一个以/res/drawable/top_bottom_borders.xml下面的代码命名的xml drawable ,并将其指定为TextView的background属性.

<?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上测试

Answer 6

所以我想做一些稍微不同的事情:仅在底部的边框,以模拟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线消失).

Answer 7

正如@Nic Hubbard所说,有一种非常简单的方法来添加边界线.

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

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

Answer 8

您还可以将视图包装在FrameLayout中,然后将框架的背景颜色和填充设置为您想要的内容; 但是,默认情况下,textview具有"透明"背景,因此您还需要更改textview的背景颜色.

Answer 9

我的答案基于@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"

Answer 10

将文件添加到 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>

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

Answer 11

添加边框以插入边框的最简单方法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>

Answer 12

您可以通过以下代码片段来做到这一点 -

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

预览 -

Answer 13

为什么不创建一个背景色的1dp高视图？然后它可以轻松放置在您想要的位置.

Answer 14

要改变这一点：

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

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