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

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

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

试试这个

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

Answer 3

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

我认为您需要使用 RadialGradient using the constructors 为 corona 实现一个可绘制对象，允许从圆盘中心指定颜色和色标。

Mark Allison 有一篇名为 RadialGradient – Gradients 的博客 post，其中讨论了 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"/>

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

Android 渐变边框？

Android Gradient border?

android

gradient

radial-gradients