Android'de dairesel gradyan

Ekranın ortasından beyaz renkte yayılan ve ekranın kenarlarına doğru hareket ederken siyaha dönen bir gradyan yapmaya çalışıyorum.

Bunun gibi "normal" bir gradyan oluştururken, farklı şekillerle deneyler yapıyorum:

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

"Oval" şekli kullanırken en azından yuvarlak bir şekil aldım, ancak gradyan etkisi olmadı. Bunu nasıl başarabilirim?'

Şunları kullanarak dairesel bir gradyan elde edebilirsiniz 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>

Yeni bir kavram öğrenirken görselleri her zaman yararlı buluyorum, bu yüzden bu tamamlayıcı bir cevap.

Bu %p, üst öğenin bir yüzdesi, yani, çekilebilirimizi ayarladığımız görünümün en dar boyutunun bir yüzdesi anlamına gelir. Yukarıdaki resimler gradientRadiusbu koddaki değiştirilerek oluşturulmuştur.

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>

Bunun gibi bir görünümün backgroundözniteliğine ayarlanabilir

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

merkez

Yarıçapın merkezini şu şekilde değiştirebilirsiniz:

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

ondalık sayılar için genişlik ve yükseklik kesirleri olduğu xve ysırasıyla.

belgeleme

İşte dokümantasyondan işleri biraz daha açıklayan bazı notlar .

android:gradientRadius

Renk geçişinin yarıçapı, yalnızca radyal renk geçişiyle kullanılır. Şeklin minimum boyutuna göre açık bir boyut veya kesirli bir değer olabilir.

"1.2" gibi bir kayan nokta değeri olabilir.

"14,5sp" gibi bir birimle eklenen kayan nokta sayısı olan bir boyut değeri olabilir. Kullanılabilir birimler şunlardır: px (piksel), dp (yoğunluktan bağımsız pikseller), sp (tercih edilen yazı tipi boyutuna göre ölçeklenmiş pikseller), inç (inç) ve mm (milimetre).

% Veya% p ile eklenen bir kayan nokta sayısı olan kesirli bir değer olabilir, "% 14.5" gibi. % Soneki her zaman temel boyutun yüzdesi anlamına gelir; isteğe bağlı% p soneki, bazı üst kapsayıcılara göre bir boyut sağlar.

Birden fazla renk ve konumlandırma gibi daha fazla kontrole ihtiyacınız varsa bunu kodda da yapabilirsiniz. Çekilebilir bir radyal gradyan oluşturmak için Kotlin pasajım:

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

Temel kullanım (ancak ek parametrelerle ayarlama yapmaktan çekinmeyin):

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

Sanırım android: centerColor eklemelisiniz

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

Bu örnek, beyazdan siyaha ve beyaza yatay bir gradyan gösterir.

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

İşte gradyan, sabit ve dairesel şekle sahip eksiksiz xml.

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

<!-- Drop Shadow Stack -->
<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 -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>