Gradient kołowy w Androidzie
Próbuję stworzyć gradient, który emituje od środka ekranu w kolorze białym i zmienia kolor na czarny, gdy porusza się w kierunku krawędzi ekranu.
Kiedy robię taki "normalny" gradient, eksperymentuję z różnymi kształtami:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
android:angle="270"/>
</shape>
Przy użyciu "owalnego" kształtu otrzymałem przynajmniej Okrągły kształt, ale nie było efektu gradientu. Jak mogę to osiągnąć?'
7 answers
Możesz uzyskać okrągły gradient używając 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-03-26 15:04:04
Zawsze uważam, że obrazy są pomocne podczas uczenia się nowej koncepcji, więc jest to odpowiedź uzupełniająca.
%p
oznacza procent rodzica, to znaczy procent najwęższego wymiaru dowolnego widoku, na którym ustawiamy nasz drawable. Powyższe obrazy zostały wygenerowane przez zmianę gradientRadius
w tym kodzie
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>
Które można ustawić na atrybucie widoku background
Jak to
<View
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@drawable/my_gradient_drawable"/>
Center
Możesz zmienić środek promienia za pomocą
android:centerX="0.2"
android:centerY="0.7"
Gdzie dziesiętne są ułamkami szerokości i wysokości odpowiednio dla x
i y
.
Dokumentacja
Oto kilka uwag z dokumentacji wyjaśniających nieco więcej rzeczy.
android:gradientRadius
Promień gradientu, używany tylko z gradientem radialnym. Może być wymiar jawny lub wartość ułamkowa względem kształtu minimalny wymiar.
Może być wartością zmiennoprzecinkową, np. "1.2".
Może być wartością wymiaru, która jest liczbą zmiennoprzecinkową z jednostką taką jak "14.5 sp". Dostępne jednostki to: px (piksele), dp (piksele niezależne od gęstości), sp (skalowane piksele w oparciu o preferowane rozmiar czcionki), w (cale) i mm (milimetry).
Może być wartością ułamkową, która jest liczbą zmiennoprzecinkową z % lub %p, np. " 14,5%". Przyrostek % zawsze oznacza a procent wielkości bazowej; opcjonalny przyrostek %p podaje rozmiar względem jakiegoś kontenera nadrzędnego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-01 15:51:19
Możesz również zrobić to w kodzie, jeśli potrzebujesz większej kontroli, na przykład Wielu kolorów i pozycjonowania. Oto mój fragment Kotlina, aby utworzyć rysowalny gradient promieniowy:
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
}
}
Podstawowe użycie (ale możesz dostosować za pomocą dodatkowych paramów):
view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-03 06:56:57
Myślę, że powinieneś dodać Androida: 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>
Ten przykład wyświetla poziomy gradient od bieli do czerni do bieli.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-18 13:29:18
<gradient
android:centerColor="#c1c1c1"
android:endColor="#4f4f4f"
android:gradientRadius="400"
android:startColor="#c1c1c1"
android:type="radial" >
</gradient>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-23 04:09:15
Oto kompletny xml z gradientem, stoke i okrągłym kształtem.
<?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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-29 11:19:27
<!-- 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-01 10:26:54