Unerwünschtes Auffüllen einer ImageView

142

Ich muss in alle meine Aktivitäten / Ansichten eine Kopfgrafik einfügen. Die Datei mit dem Header heißt header.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content"
  android:background="#0000FF" 
  android:padding="0dip">

  <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="0dip"
    android:layout_marginTop="0dip"
    android:layout_marginBottom="0dip"
    android:padding="0dip"
    android:paddingTop="0dip"
    android:paddingBottom="0dip"
    android:layout_gravity="fill"
    android:background="#00FF00"
    />
</FrameLayout>

Beachten Sie das android:background="#00FF00"(grün), es dient nur zu Visualisierungszwecken.

Ich beziehe sie wie folgt in meine Ansichten ein:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  style="@style/white_background">

  <include layout="@layout/header" />
  (...)

Wenn ich es also tatsächlich ausprobiere, sieht das Ergebnis wie das linke Bild aus, anstatt wie es aussehen sollte (rechts):

Beachten Sie den grünen Rand

(1) Dieser orangefarbene Teil ist das betreffende Bild / ImageView.
(2) Der ungeliebte grüne Rand. Hinweis: Normalerweise ist der grüne Bereich transparent. Er ist nur grün, weil ich den Wert festgelegt habe background.

Beachten Sie den grünen Rand um das Bild oben. Es ist Teil der ImageView und ich kann einfach nicht herausfinden, warum es dort ist oder wie ich es loswerden kann. Alle Auffüllungen und Ränder werden auf 0 gesetzt (aber das Ergebnis ist das gleiche, wenn ich sie weglasse). Das Bild ist ein 480x64px JPEG * und ich habe es in res / drawable gesetzt (nicht in einem der drawable-Xdpiobwohl).

(* JPEG, weil ich anscheinend auf das alte PNG-Gamma-Problem gestoßen bin - zuerst habe ich das Problem umgangen, indem ich den grünen Rand mit dem Orange orange wie das Bild gemacht habe und die Farben nicht übereinstimmten.)

Ich habe es auf meinem HTC-Wunsch / 2.2 / Build 2.33.163.1 und auf dem Emulator versucht. Außerdem habe ich das Problem jemandem in # android-dev beschrieben; Sie konnte das Problem reproduzieren, hatte aber auch keine Erklärung. Build-Ziel ist 1.6.

update @tehgoose: Dieser Code liefert genau das gleiche oben + unten gepolsterte Ergebnis.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  style="@style/white_background">

  <!-- <include layout="@layout/header" />  -->

  <ImageView
    android:src="@drawable/header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#00FF00"
    android:layout_weight="0"
    />

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dip"
    android:layout_weight="1">

    (... rest of the elements)

  </LinearLayout>
</LinearLayout>
Stefs
quelle
Negative android:layout_margin="-10dp"android:padding="-10dp"
Rand-

Antworten:

442

endlich!

<ImageView
  (...)
  android:adjustViewBounds="true" />

das adjustViewbounds Attribut hat den Trick:

Setzen Sie dies auf true, wenn Sie möchten, dass ImageView seine Grenzen anpasst, um das Seitenverhältnis des Zeichnungsobjekts beizubehalten.

Ich bin hier darauf gestoßen . danke für Ihre Hilfe!

Stefs
quelle
7
Ich habe das gleiche Problem, aber diese Lösung hatte keine Wirkung.
Marty Miller
4
Wow ... ohne dieses Attribut wurde je nach Bildschirmdichte eine unerwünschte Auffüllung hinzugefügt, sodass dies nur bei einigen Geräten der Fall war. Es hat mich verrückt gemacht, weil das Bild auf allen Geräten, die ich besitze, gut aussah. Wenn ich es dann auf dem Gerät eines Freundes ausprobierte, sah es wie Mist aus. DANKE.
DiscDev
Gott sei Dank habe ich meinen ersten Versuch unternommen, den Fehler zu lösen, um etwas zu finden, das von Android müde ist. Ich glaube, dieses Problem begann bei einigen Herstellern, die Dinge von Android geändert haben, und dann müssen sie eine Eigenschaft einfügen, um es in den nächsten Versionen zu lösen.
Ratata Tata
Leider funktioniert dies nicht für untere Apis, zumindest für Api 16 und 17.
Luoser
1
Wow, das ist genau das, wonach ich gesucht habe. Ich habe mir ein paar Stunden am Kopf gekratzt und sogar versucht, mein Layout ungültig zu machen und seine Höhe / Breite auf das Bild einzustellen. Eine so einfache Lösung, die perfekt funktioniert, ohne dass scaleType erforderlich ist.
CodyEngel
39
android:scaleType="fitXY"

Für mich geht das.

Badr
quelle
3
scaleType="fitXY"macht jedoch etwas anderes: Es ändert das Seitenverhältnis des Bildes, was zu Verzerrungen führt. Dies kann manchmal akzeptabel sein, z. B. für ein abstraktes Hintergrundbild.
Stefs
1
Ich habe das Seitenverhältnis mit Android: Breite und Android: Höhe gesteuert, und scaleType = "fitXY" hat die Bildansicht für mich mit dem gewünschten Seitenverhältnis gefüllt, das war zumindest meine Erfahrung. Danke für deinen Beitrag.
Badr
Es funktioniert, aber das Bild ist unschön, unausgeglichen, beschnitten
21
1
Nicht genau aber android: scaleType = "fitEnd" funktionierte wie Magie.
TheLibrarian
Ich fand eine Kombination aus android:adjustViewBounds="true"und android:scaleType="fitXY"war das, was ich brauchte, um ImageViews in meinem Layout auszurichten. Die Bilder waren um ein oder zwei Pixel (sehr klein auf einem hochauflösenden Display) mit nur adjustViewBounds. Das Hinzufügen von scaleTypescheint eine endgültige Skalierung des Bildes zu erzwingen, nachdem die Ansichtsgrenzen angepasst wurden, wodurch das Bild gezwungen wird, auf die volle Größe der neuen Grenzen zu skalieren.
Jeff Lockhart
3

Es hat mit dem Bildseitenverhältnis zu tun. Standardmäßig behält das System das ursprüngliche Seitenverhältnis der Bildquelle bei. Was in den meisten Fällen nicht genau mit dem Layout oder den Abmessungen übereinstimmt, die im Layout angegeben sind. Deshalb,

  1. Ändern Sie entweder die Größe des Bildes, um es an das angegebene Layout anzupassen, oder
  2. Verwenden Sie android:scaleTypediese Option , um das Bild anzupassen. Zum Beispiel können Sie angebenandroid:scaleType="fitXY"
Nazar Merza
quelle
3

Diese zusätzliche Polsterung wird automatisch generiert, da der Android versuchen würde, das ursprüngliche Seitenverhältnis zu erhalten. Bitte versuchen Sie es unten

scaletype = "fitCenter"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
MJ Montes
quelle
0

Vielleicht kannst du geben specific height to imageView say 50dp or 40dpund adjust image to make green borderverschwinden.

Z.B: android:layout_height="40dp"

Udaykiran
quelle
Wenn Sie layout_width = "480px" und layout_height = "64px" einstellen, erhalten Sie das gewünschte Ergebnis, aber Pixel sind nicht sehr praktisch. Ich verstehe ehrlich gesagt nicht, wie sich das auf dp übersetzt.
Stefs
Sie sollten dp genauso verwenden wie Pixel. Das ist alles was sie sind; unabhängige Pixel anzeigen. Aber es funktioniert.
Udaykiran
dp / dip bedeutet dichteunabhängige Pixel; Soweit ich weiß, deckt es unterschiedliche Dichten ab, aber (natürlich) nicht unterschiedliche Bildschirmgrößen. Ich möchte nur, dass das Bild auf 100% Bildschirmbreite skaliert und die Höhe belassen wird, damit die Proportionen erhalten bleiben.
Stefs
0
android:layout_height="wrap_content"

Sie müssen es in "fill_parent" ändern.

Möglicherweise müssen Sie Ihr Bild auch skalieren, damit es das richtige Verhältnis hat, um das Framelayout zu füllen, in dem es sich befindet.

Ich verstehe nicht, warum Sie das Rahmenlayout dort überhaupt brauchen. Ohne sie würde Ihr Bild sowieso nur den Bildschirm ausfüllen.

EDIT: Ja, sorry, die XML ist die Höhe für die Bildansicht.

NotACleverMan
quelle
1
Die einzige Sache, die hinzugefügt werden muss, ist, dass er die ImageView
Layouthöhe einstellen muss
Ich habe es auch ohne ein umgebendes Layout versucht, ändert nichts. Außerdem ist das aktuelle Bild nur ein Platzhalter - es werden bald zusätzliche Elemente vorhanden sein (was das umgebende Layout rechtfertigt). Ich möchte nicht, dass das Bild mit dem Bildschirm übereinstimmt. Ich möchte, dass es nur dort oben angezeigt wird.
Stefs
Überprüfen Sie noch einmal, ob Ihr Bild oben und unten leer ist. Wenn nicht, versuchen Sie, das Bildansichtsobjekt mit android zu skalieren: scaleType = "". Es sollte eine geben, die zu dem passt, was Sie suchen.
NotACleverMan
0

Verwenden Sie dieses Android: scaleType = "fitXY" in imageview xml

Gaurav Pandit
quelle
-1

Sie müssen die Bildansicht formen, um ein besseres Erscheinungsbild zu erzielen.

Hier was ich benutzt habe:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--<gradient android:startColor="#FFFFFF" android:endColor="#969696"

    android:angle="270">
-->
<gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF"

    android:angle="270">
</gradient>
    <stroke android:width="2dp" android:color="@color/graycolor" />
<corners android:radius="2dp" />
<padding android:left="5dp" android:top="5dp" android:right="5dp"
    android:bottom="5dp" />

Zoombie
quelle
2
whoa! Ich habe bereits mit Formen gearbeitet (für Tab-Hintergründe), aber ehrlich gesagt verstehe ich nicht, wie ich das hier anwenden soll.
Stefs
@Schnalle: Erstellen Sie zwei Shapes.xml-Dateien und eine Selector.xml-Datei. Wenden Sie den Bildhintergrund als Datei selector.xml an. Geben Sie in der Auswahldatei zwei Zustände für den fokussierten / ausgewählten und den normalen Zustand an.
Zoombie