การไล่ระดับสีแบบวงกลมใน 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>

เมื่อใช้ "วงรี" - รูปร่างอย่างน้อยฉันก็มีรูปทรงกลม แต่ไม่มีเอฟเฟกต์การไล่ระดับสี ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? '

คุณสามารถรับการไล่ระดับสีแบบวงกลมโดยใช้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>

ฉันมักจะพบว่าภาพมีประโยชน์เมื่อเรียนรู้แนวคิดใหม่ดังนั้นนี่จึงเป็นคำตอบเพิ่มเติม

%pหมายถึงร้อยละของผู้ปกครองที่เป็นร้อยละของมิติที่แคบที่สุดของสิ่งที่ดูเราตั้งอยู่บน drawable ของเรา ภาพด้านบนสร้างขึ้นโดยการเปลี่ยน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ตามลำดับ

เอกสารประกอบ

ต่อไปนี้เป็นบันทึกย่อบางส่วนจากเอกสารอธิบายสิ่งต่างๆเพิ่มเติมเล็กน้อย

android:gradientRadius

รัศมีของการไล่ระดับสีใช้กับการไล่ระดับสีแบบรัศมีเท่านั้น อาจเป็นมิติข้อมูลที่ชัดเจนหรือค่าเศษส่วนที่สัมพันธ์กับมิติต่ำสุดของรูปร่าง

อาจเป็นค่าทศนิยมเช่น "1.2"

อาจเป็นค่ามิติซึ่งเป็นตัวเลขทศนิยมที่ต่อท้ายด้วยหน่วยเช่น "14.5sp" หน่วยที่ใช้ได้ ได้แก่ px (พิกเซล), dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น), sp (พิกเซลที่ปรับขนาดตามขนาดตัวอักษรที่ต้องการ), นิ้ว (นิ้ว) และมม. (มิลลิเมตร)

อาจเป็นค่าเศษส่วนซึ่งเป็นตัวเลขทศนิยมที่ต่อท้ายด้วย% หรือ% p เช่น "14.5%" คำต่อท้าย% หมายถึงเปอร์เซ็นต์ของขนาดฐานเสมอ ส่วนต่อท้าย% p ที่เป็นทางเลือกระบุขนาดที่สัมพันธ์กับคอนเทนเนอร์หลักบางส่วน

นอกจากนี้คุณยังสามารถทำได้ในรหัสหากคุณต้องการการควบคุมเพิ่มเติมเช่นหลายสีและการวางตำแหน่ง นี่คือตัวอย่าง 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)

ฉันเดาว่าคุณควรเพิ่ม 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>

ตัวอย่างนี้แสดงการไล่ระดับสีในแนวนอนจากสีขาวเป็นสีดำเป็นสีขาว

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

นี่คือ 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>