形状可绘制为背景，底部有一条线

Posted 2023-04-15

【中文标题】形状可绘制为背景，底部有一条线

【英文标题】：Shape drawable as background, a line at the bottom

【发布时间】：2012-04-12 12:49:12

【问题描述】：

我使用可绘制对象作为 TextView 的背景，只是为了在文本下方有一条分隔线。 A 用这个 drawable-xml 实现了它：

<?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="#FFDDDDDD" />
            <gradient 
                android:angle="0"
                android:startColor="#FFAAAAAA"
                android:endColor="#FFEEEEEE"
                />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape 
        android:shape="rectangle">
            <solid android:color="#FF000000" />
        </shape>
    </item>

</layer-list>

但是这个方法在黑色矩形上方绘制了一个彩色矩形。我想在形状底部有一条没有黑色矩形的线，因为黑色不透明。我怎样才能做到这一点？

【问题讨论】：

看起来有点矫枉过正。为什么不只使用彩色视图？

同样适用 - 我将如何在该视图的底部添加一条细线？

这就是我的意思，视图就是线。 <View android:backgroundColor="#FF000000" android:layout_height="2dp" android:layout_width="fill_parent"/>

啊，好吧，那不是背景，它是一个非常薄的视图，它本身就是线条！稍后会尝试。不过，如果知道如何在可绘制的 xml 中底部对齐某些内容，那就太好了。

一般来说，除非绝对必要，否则我会尽量少弄乱背景，因为这样做会覆盖具有焦点、按下等状态的默认背景颜色。

【参考方案1】：

这就是我在底部找到一条线的方式。绘制一个笔划，然后将项目向上和向两侧移动以使顶部和侧面不显示笔划：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-8dp" android:left="-8dp" android:right="-8dp">
        <shape> 
            <solid android:color="#2b7996"/>
            <stroke android:color="#33b5e5" android:/>
        </shape>
    </item>
</layer-list>

【讨论】：

我听起来像是 OP 想要避免在实心区域出现颜色。就是这样。用#00000000 代替#2b7996，实体可以是透明的。 8 位十六进制值指定前两位的 alpha。

我喜欢这个方案，在RecyclerView中作为item的分隔线很有用，可以减少一层布局。

摆脱 <solid android:color="#2b7996"/> 给了我想要的结果，只有下划线（至少在 Galaxy S4 (Kit Kat) 上......不确定其他设备）。

如果我想要颜色 = 透明怎么办

它工作正常，但如何实现拐角半径:(

【参考方案2】：

我认为这是更好的解决方案：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="bottom">
        <shape>
            <size android: />
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

【讨论】：

此解决方案适用于几乎所有设备，除了三星 Lollipop 设备。整个视图使用solid 标签中提供的颜色绘制。由于三星的市场份额，这一点不容忽视。

此解决方案也不适用于 Nexus 4 / API 22 和 Emulator / API 19。可能仅从 API 23 开始支持。

【参考方案3】：

一般来说，除非绝对必要，否则我会尽量少弄乱背景，因为这样做会覆盖具有焦点、按下等状态的默认背景颜色。我建议只使用额外的视图（在垂直 LinearLayout ) 就是你需要的那样厚。例如：

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

【讨论】：

嗯我不太相信你的解决方案，因为它需要额外的布局和额外的视图，两者都是水平线的重物......如果你们对背景过敏，为什么不覆盖 onDraw() 并画一条线？

ahahahahaha 很简单，很精彩。我试过做一个简单的底线背景，但没有成功。为什么我不这么认为？谢谢

是的，没有。您应该使用尽可能少的视图，只为视图背景添加一个视图效率极低，并且只应在屏幕上几乎没有任何内容的琐碎情况下使用。

覆盖背景可能是一个不错的解决方案，只要您还使用选择器来绘制最重要的状态，例如按下或选中。

【参考方案4】：

通常用于类似的任务 - 我创建了像这样的可绘制图层列表：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
    </shape>
</item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

这个想法是，首先你用 underlineColor 绘制矩形，然后在这个矩形之上你用实际的 buttonColor 绘制另一个矩形，但应用了 bottomPadding。它总是有效的。

但是当我需要让 buttonColor 透明时，我无法使用上面的可绘制对象。我找到了另一种解决方案

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom" android:/>
</layer-list>

（如您在此处看到的，mainButtonColor 是透明的，而 white_box 只是一个简单的可绘制白色实体的矩形）

【讨论】：

android:gravity="bottom" 需要最低 API 23 才能工作。

【参考方案5】：

使用此解决方案，您可以在任何需要不同线路的地方使用。我的要求只是下划线。即使您可以为布局提供不同的颜色。你可以在下图中看到，白线

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

    <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/white" android:/>
        </shape>
    </item>

    <item android:top="-5dp" android:bottom="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:/>
        </shape>
    </item>

    <item android:bottom="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:/>
        </shape>
    </item>

    <item android:top="-5dp" android:left="-5dp" android:bottom="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:/>
        </shape>
    </item>

    <item android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="5dp">
        <shape>
            <solid android:color="@color/colorPrimary"/>

            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>
</layer-list>

【参考方案6】：

这是上面的一个稍微轻一点的变体。

/drawable/rect_highlight.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android: android:color="@color/colorHighlight"/>
</shape>

/drawable/underline.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="-1px" android:insetRight="-1px" android:insetTop="-1px" android:drawable="@drawable/rect_highlight"/>

用法：

<TextView ... android:background="@drawable/underline"/>

这不是我的，是比我聪明的人想出来的。如果我更聪明，我会问谁。 :)

【参考方案7】：

此解决方案适用于我需要类似功能的大多数情况。

<?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="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:
        android:gravity="bottom">
        <shape>
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

【参考方案8】：

一个简单的解决方案是扩展一个 TextView，然后覆盖 onDraw。

@Override
protected void onDraw(Canvas canvas) 
    super.onDraw(canvas);
    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(getContext(),R.color.colorTextUnderLine));
    paint.setStrokeWidth(10);
    canvas.drawLine(0.0f,canvas.getHeight(),canvas.getWidth(),canvas.getHeight(),
            paint);