Question

我想在Android Activity（ConstraintLayout）中通过ImageView添加一些图像，在Android Studio预览屏幕上，它正确显示图像，但是当我在真实设备或模拟器上运行应用程序时，它没有显示图像。

以下是我正在使用的代码，

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.vchamps.android.staffast.ProfessionalsCalc"
    android:background="@color/colorPrimary">

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineVertical1"
        app:layout_constraintGuide_percent="0.1"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="39dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineVertical2"
        app:layout_constraintGuide_percent="0.25"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="96dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineHorizontal"
        app:layout_constraintGuide_begin="87dp"
        android:orientation="horizontal"
        tools:layout_editor_absoluteY="87dp"
        tools:layout_editor_absoluteX="0dp" />

    <ImageView
        android:visibility="visible"
        android:id="@+id/imgRate"
        android:layout_width="@dimen/rates_icon_size"
        android:layout_height="@dimen/rates_icon_size"
        app:srcCompat="@drawable/icon_rates"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal"
        android:layout_marginTop="27dp"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
        />
    <ImageView
        android:visibility="visible"
        android:id="@+id/imgSchedule"
        android:layout_width="@dimen/rates_icon_size"
        android:layout_height="@dimen/rates_icon_size"
        app:srcCompat="@drawable/icon_schedule"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/imgRate"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
        android:scaleType="fitCenter"
         />

    <ImageView
        android:visibility="visible"
        android:id="@+id/imgPayout"
        android:layout_width="36dp"
        android:layout_height="36dp"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
        app:srcCompat="@drawable/icon_payout"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/imgSchedule"
        android:scaleType="fitCenter"
        />

    <TextView
        android:id="@+id/tvRate"
        style="@style/fontRateScreenTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="33dp"
        android:text="Industry Leading Rates"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical2"
        app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal" />

    <TextView
        android:id="@+id/tvSchedule"
        style="@style/fontRateScreenTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="44dp"
        android:text="Flexible Schedule"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical2"
        app:layout_constraintTop_toTopOf="@+id/tvRate" />

    <TextView
        android:id="@+id/tvPayout"
        style="@style/fontRateScreenTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:text="Quick and Easy Payout"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical2"
        app:layout_constraintTop_toTopOf="@+id/tvSchedule" />

    <Button
        android:id="@+id/btnWork"
        style="@style/ButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="CLICK ME"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />


</android.support.constraint.ConstraintLayout>

Android Studio中的UI预览如下，

我们可以看到这里显示了3张图片，

但是当我在模拟器或真实设备上运行应用程序时，它没有显示3个图像中的任何一个。下面是模拟器的截图

@ dimen / rates_icon_size的值：36dp
三个图像尺寸，
1. icon_rates：87x59像素
2. icon_schedule：88x78像素
3. icon_payout：60x82像素

请提供解决方案以帮助我，提前致谢。

Answer 1

在ImageView中而不是使用srcCompact使用src

   <ImageView
    android:visibility="visible"
    android:id="@+id/imgRate"
    android:layout_width="@dimen/rates_icon_size"
    android:layout_height="@dimen/rates_icon_size"
    app:src="@drawable/icon_rates"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal"
    android:layout_marginTop="27dp"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
    />

而不是

    <ImageView
    android:visibility="visible"
    android:id="@+id/imgRate"
    android:layout_width="@dimen/rates_icon_size"
    android:layout_height="@dimen/rates_icon_size"
    app:srcCompat="@drawable/icon_rates"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal"
    android:layout_marginTop="27dp"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
    />

Answer 2

我认为你的图像是问题所在。至少它不是一个优雅的解决方案。

如果您的应用应该在不同的设备上运行，那么您应该使用 Android Vector Drawables 而不是普通的 PNG 图像。使用矢量drawable而不是位图可以减小APK的大小，因为可以针对不同的屏幕密度调整相同的文件大小而不会降低图像质量。

如果你想使用你的图像，那么你应该先用SVG格式转换它们（例如用Inkscape免费），然后用带有this免费在线工具的Vector Drawable格式转换它们。

第二种解决方案是使用Material Design Icons。它们与许多设计人员共同开发，以确保良好的用户体验，并且还可以使用矢量绘图格式。

我用矢量drawables尝试了你的代码，应用程序显示图像没有问题。

Answer 3

有时android:src="@drawable/icon_rates"使用app:srcCompat="@drawable/icon_rates"无效。

<ImageView
    android:visibility="visible"
    android:id="@+id/imgRate"
    android:layout_width="@dimen/rates_icon_size"
    android:layout_height="@dimen/rates_icon_size"
    android:src="@drawable/icon_rates"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal"
    android:layout_marginTop="27dp"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/guidelineVertical1"
/>

应用程序运行时，约束布局不显示ImageView中的图像

3 个答案: