有一个简单的方法来添加一个边界的顶部和底部的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" />

有没有一种方法可以轻松地添加一个顶部和底部边界的视图(特别是TextView)在Android?

484525 次浏览
小开

你也可以将视图包装在FrameLayout中，然后设置框架的背景颜色和填充为你想要的;然而，textview，默认情况下有一个“透明”的背景，所以你需要改变textview的背景颜色。

小开
最佳答案

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

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

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

/ res /可拉的/ 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的纯色被复制到了第二个形状的描边颜色中。

小开

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

小开

首先创建一个内容如下所示的xml文件，并将其命名为border.xml，并将其放置在res目录中的布局文件夹中

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

小开

你也可以使用9条路径来完成你的工作。创建它，使彩色像素的高度不相乘，但只有透明像素。

小开

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

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

选项1:Shape Drawable

这是最简单的选项，如果你想在布局或视图周围设置一个边框，你可以在其中设置背景。在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中有一个背景，它就不起作用了，因为有一个错误会阻止你用View填充RelativeLayout。在这种情况下，我建议使用Shape可绘制对象。

选项3:9-patch

最后一个选项是使用一个9补丁的可绘制图，如下图所示:

< img src = " https://i.imgur.com/6hQyT.png " / >

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

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

选项4:额外的视图

我忘记提到这个非常简单的选项，如果你只想让边界在视图的上方和下方。你可以把你的视图放在一个垂直的LinearLayout中(如果它还不是的话)，然后在它的上面和下面添加空的Views，如下所示:

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

我的答案是基于@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 /背景是背景的颜色，你可以在上面绘制视图的边框。

如果你想改变边界的位置，用以下方法之一改变偏移量:

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

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

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

只需添加这个TextView下面的文本，你想添加的边界

小开

所以我想做一些稍微不同的事情:在底部唯一的边界，模拟一个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像素的分隔线(一些手机DPIs会使1dp线消失)。

小开

为什么不直接用背景色创建一个1dp高视图呢?然后它可以很容易地放在你想要的地方。

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

就像@Nic Hubbard说的，有一个非常简单的方法来添加边界线。

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

你可以改变高度和背景颜色为任何你想要的。

小开

写下下面的代码

<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" />
小开

只是把我的解决方案添加到列表中。

我想要一个半透明的底部边框，延伸到原来的形状(所以半透明边框是外父矩形)。

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

这给了我;

enter image description here

小开

为了只在底部添加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将使用矩形形状创建边框，但随后将顶部、右侧和左侧推到形状的渲染区域之外。这样只留下底部边界可见。

小开

要改变这一点:

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

这只是使边界，而不是一个矩形，将出现，如果你的背景有颜色。

小开

目前接受的答案行不通。作为抗锯齿的结果，它在视图的左右两侧创建了薄的垂直边界。

这个版本工作得很完美。它还允许你独立地设置边界宽度，如果你愿意，你也可以在左边/右边添加边界。唯一的缺点是它不支持透明性。

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

在Android KitKat和Marshmallow平台上进行测试

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

为了强制执行@phreakhead´s和user1051892´s答案，<item android:bottom|android:left|android:right|android:top>如果为负，必须大于<stroke android:width>。如果不是，项目的绘画将与笔触的绘画混合，您可能认为这些值不工作。

小开

添加边框的最简单方法是使用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>
小开

简单地在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>
小开

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

将此文件中的link添加到< em > < / em >的背景属性

小开

您可以通过以下代码片段来实现这一点-

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

预览,

enter image description here

小开

基于Pi Delport和Emile的公认答案，我将其简化了一些

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>  <!--divider TOP and BOTTOM-->
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="@color/divider" />
</shape>
</item>


<!--background surface-->
<item
android:top="1dp"
android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="@color/background" />
</shape>
</item>

提交答案