Chciałbym, aby każdy obraz z mojego ImageView
był okrągły z ramką.
Szukałem, ale nie mogłem znaleźć żadnych przydatnych informacji (nic, co próbowałem, nie zadziałało).
Jak mogę to osiągnąć przez xml: Utwórz plik ImageView
z pewnym kodem src i ustaw go tak, aby był okrągły z ramką?
Odpowiedzi:
Możesz zrobić prosty okrąg z białą ramką i przezroczystą zawartością o kształcie.
Następnie ustaw listę warstw do rysowania i umieść ją jako tło do podglądu obrazu.
i umieść to jako tło do podglądu obrazu.
Będziesz miał coś takiego.
źródło
To najprostszy sposób, który zaprojektowałem. Spróbuj tego.
Jeśli pracujesz na wersjach Androida powyżej Lollipop
Dodawanie obramowania do okrągłego ImageView - NAJNOWSZA WERSJA
Owiń go innym CardView nieco większym niż wewnętrzny i ustaw kolor tła, aby dodać obramowanie do okrągłego obrazu. Możesz zwiększyć rozmiar zewnętrznego CardView, aby zwiększyć grubość ramki.
źródło
Mam nadzieję, że to Ci pomoże.
1) CircleImageView
Nie zapomnij o implementacji: Gradle Scripts> build.gradle (Module: app)> zależności
Pełny opis można znaleźć tutaj: Źródło tutaj.
2) CircularImageView
Nie zapomnij o implementacji: Gradle Scripts> build.gradle (Module: app)> zależności
Pełny opis można znaleźć tutaj: Źródło tutaj.
ź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.
Glide V4:
Glide V3:
W przypadku Picasso RoundedTransformation jest to naprawdę świetne rozwiązanie, które daje dodatkową opcję zaokrąglania obrazu na górnej lub dolnej krawędzi.
źródło
Glide.with(context).load(imgUrl).apply(new RequestOptions().centerCrop()) .into(imageView)
.apply(RequestOptions.circleCropTransform())
GlideApp
jest skonfigurowana w aplikacji:GlideApp.with(this).load(url).circleCrop().into(imageView);
.Powyższe metody nie działają, jeśli używasz
src
atrybutu. To, co zrobiłem, to umieszczenie dwóch widoków obrazu w układzie ramki jeden nad drugim w ten sposób:Po prostu włóż okrągły_krop.png do folderu, który można wyciągnąć, który ma kształt wymiarów obrazu (w moim przypadku kwadrat) z białym tłem i przezroczystym okręgiem pośrodku. Możesz użyć tego obrazu, jeśli chcesz mieć kwadratowy widok obrazu.
Wystarczy pobrać zdjęcie powyżej.
źródło
Oto jeden z najprostszych sposobów, aby to zrobić, użyj następującego kodu:
Zależności
Kod XML
Zrzut ekranu:
Źródło: Circular ImageView GitHub Repository
źródło
To załatwi sprawę:
rectangle.xml
circle.xml
profile_image.xml (lista warstw)
Twój układ
źródło
Wystarczy użyć
ShapeableImageView
dostarczonej przez bibliotekę komponentów materiałów.Coś jak:
z:
Uwaga: wymaga co najmniej wersji
1.2.0-alpha03
.źródło
Możesz po prostu użyć CardView bez żadnej zewnętrznej biblioteki
źródło
Używam shape = „oval” zamiast „ring” poniżej. To zadziałało dla mnie. Aby utrzymać obraz w granicach, używam
<padding>
i ustawiam<adjustViewBounds>
na true<ImageView>
. Próbowałem z obrazami o wielkości od 50 x 50 pikseli do 200 x 200 pikseli.źródło
android:scaleType="fitCenter"
@Jotman Singh, odpowiedź jest bardzo dobra (dla jednolitych środowisk), dlatego chciałbym ją ulepszyć, udostępniając wektor do rysowania, który można ponownie pokolorować według potrzeb, jest to również wygodne, ponieważ jednoczęściowy kształt wektorowy jest dobrze skalowalny.
To jest kształt koła prostokątnego (@ drawable / shape_round_profile_pic):
Użycie jest takie samo:
źródło
GlideApp.with(getApplicationContext()).asBitmap().load(profilePhotoUrl) .circleCrop()
Wystarczy użyć tych wierszy kodu i gotowe:
Nie zapomnij zaimportować:
Dodaj tę bibliotekę w build.gradle:
źródło
Spróbuj tego.
i użyj tego ImageView w układzie takim jak:
źródło
Jeśli używasz Material Design w swojej aplikacji, użyj tego
źródło
Ta klasa to niestandardowy okrągły widok obrazu z cieniem, obrysem, nasyceniem i za pomocą tego niestandardowego okrągłego obrazu można uzyskać obraz w okrągłym kształcie z promieniem. Faceci dla Circular Shadow ImageView Nie ma potrzeby Github tej klasy wystarczy.
Dodawanie CircularImageView do układu
źródło
W rzeczywistości możesz korzystać z tego, co zapewnia Google za pośrednictwem biblioteki wsparcia Klasa RoundedBitmapDrawableFactory ( tu i tutaj zamiast ), zamiast używać biblioteki innej firmy:
Stopień:
MainActivity.kt
res / layout / activity_main.xml
res / drawable / avatar_1.xml
Wynik:
Załóżmy, że chcesz dodać na nim ramkę, możesz użyć tego na przykład:
stroke_drawable.xml
I dodaj
android:foreground="@drawable/stroke_drawable"
do ImageView w pliku XML układu, a otrzymasz:Nie jestem jednak pewien, jak dodać cień (który będzie działał na starszych wersjach Androida). Korzystając z FloatingActionButton (z zależności „com.google.android.material: material” ), nie udało mi się zmusić bitmapy do wypełnienia samego FAB. Używanie go zamiast tego może być jeszcze lepsze, jeśli zadziała.
EDYCJA: jeśli chcesz dodać cień elewacji (dostępny z API 21), możesz nieco zmienić to, co napisałem:
Wewnątrz pliku XML układu:
CircularShadowViewOutlineProvider.kt
W kodzie:
Wynik:
źródło
Mam proste rozwiązanie. Utwórz nowy zasób obrazu, klikając prawym przyciskiem myszy nazwę pakietu i wybierając Nowy-> zasób obrazu. Wprowadź nazwę (dowolną nazwę) i ścieżkę (lokalizację obrazu w systemie). Następnie kliknij przycisk Dalej i zakończ. Jeśli wprowadzisz nazwę obrazu jako „img”, okrągły folder o nazwie „img_round” zostanie utworzony automatycznie w folderze mipmap.
Następnie zrób to:
Podgląd może nadal wyświetlać prostokątny obraz. Ale jeśli uruchomisz aplikację na swoim urządzeniu, będzie ona okrągła.
źródło
Utwórz CustomImageview, a następnie po prostu zastąp jego
onDraw()
następującą metodę:Jeśli chcesz również kod niestandardowego widgetu:
Dodaj również następujący kod do pliku res / attrs.xml, aby utworzyć wymagany atrybut: -
źródło
źródło
jeśli wolisz wyciąć obraz do wyświetlenia w kółku, proszę bardzo
źródło
wystarczy użyć tego prostego kodu: Najpierw dodaj zależność:
następnie dodaj w układzie xml następujący kod: -
źródło
te dwie biblioteki mogą ci pomóc.
https://github.com/vinc3m1/RoundedImageView
zaimplementuj poniższy kod:
Proste użycie:
https://github.com/chirag-kachhadiya/RoundedImageView
Proste użycie:
zaimplementuj poniższy kod:
źródło
Jak opisano w odpowiedzi Orhana Obuta, ale ze zmianami:
aby uniknąć rozciągnięcia obrazu. I img.xml:
(bez zmian) i circle.xml:
tutaj grubość pierścienia osiągnęła maksimum - 1000dp
i promień Współczynnik jest połową szerokości obrazu (maksymalna szerokość pierścienia, tak?) - 2,
a kreska jest w razie potrzeby wymaganą krawędzią.
Użyłem kwadratowego obrazu png (profile.png), btw. Z tą samą szerokością i wysokością. Jest to poprawne w przypadku dowolnych wymiarów ImageView.
źródło