Android布局透明布局背景带下划线

Question

我正在尝试创建一个布局背景可绘制对象，它只有1-2dp高度的渐变下划线，其余部分是透明的，因此上部将具有父元素的背景。

以下是我所拥有的。

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

<!-- underline color -->
<item>
    <shape>
        <gradient
            android:startColor="@color/colorPrimaryDark"
            android:endColor="#FFFFFFFF"
            android:centerY="0.5"
            android:angle="0"/>


    </shape>
</item>


<!-- main color -->
<item android:bottom="2.5dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/white" />
        <padding
            android:top="4dp"
            android:bottom="4dp" />
    </shape>
</item>

如果我将“主要颜色”中的实心颜色更改为透明，则整个背景将使用“下划线颜色”设置。

- swizes

---

https://stackoverflow.com/a/52430856/1581034 - nupadhyaya

不幸的是，这对我所要实现的目标没有帮助。渐变必须是水平的，而不是垂直的。 - swizes

据我所知，您需要一个下划线，对吗？ - nupadhyaya

可能是Shape Drawable作为背景，底部的一条线的重复问题。 - Bö macht Blau

Answer 1

如果遮盖渐变图层的颜色是不透明的，那么您使用的创建视图底部线条的技术就可以使用。您想要做的是应用一个透明图层来替换（擦除）底层渐变。它不是这样工作的：透明覆盖会保留底层颜色，这里是渐变。

以下是可供API 23+使用的备用图层列表绘制：

underline_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="bottom">
        <shape>
            <size android:height="2dp" />
            <gradient
                android:angle="0"
                android:centerY="0.5"
                android:endColor="#FFFFFFFF"
                android:startColor="@color/colorPrimaryDark" />
        </shape>
    </item>
</layer-list>

以下是它的外观:

在API 23之前，您可以使用以下自定义可绘制对象，但必须在代码中设置。

GradientUnderline.java

public class GradientUnderline extends Drawable {
    private Shader mShader;
    private final Paint mPaint;
    private int mHeight = -1;
    private int mStartColor = Color.BLACK;
    private int mEndColor = Color.WHITE;
    private int mLastWidth;

    public GradientUnderline() {
        mPaint = new Paint();
    }

    public GradientUnderline(int lineHeight, int startColor, int endColor) {
        mPaint = new Paint();
        mHeight = lineHeight;
        mStartColor = startColor;
        mEndColor = endColor;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (mShader == null || getBounds().width() != mLastWidth) {
            mLastWidth = getBounds().width();
            mShader = new LinearGradient(0, 0, getBounds().width(), mHeight, mStartColor,
                                         mEndColor, Shader.TileMode.CLAMP);
            mPaint.setShader(mShader);
        }
        canvas.drawRect(0, getBounds().height() - mHeight, getBounds().width(),
                        getBounds().height(), mPaint);
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.OPAQUE;
    }
}

我最初错过了android:gravity的可用性，因为它没有在“Drawable Resources”页面中提到。但是，在LayerDrawable文档中提到了它。

- Cheticamp

Answer 2

为什么会出现问题：第一个项目的形状将在整个区域内绘制渐变。在将颜色设置为第二个项目后，将隐藏顶部项目区域，除了底部的2.5dp。因此，每当您将透明颜色设置为第二个项目时，它会自动显示渐变区域的顶级项目。

这里我建议使用的方法是，在视图中设置固定高度。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="47dp">
<shape>
<gradient
    android:startColor="@color/colorPrimaryDark"
    android:endColor="#FFFFFFFF"
    android:centerY="0.5"
    android:angle="0"/>

</shape>
</item>

</layer-list>

View.xml

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/bottom_line">

</RelativeLayout>

根据您的需要更改大小..！

输出

- Mohamed Mohaideen AH