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


407

我有一个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)添加上下边框?


2
令人惊讶的是,没有人提到dividerVertical!这是Android为实现垂直分隔符而创建的东西。很简单,您可以在Android Studio的“设计”所见即所得面板中进行所有操作。
Fattie 2014年

注意dividerVertical在API 11开始实施
JPM

1
也许您可以展示如何使用dividerVertical?
androidguy

Answers:


430

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

创建一个XML可绘制对象,例如/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的纯色被复制为第二个形状的笔触颜色。


11
也看到这个解决方案,如果你希望所有周围的边框也适用于TextViews,:stackoverflow.com/questions/3263611/...
emmby

26
尝试使用android:color="@null"以避免不透明的背景问题。
MattBriançon

@emmby:在平板电脑上测试此代码时,在滚动显示1秒钟边框后需要花一些时间才能在屏幕上呈现
Chetan 2012年

5
android:color =“ @ null”技巧对我来说,并不是为了保持透明度,而只是在视图的一侧显示边框。下面来自user1051892的回答完成了工作!
里克·帕斯托

8
此解决方案在左侧和右侧也形成了边框-尽管边框较细。
AlikElzin-kilaka

279

我使用了一个技巧,使边框显示在容器外部。使用此技巧时,仅画一条线,因此将显示基础视图的背景。

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

3
这对我来说非常有效,并进行了一些调整,使生产线更细一些。
杰夫

1
这是非常好的技巧,尽管如果我们不必为了完成任务而欺骗计算机,它可能会更好。
福泽由纪夫(Yukio Fukuzawa)

做得很好!您应该注意的是物品的左,上,右,下应该-(行程的宽度)dp
asakura89 2013年

没有显示任何边框-只是使我的视图内容显得更小:(
AlikElzin-kilaka 2013年

1
做得很好,使用透明背景。在2.2和4.4.2中测试。应该涵盖了这两者之间的全部时间:)
HumaN 2013年

97

选项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,因为存在一个错误,该错误使您无法RelativeLayout用填充View。在这种情况下,我建议使用Shapedrawable。

选项3:9片

最后一种选择是使用9补丁可绘制对象,如下所示:

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

这种方法的缺点是您不能很容易地更改颜色,但是如果您想要精美的边框(例如,仅此顶部和底部的边框,如本问题所示),则可能无法使用Shapedrawable 进行更改。,它不是很强大。

选项4:额外的意见

如果您只需要视图上方和下方的边框,我会忘记提及这个非常简单的选项。您可以将视图垂直放置LinearLayout(如果尚未放置),然后View在其上方和下方添加empty ,如下所示:

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

4
9补丁和可绘制形状都可以,但是我建议不要添加视图或图像视图来解决此类问题。原因是您应该从布局中删除尽可能多的<elements>以改善布局重绘和动画效果。我将这些剥离出来马上和实现一些类似选项1或2
埃米尔·

2
@Emile是的,但是如果使用的自定义ListView不支持分隔线,则可以使用简单的View。对性能的影响几乎为零,尤其是在您确定减小布局深度的情况下。它还可以避免跨设备使用ListView分隔符的错误(我已经看到一些忽略此属性的设备)。
汤姆(Tom)

您还可以将有效的Viewholder模式与listviews一起使用,以确保减少对findViewByID的调用次数,这通常是导致列表性能不佳的原因。
Emile

在iOS中,只有一种方法可以做到这一点。在android上,您应该至少测试四个,在我的情况下,选择4是可行的方法。有时将可绘制对象作为背景挂起进行渲染,请注意。
Ratata Tata

1
为什么android没有最简单的解决方案呢?就像其他语言一样,例如HTML,CSS或JavaFX,WPF……
Asif Mushtaq

95

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将使用矩形形状创建边框,但是将顶部,右侧和左侧推到该形状的呈现区域之外。这样只剩下底部边框可见。


8
这是最好的解决方案,因为它不会像其他方法那样产生透支
Greg Ennis,2016年

是否有理由使(-2dpvs 1dp)的负位比笔划大两倍?当它们的数量(-11)相等时,似乎可以正常工作。
丹尼斯·克尼亚热夫

@DenisKniazhev:使用-2dp结果时总是干净的。我认为有一个测试用例,结果不干净。我不记得它是低密度屏幕还是高密度屏幕,甚至是旧版本的Android(也许是2.x)。
Tigger

有趣。您是否知道这是否是一般情况,例如我4dp是否将笔画宽度-8dp用于定位?
丹尼斯·克尼亚热夫

1
@DenisKniazhev :(从内存中)它看起来像一个浮点计算,大小或多或少。这意味着-5dp宽度值为所需的全部值为4pd。它只是需要更大一点,以克服浮动值的不准确性。
Tigger

36

当前接受的答案无效。由于抗锯齿,它会在视图的左侧和右侧创建细的垂直边框。

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

创建一个/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上测试


如何使内部透明?
Hitesh Sahu

1
@HiteshSahu我认为这样做的缺点是您必须将布局的背景与此处的小部件的背景相匹配
chntgomez16'7

35

因此,我想做些不同的事情:仅在底部的边框模拟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的行消失)。


2
亲!的值是"@color/background_trans_light"多少?
Shajeel Afzal

干杯@phreakhead,这实际上对我有用!没有顶部,左侧或右侧边框。正是我需要的,谢谢!
shanehoban 2014年

2
请解释一下为什么在放-2dp时消失,而在放-1dp时仍然可见?谢谢!
弗朗西斯科·罗梅罗2015年

9

就像@Nic Hubbard所说的,有一种添加边框线的非常简单的方法。

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

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


8

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

7

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


很简单 您可以通过内部View的边距控制轮廓的大小和方向。谢谢。
Scott Biggs

5

为什么不只创建具有背景色的1dp高视图?然后可以轻松将其放置在所需位置。


4

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

我想要一个超出原始形状的半透明底部边框(因此,半透明边框位于父矩形的外部)。

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

这给了我;

在此处输入图片说明


4

要更改此设置:

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

这只会形成边框,如果背景为彩色,则不会显示矩形。


3

首先制作一个具有如下所示内容的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的顶部和底部形成一条黑线。


是的,它可以工作,我已经检查了。按钮button =(按钮)findViewById(R.id.button); button.setBackgroundResource(R.layout.border);
Nikhil Dinesh 2012年

我在上面的xml文件中使用了黑色,您的背景色可能是黑色,请尝试使用其他颜色。它绝对可以正常工作<?xml version =“ 1.0” encoding =“ UTF-8”?> <shape xmlns:android =“ schemas.android.com/apk/res/android ”> <solid android:color =“#474848 “ /> <stroke android:width =” 1dp“ android:color =”#ffff00“ /> <padding android:left =” 1dp“ android:top =” 1dp“ android:right =” 1dp“ android:bottom =” 1dp“ /> </ shape>
Nikhil Dinesh

1
没为我工作。边界线绘制在文本视图的中间-水平。
AlikElzin-kilaka

3

写下下面的代码

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

2

这是一种实现方法。

    <?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="@color/grey_coaching_text" />
            </shape>
        </item>

        <item
            android:bottom="1dp"
            android:top="1dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

第一项用于笔画,第二项用于纯色背景。隐藏左右边界。


2

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

2

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

将此文件上的链接添加到后台属性


1

尝试使用线性布局包装图像,然后将其背景设置为所需的文本周围的边框颜色。然后将textview上的padding设置为边框所需的厚度。


1

您还可以使用9条路径完成您的工作。创建它以使彩色像素不会在高度上相乘,而只会在透明像素上相乘。


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

1

只需在页面顶部和底部添加视图 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>

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

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

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


-1

只是为了强制使用@phreakheaduser1051892的答案(<item android:bottom|android:left|android:right|android:top>如果否定的话)必须大于<stroke android:width>。否则,项目的绘画将与笔触的绘画混合在一起,您可能会认为这些值不起作用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.