如何获得android渐变中心光效果？

Posted 2023-04-14

【中文标题】如何获得android渐变中心光效果？

【英文标题】：how to get android gradient center light effect?

【发布时间】：2013-11-01 18:00:42

【问题描述】：

我想要类似下面的图片

我尝试使用可绘制形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
    android:angle="360"
    android:centerX="50%"
    android:centerY="50%"

    android:gradientRadius="50%"
    android:endColor="#000000"
    android:centerColor="#FFFFFF"
    android:startColor="#000000" >
</gradient>
</shape> 

【参考方案1】：

在您的可绘制文件夹中创建一个新的 Android xml 文件（比如 GreyRadial.xml）文件

在你的 xml 文件中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

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

</shape>

在你的布局背景中使用这个xml

android:background="@drawable/GreyRadial"

【讨论】：

图片中的渐变是椭圆的，但是这个是圆形的。

【参考方案2】：

可以使用多个矩形形状在图层列表中近似效果。使用具有中心背景颜色的实心矩形。然后使用开始和结束颜色相同的两个渐变。使中心颜色也相同，除了将 alpha 设置为零。

在下面的代码中，颜色如下：

@color/background_dark = #ffb8860b
@color/background_light = #ffd2b48c
@color/transparent = #00b8860b

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape >
            <solid android:color="@color/background_light"/>
        </shape>
    </item>

    <item>
        <shape>
            <gradient 
                android:startColor="@color/background_dark"
                android:centerColor="@color/transparent"
                android:endColor="@color/background_dark"
                android:angle="45"/>
        </shape>
    </item>

    <item>
        <shape>
            <gradient 
                android:startColor="@color/background_dark"
                android:centerColor="@color/transparent"
                android:endColor="@color/background_dark"
                android:angle="135"/>
        </shape>
    </item>

</layer-list>

【讨论】：

这应该是公认的答案...完美运行

【参考方案3】：

另一种解决方案：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="@android:color/black"
        android:gradientRadius="100%"
        android:startColor="@android:color/transparent"
        android:type="radial"/>
</shape>

【讨论】：

警告即使这是一个很好的解决方案，它也会崩溃（甚至在 Android 5.0 上重新启动整个手机！）在 API

@computerjulian，谢谢！在 API 16 中，19 个模拟器在使用“100%”时显示正确，但在 API 21 中当 android:gradientRadius="100%" 出现异常“java.lang.IllegalArgumentException：radius must be > 0”时崩溃。所以我换成了100%p。 android:centerX 和 centerY 留在 50%。

【参考方案4】：

如果你需要的椭圆的纵横比是固定的，那么你可以使用渐变drawable作为背景，使用scaleX或scaleY将它拉伸成椭圆。

可绘制的 myradial.xml：

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle">
       <!--Radial gradient centered at middle of top with glow color-->
       <gradient
           android:startColor="FF336699"
           android:endColor="00000000"
           android:centerX="50%"
           android:centerY="50%"
           android:gradientRadius="50%"
           android:type="radial"/>
   </shape>

使用它作为背景查看

   <View
       android:layout_
       android:layout_
       android:background="@drawable/myradial"
       android:scaleX="0.5"
       />

如果纵横比不固定，仍然可以在运行时在代码中设置 scaleX。

这并不适用于所有情况下的每个人。它可以制作棘手的布局。一件好事是它是一个单一的渲染通道，相比之下，非常优雅的解决方案的 3 个通道在一个实体上发布了 2 个线性渐变。它还可以用于拉伸任何渐变，例如以 22.5 度角创建线性渐变。

【参考方案5】：

这是我对问题的解决方案。

<shape android:shape="rectangle">

 <gradient
     android:endColor="@color/your_dark_color"
     android:startColor="@color/your_light_color"
     android:type="radial"
     android:gradientRadius="700"/>

通过更改android:gradientRadius的值，我能够得到准确的结果。