web-dev-qa-db-ja.com

androidの円形グラデーション

画面の中央から白で放射し、画面の端に向かって移動すると黒に変わるグラデーションを作成しようとしています。

このような「通常の」グラデーションを作成するとき、さまざまな形状を試しています。

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

「楕円」形状を使用すると、少なくとも丸い形状になりましたが、グラデーション効果はありませんでした。どうすればこれを達成できますか？」

androidgradient
93
pgsandstrom

Android:type="radial"を使用して円形グラデーションを取得できます。

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

新しい概念を学ぶとき、私はいつも画像が役立つと思うので、これは補足的な答えです。

enter image description here

%pは、親の割合、つまり、ドロアブルを設定したビューの最も狭い寸法の割合を意味します。上記の画像は、このコードのgradientRadiusを変更することにより生成されました

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>

このようにビューのbackground属性に設定できます

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

センター

半径の中心を変更するには

Android:centerX="0.2"
Android:centerY="0.7"

ここで、小数部は、それぞれxとyの幅と高さの分数です。

enter image description here

ドキュメンテーション

documentation からの注意事項をもう少し説明します。

Android:gradientRadius

グラデーションの半径。放射状グラデーションでのみ使用されます。明示的な寸法、または形状の最小寸法に相対的な小数値の場合があります。

「1.2」などの浮動小数点値の場合があります。

ディメンション値である場合があります。これは、「14.5sp」などの単位が追加された浮動小数点数です。使用可能な単位は、px（ピクセル）、dp（密度に依存しないピクセル）、sp（優先フォントサイズに基づいてスケーリングされたピクセル）、in（インチ）、mm（ミリメートル）です。

「14.5％」のように、％または％pが付加された浮動小数点数である小数値の場合があります。接尾辞％は、常に基本サイズの割合を意味します。オプションの％pサフィックスは、親コンテナに相対的なサイズを提供します。

77
Suragch

複数の色や配置など、より多くの制御が必要な場合は、コードで行うこともできます。以下は、描画可能な放射状グラデーションを作成するための私のKotlinスニペットです。

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

基本的な使用法（ただし、追加のパラメーターで自由に調整できます）：

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)
2
Gasper Kolenc
<gradient
    Android:centerColor="#c1c1c1"
    Android:endColor="#4f4f4f"
    Android:gradientRadius="400"
    Android:startColor="#c1c1c1"
    Android:type="radial" >
</gradient>
1
Nazmul

グラデーション、ストローク、円形の完全な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>
1
Shihab Uddin

Android：centerColorを追加する必要があると思います

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

この例では、白から黒、白への水平方向のグラデーションを表示します。

1
dhesse
<!-- 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>
0
CHirag RAmi