web-dev-qa-db-ja.com

アプリの実行時にImageViewからの画像が表示されない制約レイアウト

Android Activity（ConstraintLayout）、Android Studio Preview画面で、ImageViewによっていくつかの画像を追加しようとしていますが、画像が正しく表示されていますが、実行中実際のデバイスまたはエミュレーター上のアプリでは、画像が表示されていません。

以下は私が使用しているコードです、

<?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プレビューは以下のとおりです、

UI Preview

ここに3つの画像が表示されていることがわかります。

しかし、エミュレーターまたは実際のデバイスでアプリケーションを実行すると、3つの画像のいずれも表示されません。以下はエミュレーターのスクリーンショットです。

Emulator View

  • @ dimen/rate_icon_sizeの値：36dp
  • 3つの画像の寸法、
    1. icon_rates：87x59ピクセル
    2. icon_schedule：88x78ピクセル
    3. icon_payout：60x82ピクセル

クエリの解決策を提供してください、よろしくお願いします。

androidimageviewandroid-constraintlayout
9
vChamps

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"
    />
12
Anmol

使用する 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"
/>
2
Dev. Jaykrushna

あなたの画像が問題だと思います。少なくとも、それはエレガントな解決策ではありません。

アプリを別のデバイスで実行する必要がある場合は、通常の画像の代わりにAndroid Vector Drawablesを使用する必要があります[〜＃〜] png [〜＃〜]画像。ビットマップの代わりにベクタードローアブルを使用すると、画質を損なうことなく同じファイルをさまざまな画面密度に合わせてサイズ変更できるため、APKのサイズが小さくなります。

画像を使用したい場合は、最初にSVG形式（たとえばInkscapeを使用すると無料）に変換してから、 this 無料のオンラインツールを使用してVectorDrawable形式に変換する必要があります。

2番目の解決策は、 マテリアルデザインアイコン を使用することです。これらは、優れたユーザーエクスペリエンスを保証するために多くのデザイナーと共同で開発されており、ベクタードローアブル形式でも利用できます。

ベクトルドローアブルでコードを試してみましたが、アプリは問題なく画像を表示しています。

0
Valentin Gavran