文章/答案/技术大牛

发布

社区首页 >问答首页 >安卓梯度边界？

问安卓梯度边界？
EN

Stack Overflow用户

提问于 2020-12-03 15:37:13

回答 3查看 1.1K关注 0票数 1

任务：

想要完成梯度边界..。

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

我试过用椭圆形，环和径向梯度。我需要从圆的边缘开始的渐变(而不是从中心开始)并扩展到最后的颜色。我感兴趣的是，用径向梯度甚至可以做到这一点。我遗漏了什么？

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

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

产出：

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

还有其他想法吗？

android

gradient

radial-gradients

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-12-08 13:38:08

我知道你想要的东西可以被描述为圆盘周围的电晕，圆盘有一个坚实的颜色，电晕从磁盘边缘的黑色开始，径向地过渡到透明。

我认为您需要使用RadialGradient实现一个可绘制的日冕图，该建设者允许在磁盘中心指定颜色和颜色停止。

Mark有一篇名为RadialGradient梯度的博客文章，讨论了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布局设计器中作为简单视图的背景如下所示

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

对于API 24+，您可以按如下方式将此可绘制放入可绘制的资源文件中，并将其作为常规可绘制文件使用。

corona.xml

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

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

票数 1

Stack Overflow用户

发布于 2020-12-03 15:49:52

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

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

票数 1

Stack Overflow用户

发布于 2020-12-07 18:00:22

尝尝这个

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65129103

复制

相似问题

问安卓梯度边界？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问安卓梯度边界？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问安卓梯度边界？
EN