Android梯度边界？_Android_Gradient_Radial Gradients

Android梯度边界？

android

Android梯度边界？,android,gradient,radial-gradients,Android,Gradient,Radial Gradients,任务：想完成梯度边界开始颜色从蓝色圆圈边缘开始，结束颜色在红色圆环边缘结束我尝试了椭圆形、环形和径向渐变。我需要的梯度，从边缘的圆圈，而不是从中心开始，并扩大到结束的颜色。我感兴趣的是，它甚至可以做径向梯度。我错过了什么到目前为止，我是这样做的：  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

任务：

想完成梯度边界

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

我尝试了椭圆形、环形和径向渐变。我需要的梯度，从边缘的圆圈，而不是从中心开始，并扩大到结束的颜色。我感兴趣的是，它甚至可以做径向梯度。我错过了什么

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

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

输出：

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

还有其他想法吗？

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

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

尝试使用渐变类型扫描：

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

试试这个

<?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也是一个理想的建议。

试试这个

<?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也是一个理想的建议。

我知道您希望磁盘周围有一个可以描述为电晕的东西，磁盘为纯色，电晕从磁盘边缘的黑色开始，然后径向过渡到透明

我认为您需要为corona实现一个可绘制的，使用允许从磁盘中心指定颜色和颜色挡块的

Mark Allison有一篇题为“讨论径向梯度的使用及其实现”的博客文章

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

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

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布局设计器中将其作为简单视图的背景：

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

对于API24+，您可以按如下方式将此可绘制资源文件放入可绘制资源文件中，并像普通可绘制资源文件一样使用它

corona.xml

您必须确定如何最好地将此可绘制内容纳入您的图层列表或应用程序中的其他表示方式。

我知道您想要的是磁盘周围的光晕，磁盘为纯色，光晕从磁盘边缘的黑色开始，并过渡到透明放射状的

我认为您需要为corona实现一个可绘制的，使用允许从磁盘中心指定颜色和颜色挡块的

Mark Allison有一篇题为“讨论径向梯度的使用及其实现”的博客文章

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

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布局设计器中将其作为简单视图的背景：

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

对于API24+，您可以按如下方式将此可绘制资源文件放入可绘制资源文件中，并像普通可绘制资源文件一样使用它

corona.xml

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

不，结果是这样的：结果就是您上面描述的结果。渐变在笔划中开始和结束。如果这不是你想要的，那么请描述清楚哦，是的，你是对的。这个问题可以用两种方式来理解。我将编辑它，但最初的意图是从蓝色圆圈边缘到红色圆圈边缘进行某种线性渐变。这个答案意外地得到了赏金，我的错误，保持坚强。不，结果是这样的：结果就是你上面描述的。渐变在笔划中开始和结束。如果这不是你想要的，那么请描述清楚哦，是的，你是对的。这个问题可以用两种方式来理解。我将编辑它，但最初的意图是从蓝色圆圈边缘到红色圆圈边缘进行某种线性渐变。这个答案意外地得到了赏金，我的错误，保持坚强。没有正确理解你的问题。看看你们是这样搜索的吗？我看起来和我的输出图像很相似，其中开始颜色是黑色a

nd端颜色是透明的。其中“开始颜色”从蓝色圆圈边缘开始。例如，对于您的输出，它应该是从白色到红色。您不能正确理解您的问题。看看你们是这样搜索的吗？我看起来和我的输出图像很相似，开始颜色是黑色，结束颜色是透明的。其中“开始颜色”从蓝色圆圈边缘开始。例如，对于您的输出，它应该从白色变为红色。立面不适用于椭圆形，可能适用于材质fab按钮，但@Cheticamp的答案经过测试，并适用于自定义颜色，因此我将按答案进行设置。立面不适用于椭圆形，可能适用于材质fab按钮，但是来自@Cheticamp的答案是经过测试的，并且可以使用自定义颜色，所以我会按照答案来做。答案非常棒。是的，这实际上就是任务的内容，也是我想要的，24以下API的背景可以通过编程设置，这样就可以不用资源文件夹来完成。我想给+50声誉，给这个答案，不小心给了另一个答案，不能撤销它。@I.Step很高兴听到它。我想知道为什么悬赏给了另一个答案，而不是这个答案，如果这是被接受的答案。再一次，我很抱歉，我希望不会犯同样的错误两次。我没有阅读你的第一条评论，或者你后来编辑了它。不用担心，回答得很好。是的，这实际上就是任务的内容，也是我想要的，24以下API的背景可以通过编程设置，这样就可以不用资源文件夹来完成。我想给+50声誉，给这个答案，不小心给了另一个答案，不能撤销它。@I.Step很高兴听到它。我想知道为什么悬赏给了另一个答案，而不是这个答案，如果这是被接受的答案。再一次，我很抱歉，我希望不会犯同样的错误两次。我没有阅读你的第一条评论，或者你后来编辑了它。不过别担心。