Android의 원형 그래디언트

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="250"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

---

나는 항상 새로운 개념을 배울 때 도움이되는 이미지를 발견하기 때문에 이것은 보충 답입니다.

이는 %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각각.

선적 서류 비치

다음은 좀 더 설명 하는 문서의 몇 가지 참고 사항입니다 .

android:gradientRadius

방사형 그래디언트에서만 사용되는 그래디언트의 반경입니다. 명시 적 치수이거나 모양의 최소 치수에 상대적인 분수 값일 수 있습니다.

"1.2"와 같은 부동 소수점 값일 수 있습니다.

차원 값일 수 있으며 "14.5sp"와 같은 단위가 추가 된 부동 소수점 숫자입니다. 사용 가능한 단위는 px (픽셀), dp (밀도 독립 픽셀), sp (기본 글꼴 크기에 따라 조정 된 픽셀), in (인치) 및 mm (밀리미터)입니다.

"14.5 %"와 같이 % 또는 % p가 추가 된 부동 소수점 숫자 인 분수 값일 수 있습니다. % 접미사는 항상 기본 크기의 백분율을 의미합니다. 선택적 % 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>

참고 URL : https://stackoverflow.com/questions/2470072/circular-gradient-in-android