0

我是在 Android Studio 中创建应用程序的初学者,我正在尝试重新创建在 Figma 中制作的背景。

Figma 中的背景

Figma 中的背景

属性

Rotation: 179.7°
Fill: Linear Gradient
#23152C @ 0.0
#828F8893 @ 0.49
#00FFFFFF @ 1.0
Fill: Solid
#120A16
Effect: Drop Shadow
Radius: 4dp
Offset: 0dp, 4dp
#40000000

在Android Studio中多次尝试重新创建背景后,我发现问题在于颜色不重叠,#00FFFFFF应该将透明白色替换为纯色#120A16

来自drawables文件夹的background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/solid_grad"/>
    <gradient
        android:startColor="@color/gradientStart"
        android:centerColor="@color/gradientCenter"
        android:endColor="@color/solid_grad"
        android:type="linear"
        android:angle="90" >

    </gradient>

</shape>

值文件夹中的颜色.xml

<resources>
    <color name="gradientStart">#23152C</color>
    <color name="gradientCenter">#828F8893</color>
    <color name="gradientEnd">#00FFFFFF</color>
    <color name="solid_grad">#120A16</color>
</resources>

结果

在此处输入图像描述

有谁知道如何将渐变与纯色重叠?

PS:由于屏幕尺寸种类繁多和性能原因,我不想从 Figma 导出背景并将其导入 Android。

4

1 回答 1

1

这是我的解决方案:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/gradient"
    >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient2">
</RelativeLayout>
</RelativeLayout>

来自drawables文件夹的gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#120A16"
        android:startColor="#120A16"
        android:angle="90" />

</shape>

来自drawables文件夹的gradient2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#00FFFFFF"
        android:centerColor="#828F8893"
        android:startColor="#23152C"
        android:angle="90"/>
</shape>

我知道它可以用不同的方式做得更好,但这与我在css中使用 2 DIV的方式类似,如果你有更好的方法,请告诉我。我的项目也需要这个。

于 2019-11-13T00:18:56.667 回答