如何使用 svg 而不是 png 实现 Android 启动画面？

Question

我制作 RN 应用程序。对于我制作的Android版本 /drawable/splash_screen.xml 包含以下内容

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

  <item
    android:drawable="@color/gray"/>

  <item>
    <bitmap
      android:gravity="center"
      android:src="@mipmap/ic_launcher"/>
  </item>

</layer-list>

并在 res/values/styles.xml 中链接到该文件

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

也在 AndoirdManifest.xml 中

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:theme="@style/SplashTheme"
    android:screenOrientation="landscape"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

这很好用，但我想制作 SVG 文件而不是 PNG（mipmap/ic_launcher）。 SVG 文件可能是这样的 https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html （至少没有动画）。 如何做到这一点？

Answer 1

Android Studio 中默认的 SVG 导入器不能很好地工作，所以我建议使用 SVG 到 VectorDrawable 转换器，例如 svg2android。

现在我们需要使用 svg2android 生成的代码创建一个可绘制文件。

res/drawable --> 新建 --> 可绘制资源文件 --> 将矢量代码粘贴到那里

在splash_screen.xml 上，我们需要使用我们的向量添加一个项目 作为drawable，gravity 设置为center。

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

    <!-- background with solid color -->
    <item android:drawable="@android:color/white"/>

    <!-- logo -->
    <item
        android:drawable="@drawable/your_logo"
        android:gravity="center"/>

</layer-list>

-- 已编辑（2019 年 12 月）--

正如@petyr 在 cmets 中指出的那样，svg2android 现在已被弃用，但正如@Krisztián 所建议的那样，Respresso Image Converter 几乎可以做 svg2android 可以做的所有事情。 只需将 SVG 图像添加到其中，将其保留在 auto 中，它就会生成与 Android 兼容的 SVG。

Answer 2

在xml文件中你只需要使用drawable属性而不是位图标签

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

  <item android:drawable="@color/gray"/>

  <item android:drawable="@mipmap/ic_launcher"/>

</layer-list>

Answer 3

第一次转换为 xml，第二次命名为 svg 中的托管元素。 (VectorDrawable) android_svg.xml:

   <vector android:height="400dp" android:viewportHeight="206.132".....>
   ...............
    <path android:name = "arrow"
        android:fillColor="#00000000"
        android:pathData="M 47.30268,56.147897 37.688314,45.379807"
        android:strokeAlpha="1" android:strokeColor="#151414"
        android:strokeLineCap="butt" android:strokeLineJoin="miter" android:strokeWidth="1"/>
   </vector>

第三次使用AnimatedVectorDrawable对VectorDrawable进行动画处理：

 <animated-vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        ............................>
    <target android:name="arrow">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="pathData"
                    android:valueFrom="M 47.30268,56.147897 37.688314,45.379807"
                    android:valueTo=  "M 47.30268,56.147897 37.688314,45.379807"
                    android:valueType="pathType"
                    tools:targetApi="lollipop" />
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="pathData"
                    android:valueFrom="M 47.30268,56.147897 37.688314,45.379807"
                    android:valueTo=  "M 47.30268,56.147897 57.686195,45.187519"
                    android:valueType="pathType"
                    tools:targetApi="lollipop" />
            </set>

        </aapt:attr>
    </target>
</animated-vector>

这里是https://www.ap-impulse.com/animaciya-svg-dlya-web-i-android-splash-screen-shag-105/，用于说明如何使用上述内容。 这是项目本身https://github.com/nik137/Diagnostics

Answer 4

您好，您可以按照以下步骤将您的 svg 导入到您的项目中：

1. 在android studio中右键drawable文件夹。
2. 选择新建 > 矢量绘图 > 本地文件
3. 导入后文件会复制到drawable文件夹中。

4. 现在你可以像这样引用drawable了

   <item
       android:drawable="@color/off_white"/>
   
   <item>
       <bitmap
           android:gravity="center"
           android:src="@drawable/yoursvg"/>
   </item>
   

在此之后，您应该能够在屏幕上看到您的图像。如果对您有帮助，请测试并接受它作为答案。