Preenchimento indesejado em torno de um ImageView

142

Preciso incluir um gráfico de cabeçalho em todas as minhas atividades / visualizações. O arquivo com o cabeçalho é chamado 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>

Observe o android:background="#00FF00"(verde), é apenas para fins de visualização.

Eu os incluo em meus pontos de vista como este:

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

Então, quando eu realmente testo, o resultado se parece com a imagem da esquerda, em vez de como deveria ser (à direita):

observe a borda verde

(1) Esta parte - a laranja - é a imagem / ImageView em questão
(2) A borda verde não amada. nota: normalmente, a área verde seria transparente - só é verde porque eu defino o background.

Observe a borda verde ao redor da imagem na parte superior; É parte do ImageView e simplesmente não consigo descobrir por que ele está lá ou como posso me livrar dele. Ele definiu todos os preenchimentos e margens para 0 (mas o resultado é o mesmo quando eu os omito). A imagem é um jpeg * de 480x64px * e eu a coloco em res / drawable (não em uma das opções drawable-Xdpi).

(* jpeg, porque parece que me deparei com o antigo problema de png png - no começo, resolvi o problema, deixando a borda verde da mesma cor laranja da imagem e as cores não correspondiam.)

Eu tentei no meu htc desejo / 2.2 / Build 2.33.163.1 e no emulador. Também descrevi o problema para alguém no # android-dev; Ela podia reproduzir o problema, mas também não tinha explicação. O destino da compilação é 1.6.

update @tehgoose: esse código gera exatamente o mesmo resultado acolchoado superior e 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>
stefs
fonte
Margem negativa e / ou valores de preenchimento também podem funcionar - android:layout_margin="-10dp",android:padding="-10dp"
samis

Respostas:

442

finalmente!

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

o atributo AdjustViewbounds fez o truque:

Defina como true se desejar que o ImageView ajuste seus limites para preservar a proporção da sua gaveta.

eu tropecei aqui . Obrigado pela ajuda!

stefs
fonte
7
Eu tenho o mesmo problema, mas esta solução não teve efeito.
Marty Miller
4
Uau ... sem esse atributo, foi adicionado um preenchimento indesejado, dependendo da densidade da tela, então isso só estava acontecendo em alguns dispositivos. Isso me deixou maluca, porque a imagem parecia boa em todos os dispositivos que possuo e, quando tentava no dispositivo de um amigo, parecia uma porcaria. OBRIGADO.
DiscDev
Graças a deuses, mudo minha primeira tentativa de tentar resolver um bug para encontrar algo desgastado pelo android. Acredito que esse problema tenha começado em alguns fabricantes mudando coisas do Android e, em seguida, eles tenham que colocar uma propriedade para resolvê-lo nas próximas versões.
Ratata Tata
Infelizmente, isso não funciona para APIs inferiores, APIs 16 e 17, no mínimo.
luoser
1
Uau, isso é exatamente o que eu estava procurando, eu estava coçando minha cabeça por algumas horas, e até tentei invalidar meu layout e definir sua altura / largura para a imagem. Uma solução tão simples que funciona perfeitamente sem a necessidade de scaleType.
CodyEngel
39
android:scaleType="fitXY"

Funciona para mim.

Badr
fonte
3
scaleType="fitXY"faz algo diferente: altera a proporção da imagem, causando distorção. isso às vezes pode ser aceitável, por exemplo, para uma imagem de fundo abstrata.
Stefs
1
Eu controlei a proporção usando android: width e android: height e scaleType = "fitXY" preencheram o imageView para mim com a proporção desejada, que foi pelo menos a minha experiência. Obrigado pela sua contribuição.
Badr
Ele funciona, mas imagem é unpretty, desequilíbrio, cortada
최봉재
1
Não exatamente, mas o android: scaleType = "fitEnd" funcionou como mágica.
TheLibrarian
Encontrei uma combinação de android:adjustViewBounds="true"e android:scaleType="fitXY"era o que eu precisava para alinhar os ImageViews no meu layout. As imagens foram desativadas em um pixel ou dois (muito pequeno em uma tela de alta resolução) com apenas adjustViewBounds. Adicionar a imagem scaleTypeparece forçar uma escala final da imagem depois que os limites da vista são ajustados, o que força a imagem a ser dimensionada para o tamanho máximo dos novos limites.
Jeff Lockhart
3

Tem a ver com a proporção da imagem. Por padrão, o sistema mantém a proporção original da fonte da imagem. Que na maioria dos casos não corresponde exatamente ao layout ou às dimensões especificadas no layout. Portanto,

  1. Altere o tamanho da imagem para ajustar ao layout especificado ou
  2. Use android:scaleTypepara ajustar a imagem. Por exemplo, você pode especificarandroid:scaleType="fitXY"
Nazar Merza
fonte
3

esses preenchimentos extras são gerados automaticamente, já que o android tentaria obter a proporção original. por favor tente abaixo

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

Pode ser que você possa dar specific height to imageView say 50dp or 40dpe adjust image to make green borderdesaparecer.

Por exemplo: android:layout_height="40dp"

Udaykiran
fonte
definir o layout_width = "480px" e layout_height = "64px" produz o resultado que eu quero, mas os pixels não são muito práticos. Sinceramente, não entendo como isso se traduz em dp.
Stefs
Você deve usar o dp como faria com os pixels. Isso é tudo o que são; exibir pixels independentes. mas funciona.
Udaykiran
dp / dip significa Pixels independentes de densidade; tanto quanto eu entendo, abrange diferentes densidades, mas (é claro) tamanhos de tela diferentes. tudo o que eu quero é que a imagem seja dimensionada para 100% da largura da tela e deixe a altura para que as proporções sejam mantidas.
Stefs
0
android:layout_height="wrap_content"

Você precisa alterá-lo para "fill_parent"

Você também pode precisar redimensionar sua imagem para que ela tenha a proporção correta para preencher o layout do quadro em que está.

Não entendo por que você precisa do layout do quadro. Sem ele, sua imagem preencheria a tela de qualquer maneira.

EDIT: sim, desculpe, o xml é a altura da visualização de imagem.

NotACleverMan
fonte
1
A única coisa a acrescentar é que ele precisa definir a altura do layout de ImageView , não é tão evidente na sua resposta :)
ernazm
Eu tentei sem um layout circundante também, não muda nada. Além disso, a imagem atual é apenas um espaço reservado - em breve haverá elementos adicionais (justificando o layout ao redor). não quero que a imagem corresponda à tela, quero apenas ali, no topo.
Stefs
Verifique duas vezes para ver se sua imagem possui espaço em branco na parte superior e inferior. Caso contrário, tente dimensionar o objeto imageview usando android: scaleType = "". Deve haver um para se adequar ao que você está procurando.
precisa saber é o seguinte
0

use este android: scaleType = "fitXY" no imageview xml

Gaurav Pandit
fonte
-1

Você precisa fornecer uma forma em torno da visualização de imagem para dar uma aparência melhor.

Aqui o que eu usei:

<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
fonte
2
Uau! Eu já trabalhei com formas (para planos de fundo da guia), mas sinceramente, não entendo como devo aplicar isso aqui.
Stefs
@ Schnalle: crie dois arquivos shapes.xml e um selector.xml. aplique o plano de fundo da imagem como arquivo selector.xml. No arquivo seletor, forneça dois estados para o estado focado / selecionado e normal.
Zoombie