W Androidzie ImageView jest domyślnie prostokątem. Jak mogę zrobić z niego zaokrąglony prostokąt (odciąć wszystkie 4 rogi mojej mapy bitowej, aby były zaokrąglonymi prostokątami) w ImageView?
573
W Androidzie ImageView jest domyślnie prostokątem. Jak mogę zrobić z niego zaokrąglony prostokąt (odciąć wszystkie 4 rogi mojej mapy bitowej, aby były zaokrąglonymi prostokątami) w ImageView?
ShapeableImageView
zrobić okrągły lub okrągły obraz Zobacz stackoverflow.com/a/61086632/7666442Odpowiedzi:
To dość późno, ale dla każdego, kto tego szuka, możesz wykonać następujący kod, aby ręcznie zaokrąglić rogi zdjęć.
http://www.ruibm.com/?p=184
To nie jest mój kod, ale go użyłem i działa wspaniale. Użyłem go jako pomocnika w klasie ImageHelper i rozszerzyłem go nieco, aby uzyskać ilość wtapiania potrzebną dla danego obrazu.
Ostateczny kod wygląda następująco:
Mam nadzieję, że to komuś pomoże!
źródło
Podczas gdy powyższa odpowiedź działa, Romain Guy (główny programista Androida) pokazuje lepszą metodę na swoim blogu, która zużywa mniej pamięci, używając modułu cieniującego, który nie tworzy kopii mapy bitowej. Ogólny zarys funkcjonalności znajduje się tutaj:
Zaletą tego w porównaniu z innymi metodami jest to, że:
Utworzyłem RoundedImageView na podstawie tego kodu, który zawija tę logikę w ImageView i dodaje odpowiednią
ScaleType
obsługę oraz opcjonalną zaokrągloną ramkę.źródło
/ example / res / layout / rounded_item.xml
dlaczego określić src obrazu, gdy wszystkie źródła są sztywno? Ładne demo, po prostu przesada.Innym łatwym sposobem jest użycie CardView z promieniem narożnika i ImageView wewnątrz:
źródło
Przycinanie do zaokrąglonych kształtów zostało dodane do
View
klasy w API 21.Po prostu zrób to:
res / drawable / round_outline.xml
android:background="@drawable/round_outline"
android:clipToOutline="true"
Niestety wystąpił błąd i ten atrybut XML nie został rozpoznany. Na szczęście nadal możemy ustawić przycinanie w Javie:
ImageView.setClipToOutline(true)
Oto jak to będzie wyglądać:
Uwaga:
Ta metoda działa na dowolnym kształcie do rysowania (nie tylko zaokrąglonym). Spowoduje to przycięcie ImageView do dowolnego kształtu kształtu zdefiniowanego w Drawable xml.
Specjalna uwaga na temat ImageViews
setClipToOutline()
działa tylko wtedy, gdy tło Widoku jest ustawione na kształt, który można rysować. Jeśli ten kształt tła istnieje, widok traktuje kontur kształtu jako obramowanie do celów wycinania i cieniowania.Oznacza to, że jeśli chcesz użyć
setClipToOutline()
do zaokrąglania rogów w ImageView, obraz należy ustawić za pomocąandroid:src
zamiastandroid:background
(ponieważ tło musi być ustawione na zaokrąglony kształt). Jeśli MUSISZ użyć tła do ustawienia obrazu zamiast src, możesz użyć tego obejścia:źródło
android:clipToOutline
należy użyćandroid:outlineProvider="background"
.W wersji 21 biblioteki Support istnieje teraz rozwiązanie tego problemu: nazywa się RoundedBitmapDrawable .
Zasadniczo jest tak jak normalny Drawable, tyle że dajesz mu promień narożnika do przycinania za pomocą:
Tak więc, zaczynając od
Bitmap src
i celImageView
, wyglądałby mniej więcej tak:źródło
android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
więcv4
też obsługuje to.v4
bibliotece wsparcia, ale dopieroREVISION 21
w bibliotece wsparciascaleType
centerCrop
(wsparcie biblioteki v25.3.1)Zrobiłem przez Custom ImageView:
Jak używać:
Wynik:
Mam nadzieję, że to ci pomoże.
źródło
Canvas.clipPath()
może powodowaćjava.lang.UnsupportedOperationException
w niektórych przypadkach. Zobacz stackoverflow.com/questions/13248904/…android:background
, ale nieandroid:src
.Szybkie rozwiązanie xml -
Możesz ustawić żądaną szerokość, wysokość i promień w CardView i scaleType w ImageView.
W systemie AndroidX użyj
<androidx.cardview.widget.CardView>
źródło
scaleType="fitXY"
i nie wygląda poprawnie @ThemBonesOdkryłem, że obie metody były bardzo pomocne w znalezieniu działającego rozwiązania. Oto moja wersja kompozytowa, która jest niezależna od pikseli i pozwala mieć pewne kwadratowe rogi, a reszta narożników ma ten sam promień (co jest zwykłym przypadkiem użycia). Dzięki obu powyższym rozwiązaniom:
Ponadto przesłoniłem ImageView, aby wstawić to, aby móc go zdefiniować w formacie xml. Możesz dodać trochę logiki, którą robi super połączenie tutaj, ale skomentowałem to, ponieważ w moim przypadku nie jest to pomocne.
Mam nadzieję że to pomoże!
źródło
Zaokrąglony obraz Za pomocą
ImageLoader
tutajUtwórz
DisplayImageOptions
:Lub możesz użyć
Picasso
biblioteki z Square.można pobrać plik RoundedTransformation tutaj tutaj
źródło
Ponieważ wszystkie odpowiedzi wydawały mi się zbyt skomplikowane tylko dla zaokrąglonych rogów, pomyślałem i doszedłem do innego rozwiązania, które moim zdaniem warto udostępnić, tylko z XML, na wypadek gdybyś miał trochę miejsca wokół obrazu:
Utwórz obramowany kształt z przezroczystą treścią:
Następnie w RelativeLayout możesz najpierw umieścić obraz, a następnie w tym samym miejscu nad kształtem za pomocą innego ImageView. Kształt okładki powinien być większy o wielkość szerokości obramowania. Zachowaj ostrożność, aby wziąć większy promień narożnika, ponieważ promień zewnętrzny jest zdefiniowany, ale promień wewnętrzny obejmuje obraz.
Mam nadzieję, że to też komuś pomoże.
Edytuj zgodnie z żądaniem CQM przykładowy układ względny:
źródło
Począwszy od wersji
1.2.0-alpha03
z tym Components Library Materiał nie jest nowyShapeableImageView
.Możesz użyć czegoś takiego jak:
z:
Lub programowo:
źródło
Moja implementacja ImageView z widżetem o zaokrąglonych rogach, który (w dół || w górę) dostosowuje rozmiar obrazu do wymaganych wymiarów. Wykorzystuje kod z CaspNZ.
źródło
Od niedawna istnieje inny sposób - użycie generowanego API Glide . Zajmuje to trochę początkowej pracy, ale daje całą moc Glide z elastycznością do robienia czegokolwiek, ponieważ piszesz rzeczywisty kod, więc myślę, że jest to dobre rozwiązanie na dłuższą metę. Ponadto użycie jest bardzo proste i schludne.
Najpierw skonfiguruj wersję Glide 4+:
Następnie utwórz klasę modułu aplikacji Glid, aby uruchomić przetwarzanie adnotacji:
Następnie utwórz rozszerzenie Glide, które faktycznie działa. Możesz go dostosować, aby robić, co chcesz:
Po dodaniu tych plików skompiluj projekt.
Następnie użyj go w swoim kodzie w następujący sposób:
źródło
RequestOptions
iwoptions
params@GlideExtension
klasy z adnotacjami i po prostu poszedłem.transform(new RoundedCorners(px))
tam, gdziepx
jest to samo (int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
).Jest fajna biblioteka, która pozwala kształtować obrazy.
Oto przykład:
Definicja kształtu:
Wynik:
źródło
Oto prosty przykład przesłaniający imageView, którego możesz użyć w projektancie układu do podglądu.
To jest szybkie rozwiązanie. Promień jest stosowany we wszystkich narożnikach i jest oparty na procentowej szerokości mapy bitowej.
Właśnie zastąpiłem
setImageDrawable
i użyłem metody wsparcia v4 dla zaokrąglonej mapy bitowej rysowanej.Stosowanie:
Podgląd za pomocą imageView i niestandardowego imageView:
źródło
Powinieneś rozciągnąć
ImageView
i narysować własny zaokrąglony prostokąt.Jeśli chcesz umieścić ramkę wokół obrazu, możesz również nałożyć zaokrągloną ramkę na widok obrazu w układzie.
[edytuj] Nakładaj ramkę na oryginalny obraz,
FrameLayout
na przykład za pomocą . Pierwszym elementemFrameLayout
będzie zaokrąglony obraz, który chcesz wyświetlić. Następnie dodaj kolejnąImageView
z ramką. DrugiImageView
zostanie wyświetlony na górze oryginału,ImageView
a zatem Android narysuje jego zawartość nad oryginałemImageView
.źródło
FrameLayout
put aImageView
i dodaj kolejnąImageView
z zaokrągloną ramką. W ten sposób pierwszyImageView
wyświetli wybrane zdjęcie, a drugiImageFrame
wyświetli zaokrągloną ramkę.Romain Guy jest tam, gdzie jest.
Wersja skrócona w następujący sposób.
źródło
To czyste rozwiązanie XML było wystarczająco dobre w moim przypadku. http://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/
EDYTOWAĆ
Oto odpowiedź w skrócie:
W folderze / res / drawable utwórz plik frame.xml. W nim definiujemy prosty prostokąt z zaokrąglonymi narożnikami i przezroczystym środkiem.
W pliku układu dodajesz LinearLayout, który zawiera standardowy ImageView, a także zagnieżdżony FrameLayout. FrameLayout korzysta z wypełnienia i niestandardowej szuflady, aby dać złudzenie zaokrąglonych rogów.
źródło
Podpierając się do George'a Waltersa II powyżej, właśnie wziąłem jego odpowiedź i nieco ją rozszerzyłem, aby w inny sposób obsługiwać zaokrąglanie poszczególnych rogów. Można to nieco zoptymalizować (niektóre docelowe rektyki się pokrywają), ale nie za dużo.
Wiem, że ten wątek jest nieco stary, ale jest to jeden z najlepszych wyników w zapytaniach w Google na temat zaokrąglania rogów ImageViews na Androida.
źródło
Zastosuj kształt do swojego,
imageView
jak poniżej:może ci pomóc przyjacielu.
źródło
Dlaczego nie przyciąć
draw()
?Oto moje rozwiązanie:
Kod:
źródło
Poniżej utworzono obiekt układu zaokrąglonego prostokąta, który rysuje zaokrąglony prostokąt wokół wszystkich umieszczonych w nim obiektów potomnych. Pokazuje także, jak programowo tworzyć widoki i układy bez użycia plików xml układu.
Klasa obiektu układu RoundedRectangle jest zdefiniowana tutaj:
źródło
Kotlin
Aby utworzyć
ImageView
Circular, możemy zmienić zacornerRadius
pomocą:źródło
Wielkie dzięki za pierwszą odpowiedź. Oto zmodyfikowana wersja do konwersji obrazu prostokątnego na kwadratowy (i zaokrąglony), a kolor wypełnienia jest przekazywany jako parametr.
źródło
Jeśli korzystasz z Glide Library, byłoby to pomocne:
źródło
jeśli twój obraz jest w Internecie, najlepszym sposobem jest użycie poślizgu i
RoundedBitmapDrawableFactory
(z API 21 - ale dostępny w bibliotece pomocy) w następujący sposób:źródło
centerCrop
możesz użyć tylko
ImageView
w swoim układzie i zaglide
pomocą tej metody możesz zastosować zaokrąglone rogi.najpierw w pisaniu ocen,
dla obrazu z zaokrąglonymi narożnikami,
metoda wywołania:
źródło
ImageView
.Odpowiedz na przekierowane tutaj pytanie: „Jak utworzyć okrągły ImageView w systemie Android?”
źródło
Za pomocą biblioteki glide i klasy RoundedBitmapDrawableFactory można to łatwo osiągnąć. Może być konieczne utworzenie okrągłego obrazu zastępczego.
źródło
Dla tych, którzy używają Glide i Kotlin, możesz to osiągnąć poprzez rozszerzenie
RequestBuilder
i użyj jako;
źródło
roundCorners
jak wyżej? @ Dr.aNdRO