如何在线性布局的一侧绘制边框?


185

我能够将边框绘制为线性布局,但它的四面都被绘制了。我只想将其限制在右侧,就像在CSS中一样(border-right:1px纯红色;)。

我已经尝试过了,但是它仍然可以吸引所有方面:

<?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:height="2dp"
            android:width="2dp"
            android:color="#FF0000" />

        <solid android:color="#000000" />

        <padding
            android:bottom="0dp"
            android:left="0dp"
            android:right="1dp"
            android:top="0dp" />

        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="5dp"
            android:radius="1dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="0dp" />
    </shape>
</item>

关于如何做到这一点的任何建议?

顺便说一句,我不想​​使用将宽度为1dp的视图放在所需侧面的技巧。


您可以在布局中使用drawableLeft
njzk2 2012年

Answers:


358

您可以使用它在一侧获得边框

<?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="#FF0000" />
    </shape>
</item>
<item android:left="5dp">
    <shape android:shape="rectangle">
        <solid android:color="#000000" />
    </shape>
</item>
</layer-list>

已编辑

因为包括我在内的许多人都希望有一个透明背景的一侧边框,所以我实现了a BorderDrawable,它可以像使用css一样为我提供具有不同大小和颜色的边框。但这不能通过xml使用。为了支持XML,我添加了一个BorderFrameLayout可以包装您的布局的文件。

请参阅我的github以获取完整的源代码。


5
如果您想要带有底边框的基于纯Alpha的颜色怎么办?我一直在考虑使用Android Drawable XML API解决此问题的方法,但我不知道。
Mario Lenci

这对我不起作用-奇怪的是我想要内部更深的颜色的反色,我为寄宿生覆盖了灰色渐变。一直在考虑使矩形以一定大小可绘制,以将drawableLeft放在项目上。这似乎没有简化。
jbenowitz

@jbenowitz:层列表中项目的顺序更为重要。如果你反向,那么你会得到那些结果。
Vivek Khandelwal

我通过添加边框颜色和保留按钮颜色的形状来解决此问题。做到了。
jbenowitz

242

像馅饼一样容易,允许透明bg:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#f00"
        android:centerColor="@android:color/transparent"
        android:centerX="0.01" />
</shape>

更改角度以更改边框位置:

  • 0 =左
  • 90 =底部
  • 180 =正确
  • 270 =最高

19
这是到目前为止最好的答案,太糟糕了,它不能被接受
mittelmania 2014年

11
很好,但是我当然不会形容它“像馅饼一样容易”。
funkybro 2014年

7
如果需要较粗的边框或需要多面边框,则此方法将无效。
全息原理

1
@codeman-使用它作为您视图的背景,然后它将继承其高度。
Oded Breiner 2015年

2
如何调整笔触或边框的宽度?
Ruturaj Patil

101

也可以使用单层实现您想要的

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

    <item
        android:bottom="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/color_of_the_background" />

            <stroke
                android:width="5dp"
                android:color="@color/color_of_the_border" />
        </shape>
    </item>

</layer-list>

这样,只有左边框是可见的,但你可以通过打达到你想要的任意组合bottomleftrighttop的属性item元素


3
当您有其他背景色并且想要将此可绘制bg用边框覆盖时,这绝对有用。(y)
Aung Pyae 2014年

3
正是我所需要的,但是使用负填充是否正确?
IlyaEremin 2015年

1
这是最好的解决方案。我很烦-5dp在这里做什么。
阿米特·库玛

1
负填充在HTML / CSS中很常见。它只是将事物推向另一个方向。以我的经验,它在Android中似乎也完全有效。
spaaarky21 '17

如果您的布局具有clipChildren = false或clipToPadding = false,则使用负边距的实施效果不佳。如果是这样的话,你可以使用该解决方案有两个重叠的长方形,就像提出的Vivek Khandelwal
赫苏斯·巴雷拉

79

要仅在可绘制对象的一侧获得边框inset,请将负数应用于其他3面(使这些边框在屏幕外绘制)。

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

    <shape android:shape="rectangle">
        <stroke android:width="2dp" android:color="#FF0000" />
        <solid android:color="#000000" />
    </shape>

</inset>

在此处输入图片说明

此方法类似于naykah的答案,但不使用layer-list


4
这是IMO的最佳答案
James James

很好的答案,我只需要将width和inset更改为10dp :)而且,我需要在左侧添加边框,因此我将android:insetLeft更改为android:insetRight。很简单!保持材料按钮单击:D
Phuong

正是我需要的,insertX在顶部更改以决定显示哪些边框,什么不边框。
CularBytes

我什至可以使用纯色@null,然后此方法不会导致透支。天才。谢谢!
Unknownweirdo

2
注意:这将转移视图的内容并调整其大小。小心使用。
vovahost

7

作为替代方案(如果您不想使用背景),可以通过如下所示的视图轻松实现:

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

对于仅具有右边框,请将其放置在布局之后(您要具有边框的位置)之后:

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

对于仅具有左边框,请将其放置在布局之前(要具有边框的位置):

为我工作...希望能有所帮助...


6

我可以通过以下代码达到效果

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

您可以通过更改位移方向来适应边界位置的需要


5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#f28b24" />
            <stroke
                android:width="1dp"
                android:color="#f28b24" />
            <corners
                android:radius="0dp"/>
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f28b24"
                android:endColor="#f28b24"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="#f28b24" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

5

另一个很好的例子 例

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:insetRight="-2dp">

     <shape android:shape="rectangle">
         <corners
             android:bottomLeftRadius="4dp"
             android:bottomRightRadius="0dp"
             android:topLeftRadius="4dp"
             android:topRightRadius="0dp" />
         <stroke
             android:width="1dp"
             android:color="@color/nasty_green" />
         <solid android:color="@android:color/transparent" />
     </shape>

</inset>

2

这里没有提及九补丁文件。是的,您必须创建文件,但是这非常容易,并且它确实是“ 跨版本和透明性支持 ”解决方案。如果将文件放置在drawable-nodpi目录中,则它px基于作品,并且在drawable-mdpi作品中大致以dp为基础(感谢重新采样)。

原始问题的示例文件(border-right:1px实心红色;)在这里:

http://ge.tt/517ZIFC2/v/3?c

只需将其放置在drawable-nodpi目录中即可。


1

不同颜色的边框。我用了3个项目。

<?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/colorAccent" />
        </shape>
    </item>
    <item android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_grey" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>
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.