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

Posted 2023-04-18

【中文标题】如何在线性布局的一侧绘制边框？

【英文标题】：How to draw border on just one side of a linear layout?

【发布时间】：2012-03-01 22:39:29

【问题描述】：

我可以为线性布局绘制边框，但它被绘制在各个方面。我只想将其限制在右侧，就像您在 CSS 中所做的那样（border-right:1px solid red;）。

我已经尝试过了，但它仍然吸引了各方：

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

【参考方案1】：

您可以使用它来获取一侧的边框

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

已编辑

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

查看我的github 获取完整源代码。

【讨论】：

如果您想要一个基于 Alpha 的纯色并带有底部边框怎么办？我一直在想用 Android Drawable XML api 解决这个问题，但我想不通。

这对我不起作用——奇怪的是，与我想要在里面更深的颜色相反，我为寄宿生覆盖了灰色渐变。一直在考虑制作一个特定大小的可绘制矩形，以将其作为 drawableLeft 放在项目上。这似乎没有简化。

@jbenowitz：layer-list 中项目的顺序更重要。如果你反转，那么你会得到那些结果。

我已通过在边框颜色和保持按钮颜色的形状中添加笔触来解决此问题。成功了。

【参考方案2】：

简单易行，允许透明背景：

<?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 = 顶部

【讨论】：

这是迄今为止最好的答案，可惜没有投票

很好，但我当然不会将其描述为“像馅饼一样容易”。

如果您需要更厚的边框或需要多边的边框，这不起作用。

@codeman - 将其用作视图的背景，然后它将继承其高度。

如何调整笔画或边框宽度？

【参考方案3】：

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

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

</layer-list>

这种方式只有左边框可见，但您可以通过使用item 元素的bottom、left、right 和top 属性来实现任意组合

【讨论】：

当你有其他背景颜色并且你想用边框覆盖这个可绘制的背景时，这绝对有用。 (y)

正是我需要的，但是使用负填充是否正确？

这是最好的解决方案。我正在烦恼 -5dp 在那里做什么。

负填充在 html/CSS 中很常见。它只是将事情推向另一个方向。根据我的经验，它似乎在 Android 中也完全有效。

如果您的布局有clipChildren=false 或clipToPadding=false，则使用负边距的实现效果不佳。如果是这种情况，您可以使用两个重叠矩形的解决方案，就像 Vivek Khandelwal 提出的那样

【参考方案4】：

要在可绘制对象的一侧获得边框，请将负数 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: android:color="#FF0000" />
        <solid android:color="#000000" />
    </shape>

</inset>

这种方法类似于 naykah 的回答，但没有使用 layer-list。

【讨论】：

这是 IMO 的最佳答案

非常好的答案，我只需要将宽度和插图更改为 10dp :) 而且，我需要左侧边框，所以我将 android:insetLeft 更改为 android:insetRight。很简单！保持材料按钮点击：D

正是我需要的，更改顶部的insertX 以决定显示哪些边框，哪些不显示。

我什至可以拥有@null 的纯色，然后这种方法不会导致透支。天才。谢谢！

注意：这将改变您的视图内容并调整其大小。小心使用。

【参考方案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:
             android:color="#70b23f" />
         <solid android:color="@android:color/transparent" />
     </shape>
     
</inset>

【讨论】：

迄今为止对我来说最好的

这是我见过的最可靠的答案。谢谢——

【参考方案6】：

作为替代方案（如果您不想使用背景），您可以通过如下方式轻松地做到这一点：

<View
    android:layout_
    android:layout_
    android:background="#000000" />

如果只有右边框，请将其放在布局之后（您想要边框的位置）：

<View
    android:layout_
    android:layout_
    android:background="#000000" />

如果只有左边框，请将其放在布局之前（您想要边框的位置）：

为我工作...希望对您有所帮助....

【参考方案7】：

我用下面的代码就可以达到效果

<?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: android:color="#123456" />
        </shape>
    </item>
</layer-list>

你可以通过改变位移方向来调整你对边框位置的需要

【参考方案8】：

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

【参考方案9】：

这里没有提到 nine-patch 文件。是的，您必须创建文件，但是这很容易，而且它确实是“跨版本和透明度支持”的解决方案。如果文件被放置到drawable-nodpi 目录，它基于px 工作，并且在drawable-mdpi 中大约作为dp 基础工作（感谢重新采样）。

原始问题的示例文件（border-right:1px solid red;）在这里：

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

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

【参考方案10】：

不同颜色的边框。我用了 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>

【参考方案11】：

您可以包装到容器中并定义从左下角开始的边距。 假设您想为左侧提供边距，您可以这样做

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="@color/light_blue"
    >
    <TextView
        android:marginStart="2dp" // This is Your border
        android:layout_
        android:layout_
        android:background="@color/white"
        android:padding="16dp"
        android:text="a"
        android:textColor="@color/light_blue"
        android:textSize="25dp" />
</RelativeLayout>