为啥我的 SVG 图像在设备 API 16 和 API 27 中看起来很模糊

Posted 2023-04-18

【中文标题】为啥我的 SVG 图像在设备 API 16 和 API 27 中看起来很模糊

【英文标题】：Why my SVG image looks blurry in device API 16 and API 27为什么我的 SVG 图像在设备 API 16 和 API 27 中看起来很模糊

【发布时间】：2018-10-17 11:03:18

【问题描述】：

我通过 android Studio 生成了一个 96x96 的 SVG 图像。

然后，我在以下布局中应用 SVG 文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center">

    <LinearLayout
        android:padding="8dp"
        android:id="@+id/linear_layout"
        android:layout_
        android:layout_
        android:clickable="true"
        android:background="?selectableItemBackgroundBorderless"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/image_view"
            android:duplicateParentState="true"
            android:clickable="false"

            android:layout_
            android:layout_
            android:scaleType="fitXY"
            app:srcCompat="@drawable/ic_content_paste_black_24dp" />
        <TextView
            android:id="@+id/text_view"
            android:layout_marginTop="8dp"
            android:duplicateParentState="true"
            android:clickable="false"

            android:layout_
            android:layout_
            android:text="@string/tap_to_add_note"
            android:textSize="24sp" />
    </LinearLayout>

</LinearLayout>

请注意，

我在ImageView 中使用app:srcCompat 我已添加vectorDrawables.useSupportLibrary = true，如https://***.com/a/35795933/72437 中所述 我使用android:scaleType="fitXY"，如https://***.com/a/35930518/72437 中所述

在 API 27 和 API 16 中看起来都很模糊。

API 27

API 16

注意

您会注意到图标是灰色而不是黑色。这是因为我已经申请了

DrawableCompat.setTint(this.imageView.getDrawable(), greyIconColor);

但是，我不确定为什么 API 16 没有显示为灰色。

我的 build.gradle 文件看起来像

build.gradle

apply plugin: 'com.android.application'

android 
    compileSdkVersion 27
    defaultConfig 
        applicationId "com.yocto.noteplus"
        minSdkVersion 14
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        vectorDrawables.useSupportLibrary = true
    

dependencies 
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support:gridlayout-v7:27.1.1'

SVG 文件

我的 SVG 文件内容是

<vector android: android:viewportHeight="24.0"
    android:viewportWidth="24.0" android: xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M19,2h-4.18C14.4,0.84 13.3,0 12,0c-1.3,0 -2.4,0.84 -2.82,2L5,2c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,4c0,-1.1 -0.9,-2 -2,-2zM12,2c0.55,0 1,0.45 1,1s-0.45,1 -1,1 -1,-0.45 -1,-1 0.45,-1 1,-1zM19,20L5,20L5,4h2v3h10L17,4h2v16z"/>
</vector>

---

补充说明

您可以运行实际设备来查看模糊效果，也可以使用 Logcat 中的截屏来查看模糊效果。

请问，为什么我的 SVG 图像在设备 API 16 和 API 27 中看起来很模糊？

【问题讨论】：

看看这对***.com/questions/36016596/…，***.com/questions/34936590/…，***.com/questions/26548354/…是否有帮助

我在运行 API 16（Pixel 6）的 Android Studio 模拟器和另一个运行 API 27（Pixel 5X）的模拟器上尝试了您的布局和矢量可绘制，图像清晰。您能否 1) 更具体地说明您在哪里看到模糊图像？这些是真实的设备还是仿真？什么样的仿真或设备？，以及，2）可能会提出一个表现出模糊性的项目？ 16 和 27 以外的 API 上的图像是否清晰？否则很难找到问题。

@Cheticamp 你需要在真机上运行，​​或者使用 Logcat 中的 Screen Capture 来查看模糊效果。查看我更新的问题。

我建议将矢量的android:height/android:width 更改为与android:viewportHeight/android:viewportWidth 相同。在你的情况下android:height="24dp" 和android:width="24dp"。图像仍将是 96dp x 96dp 因为您将该大小应用于 ImageView

发现一部运行 API 16 的旧 LG 手机。不幸的是，该设备和屏幕截图中的图形看起来清晰锐利，因此问题不仅仅在于 API 16。跨度>

【参考方案1】：

我以前也遇到过类似的问题。在我的情况下，这是由于 drawable 文件夹下的 SVG 和 PNG 文件都带有 same name。

如下所示，我有ic_content_paste_black_24dp.png 和ic_content_paste_black_24dp.xml (SVG)。

所以当我们指定时：

app:srcCompat="@drawable/ic_content_paste_black_24dp" />

系统感到困惑并选择了PNG 文件，因为没有指定file extension。

Android 应考虑允许指定文件扩展名以避免此类混淆。

【讨论】：

没错！我是多么粗心，让这样的问题发生。现在重新检查我的项目，我意识到在创建另一个具有相同名称的 SVG 之前，我之前包含 5 个不同的 dpi PNG。谢谢舒恩！