Rembourrage indésirable autour d'un ImageView


142

Je dois inclure un graphique d'en-tête dans toutes mes activités / vues. Le fichier avec l'en-tête s'appelle 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>

Notez le android:background="#00FF00"(vert), ce n'est qu'à des fins de visualisation.

Je les inclut dans mes vues comme ceci:

<?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" />
  (...)

Donc, lorsque je l'essaye, le résultat ressemble à l'image de gauche, au lieu de ce à quoi il devrait ressembler (à droite):

notez la bordure verte

(1) Cette partie - la partie orange - est l'image / ImageView en question
(2) La bordure verte non aimée. Remarque: normalement, la zone verte serait transparente - Elle est uniquement verte car j'ai défini le background.

Notez la bordure verte autour de l'image en haut; Cela fait partie de ImageView et je ne peux tout simplement pas comprendre pourquoi il est là ou comment je peux m'en débarrasser. Il définit tous les rembourrages et marges à 0 (mais le résultat est le même lorsque je les omis). L'image est un jpeg de 480x64px * et je l'ai mis dans res / drawable (pas dans l'un des drawable-Xdpisi).

(* jpeg, car il semble que je suis tombé sur l'ancien problème gamma png - au début, j'ai contourné le problème en faisant de la bordure verte la même orange que l'image, et les couleurs ne correspondaient pas.)

Je l'ai essayé sur mon htc desire / 2.2 / Build 2.33.163.1 et sur l'émulateur. J'ai également décrit le problème à quelqu'un dans # android-dev; Elle pouvait reproduire le problème mais n'avait pas non plus d'explication. l'objectif de construction est 1.6.

update @tehgoose: ce code donne exactement le même résultat complété en haut et en bas.

<?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>

Les valeurs de marge négative et / ou de remplissage peuvent également fonctionner - android:layout_margin="-10dp",android:padding="-10dp"
samis

Réponses:


442

enfin!

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

l' attribut AdjustViewbounds a fait l'affaire:

Définissez ceci sur true si vous souhaitez que ImageView ajuste ses limites pour conserver le rapport hauteur / largeur de son dessin.

je suis tombé dessus ici . Merci de votre aide!


7
J'ai le même problème, mais cette solution n'a eu aucun effet.
Marty Miller

4
Wow ... sans cet attribut, un rembourrage indésirable était ajouté en fonction de la densité de l'écran, donc cela ne se produisait que sur certains appareils. Cela m'a rendu fou parce que l'image avait l'air bien sur tous les appareils que je possède, puis quand je l'essayais sur l'appareil d'un ami, ça ressemblait à de la merde. MERCI.
DiscDev

Dieu merci, je change ma première tentative d'essayer de résoudre un bug pour trouver quelque chose d'usé d'androïde. Je pense que ce problème a commencé chez certains fabricants qui ont changé des éléments d'Android et qu'ils doivent ensuite mettre une propriété pour le résoudre dans les versions suivantes.
Ratata Tata

Malheureusement, cela ne fonctionne pas pour les API inférieures, les API 16 et 17 au moins.
luoser

1
Wow c'est exactement ce que je cherchais, je me suis gratté la tête pendant quelques heures, je suis même allé jusqu'à essayer d'invalider ma mise en page et de régler sa hauteur / largeur sur celle de l'image. Une solution aussi simple qui fonctionne parfaitement sans avoir besoin de scaleType.
CodyEngel

39
android:scaleType="fitXY"

Ça marche pour moi.


3
scaleType="fitXY"fait quelque chose de différent cependant: il change le rapport hauteur / largeur de l'image, ce qui entraîne une distorsion. cela peut parfois être acceptable, par exemple pour une image d'arrière-plan abstraite.
stefs

1
J'ai contrôlé le rapport hauteur / largeur en utilisant android: width et android: height, et scaleType = "fitXY" a rempli l'imageView pour moi avec le rapport hauteur / largeur souhaité, c'était du moins mon expérience. Merci pour votre contribution.
Badr

Cela fonctionne mais l'image n'est pas jolie, déséquilibrée, recadrée
최봉재

1
Pas exactement mais android: scaleType = "fitEnd" fonctionnait comme par magie.
TheLibrarian

J'ai trouvé une combinaison de android:adjustViewBounds="true"et android:scaleType="fitXY"c'était ce dont j'avais besoin pour aligner ImageViews dans ma mise en page. Les images étaient décalées d'un pixel ou deux (très petites sur un écran haute résolution) avec juste adjustViewBounds. L'ajout de scaleTypesemble forcer une mise à l'échelle finale de l'image une fois les limites de la vue ajustées, ce qui force l'image à être mise à l'échelle à la taille totale des nouvelles limites.
Jeff Lockhart

3

Cela a à voir avec le rapport hauteur / largeur de l'image. Par défaut, le système conserve le rapport hauteur / largeur d'origine de la source d'image. Ce qui, dans la plupart des cas, ne correspond pas exactement à la mise en page ou aux dimensions spécifiées dans la mise en page. Par conséquent,

  1. Modifiez la taille de l'image pour l'adapter à la mise en page spécifiée, ou
  2. Utilisez android:scaleTypepour adapter l'image. Par exemple, vous pouvez spécifierandroid:scaleType="fitXY"

3

ces rembourrages supplémentaires sont générés automatiquement car l'androïde essaierait d'obtenir le rapport hauteur / largeur d'origine. veuillez essayer ci-dessous

scaletype = "fitCenter"
android:adjustViewBounds="true"
android:layout_height="wrap_content"

0

Peut-être que vous pouvez donner specific height to imageView say 50dp or 40dpet adjust image to make green borderdisparaître.

Par exemple: android:layout_height="40dp"


définir layout_width = "480px" et layout_height = "64px" donne le résultat que je veux, mais les pixels ne sont pas très pratiques. Honnêtement, je ne comprends pas comment cela se traduit par dp.
stefs

Vous devez utiliser dp comme vous le feriez avec des pixels. C'est tout ce qu'ils sont; afficher des pixels indépendants. mais ça marche.
Udaykiran

dp / dip signifie pixels indépendants de la densité; pour autant que je sache, il couvre différentes densités, mais (bien sûr) pas différentes tailles d'écran. tout ce que je veux, c'est que l'image soit mise à l'échelle à 100% de la largeur de l'écran et laisser la hauteur pour que les proportions soient conservées.
stefs

0
android:layout_height="wrap_content"

Vous devez le changer en "fill_parent"

Vous devrez peut-être également redimensionner votre image afin que ce soit le bon rapport pour remplir la mise en page dans laquelle elle se trouve.

Je ne comprends pas du tout pourquoi vous avez besoin de la disposition du cadre. Sans cela, votre image ne ferait que remplir l'écran de toute façon.

EDIT: oui, désolé, le xml est la hauteur de l'image vue.


1
La seule chose à ajouter est qu'il doit définir la hauteur de mise en page de ImageView, ce n'est pas si évident dans votre réponse :)
ernazm

Je l'ai essayé sans mise en page environnante aussi, ne change rien. De plus, l'image actuelle n'est qu'un espace réservé - il y aura bientôt des éléments supplémentaires (justifiant la mise en page environnante). Je ne veux pas que l'image corresponde à l'écran, je la veux juste là, en haut.
stefs

Vérifiez à nouveau si votre image comporte un espace vide en haut et en bas. Sinon, essayez de redimensionner l'objet imageview en utilisant android: scaleType = "". Il devrait y en avoir un qui convienne à ce que vous recherchez.
NotACleverMan


-1

Vous devez fournir une forme autour de l'image pour donner un meilleur aspect.

Voici ce que j'ai utilisé:

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


2
whoa! J'ai déjà travaillé avec des formes (pour les arrière-plans d'onglets), mais honnêtement, je ne comprends pas comment appliquer cela ici.
stefs

@Schnalle: créez deux fichiers shape.xml et un selector.xml. appliquer l'arrière-plan de l'image en tant que fichier selector.xml. Dans le fichier de sélection, fournissez deux états pour l'état focalisé / sélectionné et l'état normal.
Zoombie
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.