Gradient tròn trong Android

Tôi đang cố tạo một gradient phát ra từ giữa màn hình bằng màu trắng và chuyển sang màu đen khi nó di chuyển về phía các cạnh của màn hình.

Khi tôi tạo một gradient "bình thường" như thế này, tôi đã thử nghiệm với các hình dạng khác nhau:

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

Khi sử dụng hình dạng "hình bầu dục", ít nhất tôi đã có một hình tròn, nhưng không có hiệu ứng chuyển màu. Làm thế nào tôi có thể đạt được điều này?'

Bạn có thể nhận được một gradient tròn bằng cách sử dụng 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>

Tôi luôn thấy hình ảnh hữu ích khi học một khái niệm mới, vì vậy đây là một câu trả lời bổ sung.

Có %pnghĩa là tỷ lệ phần trăm gốc, nghĩa là phần trăm kích thước hẹp nhất của bất kỳ chế độ xem nào mà chúng tôi đặt có thể vẽ được. Các hình ảnh trên được tạo bằng cách thay đổi gradientRadiusmã trong mã này

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>

Cái nào có thể được đặt trên backgroundthuộc tính của chế độ xem như thế này

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

Trung tâm

Bạn có thể thay đổi tâm của bán kính với

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

trong đó số thập phân là phân số của chiều rộng và chiều cao cho xvà ytương ứng.

Tài liệu

Dưới đây là một số lưu ý từ tài liệu giải thích thêm một chút.

android:gradientRadius

Bán kính của gradient, chỉ được sử dụng với radial gradient. Có thể là một thứ nguyên rõ ràng hoặc một giá trị phân số so với kích thước tối thiểu của hình dạng.

Có thể là một giá trị dấu phẩy động, chẳng hạn như "1,2".

Có thể là một giá trị thứ nguyên, là một số dấu phẩy động được nối với một đơn vị chẳng hạn như "14,5sp". Các đơn vị khả dụng là: px (pixel), dp (pixel không phụ thuộc vào mật độ), sp (pixel được chia tỷ lệ dựa trên kích thước phông chữ ưa thích), in (inch) và mm (milimét).

Có thể là một giá trị phân số, là một số dấu phẩy động được thêm vào với% hoặc% p, chẳng hạn như "14,5%". Hậu tố% luôn có nghĩa là một tỷ lệ phần trăm của kích thước cơ sở; hậu tố% p tùy chọn cung cấp kích thước liên quan đến một số vùng chứa mẹ.

Bạn cũng có thể làm điều đó trong mã nếu bạn cần kiểm soát nhiều hơn, ví dụ như nhiều màu và định vị. Đây là đoạn mã Kotlin của tôi để tạo một gradient xuyên tâm có thể vẽ được:

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

Cách sử dụng cơ bản (nhưng hãy điều chỉnh với các thông số bổ sung):

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

Tôi đoán bạn nên thêm 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>

Ví dụ này hiển thị một gradient ngang từ trắng sang đen sang trắng.

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

Đây là xml hoàn chỉnh với gradient, stoke & hình tròn.

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