Relleno no deseado alrededor de un ImageView


142

Necesito incluir un gráfico de encabezado en todas mis actividades / vistas. El archivo con el encabezado se llama 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>

Tenga en cuenta el android:background="#00FF00"(verde), es solo para fines de visualización.

Los incluyo en mis puntos de vista de esta manera:

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

Entonces, cuando realmente lo pruebo, el resultado se ve como la imagen de la izquierda, en lugar de cómo debería verse (derecha):

tenga en cuenta el borde verde

(1) Esta parte, la naranja, es la imagen / ImageView en cuestión
(2) El borde verde no amado. nota: normalmente, el área verde sería transparente: solo es verde porque configuré el background.

Tenga en cuenta el borde verde alrededor de la imagen en la parte superior; Es parte de ImageView y no puedo entender por qué está allí o cómo puedo deshacerme de él. Estableció todos los rellenos y márgenes en 0 (pero el resultado es el mismo cuando los omito). La imagen es un jpeg * de 480x64px y la puse en res / drawable (no en una de ellas drawable-Xdpi).

(* jpeg, porque parece que me topé con el viejo problema de gamma png, al principio solucioné el problema haciendo que el borde verde fuera el mismo naranja que la imagen, y los colores no coincidían).

Lo probé en mi htc desire / 2.2 / Build 2.33.163.1 y en el emulador. También describí el problema a alguien en # android-dev; Ella podía reproducir el problema pero tampoco tenía explicación. El objetivo de construcción es 1.6.

actualizar @tehgoose: este código produce exactamente el mismo resultado de relleno superior + inferior.

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

Valores de margen y / o relleno negativo puede también trabajo - android:layout_margin="-10dp",android:padding="-10dp"
samis

Respuestas:


442

¡finalmente!

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

el atributo ajustarViewbounds hizo el truco:

Establezca esto en verdadero si desea que ImageView ajuste sus límites para preservar la relación de aspecto de su dibujo.

Me topé con esto aquí . ¡gracias por tu ayuda!


77
Tengo el mismo problema, pero esta solución no tuvo ningún efecto.
Marty Miller

44
Wow ... sin ese atributo, se agregó un relleno no deseado dependiendo de la densidad de la pantalla, por lo que solo estaba sucediendo en algunos dispositivos. Me volvió loco porque la imagen se veía bien en todos los dispositivos que poseo, luego, cuando lo probaba en el dispositivo de un amigo, parecía una mierda. GRACIAS.
DiscDev

Gracias a Dios, cambié mi primer intento de tratar de resolver un error para encontrar algo que no sea Android. Creo que este problema comenzó en algunos fabricantes que cambiaron cosas de Android y luego tienen que poner una propiedad para resolverlo en las próximas versiones.
Ratata Tata

Lamentablemente, esto no funciona para las API inferiores, API 16 y 17 como mínimo.
luoser

1
Wow, esto es exactamente lo que estaba buscando, me rasqué la cabeza durante unas horas, incluso llegué a intentar invalidar mi diseño y ajustar su altura / ancho a la imagen. Una solución tan simple que funciona perfectamente sin la necesidad de scaleType.
CodyEngel

39
android:scaleType="fitXY"

Esto funciona para mi.


3
scaleType="fitXY"Sin embargo, hace algo diferente: cambia la relación de aspecto de la imagen y produce distorsión. Esto puede ser aceptable a veces, por ejemplo, para una imagen de fondo abstracta.
Stefs

1
Controlé la relación de aspecto usando android: width y android: height, y scaleType = "fitXY" me llenó el imageView con la relación de aspecto deseada, esa fue al menos mi experiencia. Gracias por tu contribución.
Badr

Funciona pero la imagen es poco atractiva, desequilibrada, recortada
최봉재

1
No exactamente, pero android: scaleType = "fitEnd" funcionó como magia.
TheLibrarian

Encontré una combinación de android:adjustViewBounds="true"y android:scaleType="fitXY"era lo que necesitaba para alinear ImageViews en mi diseño. Las imágenes estaban apagadas por un píxel o dos (muy pequeñas en una pantalla de alta resolución) con solo adjustViewBounds. Agregar el scaleTypeparece forzar una escala final de la imagen después de que se ajustan los límites de la vista, lo que obliga a la imagen a escalar al tamaño completo de los nuevos límites.
Jeff Lockhart el

3

Tiene que ver con la relación de aspecto de la imagen. Por defecto, el sistema mantiene la relación de aspecto original de la fuente de la imagen. Que en la mayoría de los casos no coincide exactamente con el diseño o las dimensiones especificadas en el diseño. Por lo tanto,

  1. Cambie el tamaño de la imagen para que se ajuste al diseño especificado, o
  2. Úselo android:scaleTypepara ajustar la imagen. Por ejemplo, puedes especificarandroid:scaleType="fitXY"

3

esos rellenos adicionales se generan automáticamente ya que el Android intentaría obtener la relación de aspecto original. por favor intente abajo

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

0

Puede ser que puedas dar specific height to imageView say 50dp or 40dpy adjust image to make green borderdesaparecer.

P.ej: android:layout_height="40dp"


establecer el layout_width = "480px" y layout_height = "64px" produce el resultado que quiero, pero los píxeles no son muy prácticos. Sinceramente, no entiendo cómo eso se traduce en dp.
stefs

Debe usar dp tal como lo haría con los píxeles. Eso es todo lo que son; Mostrar píxeles independientes. pero funciona.
Udaykiran

dp / dip significa píxeles independientes de la densidad; Por lo que yo entiendo, cubre diferentes densidades, pero (por supuesto) no diferentes tamaños de pantalla. Todo lo que quiero es que la imagen se escale al 100% del ancho de la pantalla y deje la altura para mantener las proporciones.
stefs

0
android:layout_height="wrap_content"

Necesita cambiarlo a "fill_parent"

También es posible que deba escalar su imagen para que tenga la proporción correcta para llenar el marco en el que se encuentra.

No entiendo por qué necesitas el diseño del marco allí en absoluto. Sin ella, tu imagen simplemente llenaría la pantalla de todos modos.

EDITAR: sí, lo siento, el xml es la altura para la vista de imagen.


1
Lo único que debe agregar es que necesita establecer la altura de diseño de ImageView , no es tan evidente en su respuesta :)
ernazm

Lo probé sin un diseño circundante, no cambia nada. Además, la imagen actual es solo un marcador de posición: pronto habrá elementos adicionales (justificando el diseño circundante). no quiero que la imagen coincida con la pantalla, la quiero justo allí, en la parte superior.
stefs

Vuelva a verificar si su imagen tiene espacio en blanco en la parte superior e inferior. Si no, intente escalar el objeto imageview usando android: scaleType = "". Debe haber uno que se adapte a lo que estás buscando.
NotACleverMan


-1

Debe proporcionar forma alrededor de la vista de imagen para tener una mejor apariencia.

Aquí lo que he usado:

<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! Ya trabajé con formas (para fondos de pestañas), pero sinceramente, no entiendo cómo debería aplicar eso aquí.
stefs

@Schnalle: cree dos archivos shapes.xml y un selector.xml. aplicar fondo de imagen como archivo selector.xml. En el archivo selector, proporcione dos estados para enfocado / seleccionado y el estado normal.
Zoombie
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.