Kreisverlauf in Android

Ich versuche, einen Farbverlauf zu erstellen, der von der Mitte des Bildschirms in Weiß ausgeht und zu Schwarz wird, wenn er sich zu den Rändern des Bildschirms bewegt.

Da ich einen “normalen” Farbverlauf wie diesen mache, habe ich mit verschiedenen Formen experimentiert:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

Bei Verwendung der “Oval”-Form bekam ich immerhin eine runde Form, aber es gab keinen Verlaufseffekt. Wie kann ich das erreichen?’

Sie können einen kreisförmigen Farbverlauf mit erhalten android:type="radial":

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

Ich finde Bilder immer hilfreich, wenn ich ein neues Konzept lerne, daher ist dies eine ergänzende Antwort.

Das %p bedeutet einen Prozentsatz des übergeordneten Elements, d. h. einen Prozentsatz der engsten Dimension der Ansicht, auf die wir unser Drawable setzen. Die obigen Bilder wurden durch Änderung der generiert gradientRadius in diesem Code

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

Welches kann auf eine Ansicht eingestellt werden background Attribut wie dieses

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

Center

Sie können den Mittelpunkt des Radius mit ändern

android:centerX="0.2"
android:centerY="0.7"

wobei die Dezimalstellen Brüche der Breite und Höhe sind x und y beziehungsweise.

Dokumentation

Hier sind einige Notizen von Dokumentation etwas mehr erklären.

android:gradientRadius

Radius des Farbverlaufs, wird nur bei radialem Farbverlauf verwendet. Kann eine explizite Abmessung oder ein Bruchwert relativ zur Mindestabmessung der Form sein.

Kann ein Gleitkommawert sein, z. B. “1,2”.

Kann ein Dimensionswert sein, bei dem es sich um eine Fließkommazahl mit angehängter Einheit wie “14,5 sp” handelt. Verfügbare Einheiten sind: px (Pixel), dp (dichteunabhängige Pixel), sp (skalierte Pixel basierend auf der bevorzugten Schriftgröße), in (Zoll) und mm (Millimeter).

Kann ein Bruchwert sein, bei dem es sich um eine Fließkommazahl handelt, an die entweder % oder %p angehängt wird, z. B. “14,5 %”. Das %-Suffix bedeutet immer einen Prozentsatz der Basisgröße; Das optionale %p-Suffix stellt eine Größe relativ zu einem übergeordneten Container bereit.

Sie können dies auch im Code tun, wenn Sie mehr Kontrolle benötigen, z. B. mehrere Farben und Positionierung. Hier ist mein Kotlin-Snippet zum Erstellen eines zeichenbaren radialen Farbverlaufs:

object ShaderUtils {
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {

        override fun resize(width: Int, height: Int): Shader {
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        }
    }

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable {
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    }
}

Grundlegende Verwendung (kann aber mit zusätzlichen Parametern angepasst werden):

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

Hier ist das komplette XML mit Farbverlauf, Stoke und Kreisform.

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:width="5dp"/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android:width="200dp" android:height="200dp"/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/color1"
        android:gradientRadius="250dp"
        android:startColor="#8F15DA"
        android:type="radial" />

    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"
        android:radius="3dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="50dp" />
</shape>

Ich denke, Sie sollten android:centerColor hinzufügen

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

Dieses Beispiel zeigt einen horizontalen Verlauf von Weiß zu Schwarz zu Weiß.

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>