Android渐变边框？

Question

任务：

想要完成渐变BORDER...

起始颜色从蓝色圆圈边缘开始，结束颜色在红色环形边缘结束。

我尝试了椭圆形、环形和径向渐变。 我需要从圆的边缘（而不是从中心）开始并扩展到结束颜色的渐变。 我感兴趣的是甚至可以用径向渐变来做到这一点。 我错过了什么？

到目前为止，我是这样的：

<!-- Added shadow -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:width="85dp"
        android:height="85dp">

        <shape
            android:shape="ring"
            android:thickness="10dp"
            android:useLevel="false">

            <gradient
                android:endColor="@android:color/transparent"
                android:gradientRadius="37.5dp"
                android:startColor="@color/colorBlack"
                android:type="radial"></gradient>
        </shape>
    </item>

    <item
        android:width="64dp"
        android:height="64dp"
        android:left="11dp"
        android:top="11dp">

        <shape android:shape="oval">
            <solid android:color="@color/colorPrimaryBlue" />
        </shape>
    </item>
</layer-list>

输出：

原来的问题没有解决。 主要问题是径向渐变从圆心开始，而不是从边缘开始。

还有什么想法吗？

Answer 1

我了解您想要可以描述为圆盘周围的电晕，圆盘为纯色，电晕从圆盘边缘的黑色开始并径向过渡到透明。

我认为您需要使用constructors 为电晕实现一个可绘制的RadialGradient，它允许从磁盘中心指定颜色和色标。

Mark Allison 有一篇题为 RadialGradient – Gradients 的博客文章讨论了 RadialGradients 的使用及其实现。

您可以查看一个类似的实现，它在中心是透明的，从磁盘边缘的黑色开始，然后过渡到单独的颜色。您必须将黑色的起始位置计算为图像整体大小的一部分。

---

---

以下是产生所需效果的自定义可绘制对象：

class CoronaDrawable : Drawable() {
    private val mPaint = Paint()
    private var mRadius = 0f
    private val mColors =
        intArrayOf(Color.TRANSPARENT, Color.TRANSPARENT, Color.BLACK, Color.BLACK and 0xFFFFFF)
    private val mStops = floatArrayOf(0f, 0.85f, 0.85f, 1.0f)

    override fun onBoundsChange(bounds: Rect) {
        super.onBoundsChange(bounds)
        mRadius = min(bounds.width(), bounds.height()) / 2f
        mPaint.shader = shaderFactory(mRadius, mRadius, mColors, mStops)
    }

    override fun draw(c: Canvas) {
        c.drawCircle(mRadius, mRadius, mRadius, mPaint)
    }

    override fun setAlpha(alpha: Int) {
    }

    override fun setColorFilter(filter: ColorFilter?) {
    }

    override fun getOpacity(): Int {
        return PixelFormat.OPAQUE
    }

    private fun shaderFactory(centerX: Float, centerY: Float, colors: IntArray, stops: FloatArray) =
        RadialGradient(
            centerX, centerY, min(centerX, centerY), colors, stops, Shader.TileMode.CLAMP
        )
}

在 Android Studio 布局设计器中看起来像这样，作为一个简单 View 的背景：

这里的关键点是中心的空白区域设置为从透明过渡到透明，否则没有变化。这给出了空的中心。在半径的 85% 处，颜色突然变为黑色并过渡为透明黑色。

对于 API 24+，您可以按如下方式将此可绘制对象放入可绘制资源文件中，并像使用常规可绘制对象一样使用它。

corona.xml

<drawable class="com.example.radialgradientwithstops.CoronaDrawable"/>

您必须确定如何最好地将此可绘制对象合并到您的图层列表或应用中的其他表示方式中。

Answer 2

试试这个，使用渐变类型“sweep”：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="85dp"
        android:height="85dp">

        <shape
            android:shape="oval">

            <gradient
                android:endColor="@android:color/transparent"
                android:startColor="@color/black"
                android:type="sweep" />
        </shape>
    </item>

    <item
        android:width="64dp"
        android:height="64dp"
        android:left="11dp"
        android:top="11dp">

        <shape android:shape="oval">
            <solid android:color="@color/blue" />
        </shape>
    </item>
</layer-list>

Answer 3

试试这个

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

<!-- Drop Shadow -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background Color (white) -->
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/holo_blue_dark" />

        <corners android:radius="3dp" />
    </shape>
</item>
</layer-list>

但我建议使用具有椭圆形和高度的可绘制对象。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/white"/>
    </shape>
</item>
</layer-list>

android:elevation="@dimen/elevation_fab"

否则，FAB 也是一个 Ideal 推荐。