Niepożądane wypełnienie wokół ImageView


142

Muszę dołączyć grafikę nagłówka do wszystkich moich działań / widoków. Plik z nagłówkiem nazywa się 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>

Zwróć uwagę na android:background="#00FF00"(zielony), to tylko cele wizualizacji.

Uwzględniam je w moich poglądach w ten sposób:

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

Tak więc, kiedy faktycznie to wypróbuję, wynik wygląda jak lewy obraz, a nie jak powinien wyglądać (po prawej):

zwróć uwagę na zieloną ramkę

(1) Ta - pomarańczowa - część to przedmiotowy obraz / ImageView
(2) Niekochana zielona ramka. uwaga: normalnie zielony obszar byłby przezroczysty - jest zielony tylko dlatego, że ustawiłem background.

Zwróć uwagę na zieloną ramkę wokół obrazu u góry; Jest częścią ImageView i po prostu nie mogę zrozumieć, dlaczego tam jest ani jak mogę się go pozbyć. Ustawia wszystkie wypełnienia i marginesy na 0 (ale wynik jest taki sam, gdy je pomijam). Obraz ma format JPEG * 480x64px i umieściłem go w res / drawable (nie w jednym z tych drawable-Xdpi).

(* jpeg, ponieważ wygląda na to, że natknąłem się na stary problem z gamma png - na początku obejrzałem ten problem, ustawiając zieloną ramkę na tę samą pomarańczową co na zdjęciu, a kolory nie pasowały.)

Wypróbowałem to na moim htc Desire / 2.2 / Build 2.33.163.1 i na emulatorze. Opisałem również problem komuś w # android-dev; Mogła odtworzyć problem, ale też nie miała wytłumaczenia. docelowa kompilacja to 1,6.

update @tehgoose: ten kod daje dokładnie ten sam wynik z dopełnieniem góra i dół.

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

Ujemne wartości marginesu i / lub wypełnienia mogą również działać - android:layout_margin="-10dp",android:padding="-10dp"
— samis

Odpowiedzi:


442

Wreszcie!

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

atrybut adjustViewbounds wystarczyły:

Ustaw to na true, jeśli chcesz, aby ImageView dostosował swoje granice, aby zachować proporcje jego rysowania.

natknąłem się na to tutaj . dzięki za pomoc!


7
Mam ten sam problem, ale to rozwiązanie nie dało efektu.
— Marty Miller

4
Wow ... bez tego atrybutu dodawano niepożądane wypełnienie w zależności od gęstości ekranu, więc działo się to tylko na niektórych urządzeniach. Doprowadziło mnie to do szału, ponieważ obraz wyglądał dobrze na wszystkich urządzeniach, które posiadam, a kiedy wypróbowałem go na urządzeniu znajomego, wyglądał jak gówno. DZIĘKUJĘ CI.
— DiscDev

Dzięki bogom, odrzuciłem moją pierwszą próbę rozwiązania błędu, aby znaleźć coś, co jest słabe dla Androida. Uważam, że ten problem zaczął się u niektórych producentów zmieniających rzeczy z Androida, a następnie muszą umieścić właściwość, aby rozwiązać go w następnych wersjach.
— Ratata Tata

Niestety, nie działa to przynajmniej dla niższych interfejsów API, przynajmniej 16 i 17.
— luoser

1
Wow, to jest dokładnie to, czego szukałem, drapałem się po głowie przez kilka godzin, posunąłem się nawet do próby unieważnienia mojego układu i ustawienia jego wysokości / szerokości na obraz. Takie proste rozwiązanie, które działa doskonale bez konieczności stosowania scaleType.
— CodyEngel

39
android:scaleType="fitXY"

Mi to pasuje.


3
scaleType="fitXY"robi jednak coś innego: zmienia proporcje obrazu, co prowadzi do zniekształceń. czasami może to być dopuszczalne, np. w przypadku abstrakcyjnego obrazu tła.
— stefs

1
Kontrolowałem proporcje za pomocą android: width i android: height, a scaleType = "fitXY" wypełniło imageView dla mnie pożądanym współczynnikiem proporcji, to przynajmniej moje doświadczenie. Dzięki za wkład.
— Badr

Działa, ale obraz jest nieładny, niezrównoważony, przycięty
— 최봉재

1
Niezupełnie, ale android: scaleType = "fitEnd" działał jak magia.
— TheLibrarian

Znalazłem kombinację android:adjustViewBounds="true"i android:scaleType="fitXY"było to, czego potrzebowałem, aby wyrównać ImageViews w moim układzie. Obrazy różniły się o jeden lub dwa piksele (bardzo małe na wyświetlaczu o wysokiej rozdzielczości) z zaledwie adjustViewBounds. Dodanie scaleTypewydaje się wymusić ostateczne skalowanie obrazu po dostosowaniu granic widoku, co wymusza skalowanie obrazu do pełnego rozmiaru nowych granic.
— Jeff Lockhart

3

Ma to związek z proporcjami obrazu. Domyślnie system zachowuje oryginalne proporcje źródła obrazu. Które w większości przypadków nie odpowiadają dokładnie układowi lub wymiarom określonym w układzie. W związku z tym,

  1. Zmień rozmiar obrazu, aby dopasować go do określonego układu, lub
  2. Służy android:scaleTypedo dopasowania obrazu. Na przykład możesz określićandroid:scaleType="fitXY"

3

to dodatkowe wypełnienie jest generowane automatycznie, ponieważ Android próbowałby uzyskać oryginalne proporcje. spróbuj poniżej

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

0

Możesz dać specific height to imageView say 50dp or 40dpi adjust image to make green borderzniknąć.

Na przykład: android:layout_height="40dp"


ustawienie layout_width = "480px" i layout_height = "64px" daje wynik, który chcę, ale piksele nie są zbyt praktyczne. Szczerze mówiąc, nie rozumiem, jak to przekłada się na dp.
— stefs

Powinieneś używać dp tak samo jak pikseli. To wszystko, czym są; wyświetlać niezależne piksele. ale to działa.
— Udaykiran

dp / dip oznacza piksele niezależne od gęstości; o ile rozumiem, obejmuje różne gęstości, ale (oczywiście) nie różne rozmiary ekranu. wszystko, czego chcę, to skalowanie obrazu do 100% szerokości ekranu i pozostawienie wysokości, aby zachować proporcje.
— stefs

0
android:layout_height="wrap_content"

Musisz zmienić to na „fill_parent”

Konieczne może być również przeskalowanie obrazu, aby wypełnić ramkę, w której się znajduje.

Nie rozumiem, dlaczego w ogóle potrzebujesz układu ramek. Bez tego obraz i tak po prostu wypełniłby ekran.

EDYCJA: tak, przepraszam, xml to wysokość widoku obrazu.


1
Jedyne do dodania, że ​​trzeba ustawić wysokość layoutu na ImageView, nie jest to tak ewidentne w Twojej odpowiedzi :)
— ernazm

Wypróbowałem to bez otaczającego układu, niczego nie zmienia. również aktualny obraz jest tylko symbolem zastępczym - wkrótce pojawią się dodatkowe elementy (uzasadniające otaczający układ). nie chcę, aby obraz pasował do ekranu, chcę, aby był tam, na górze.
— stefs

Sprawdź dwukrotnie, czy obraz ma puste miejsce na górze i na dole. Jeśli nie, spróbuj przeskalować obiekt imageview za pomocą android: scaleType = "". Powinien być taki, który pasuje do tego, czego szukasz.
— NotACleverMan


-1

Musisz zapewnić kształt wokół widoku obrazu, aby uzyskać lepszy wygląd.

Oto czego użyłem:

<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
zaraz! Pracowałem już z kształtami (dla tła kart), ale szczerze mówiąc, nie rozumiem, jak mam to tutaj zastosować.
— stefs

@Schnalle: utwórz dwa pliki kształtów.xml i jeden plik selector.xml. zastosuj tło obrazu jako plik selector.xml. W pliku selektora podaj dwa stany dla stanu skupienia / zaznaczenia i stanu normalnego.
— Zoombie
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.