In Android ist eine ImageView standardmäßig ein Rechteck. Wie kann ich in der ImageView ein abgerundetes Rechteck erstellen (alle 4 Ecken meiner Bitmap abschneiden, um abgerundete Rechtecke zu erhalten)?
573
In Android ist eine ImageView standardmäßig ein Rechteck. Wie kann ich in der ImageView ein abgerundetes Rechteck erstellen (alle 4 Ecken meiner Bitmap abschneiden, um abgerundete Rechtecke zu erhalten)?
ShapeableImageView
kreisförmige oder abgerundete imageView stackoverflow.com/a/61086632/7666442Antworten:
Dies ist eine ziemlich späte Antwort, aber für alle anderen, die danach suchen, können Sie den folgenden Code ausführen, um die Ecken Ihrer Bilder manuell abzurunden.
http://www.ruibm.com/?p=184
Dies ist nicht mein Code, aber ich habe ihn verwendet und er funktioniert wunderbar. Ich habe es als Helfer in einer ImageHelper-Klasse verwendet und es nur ein wenig erweitert, um die Menge an Federn zu übergeben, die ich für ein bestimmtes Bild benötige.
Der endgültige Code sieht folgendermaßen aus:
Hoffe das hilft jemandem!
quelle
Während die obige Antwort funktioniert, zeigt Romain Guy (ein zentraler Android-Entwickler) in seinem Blog eine bessere Methode, die weniger Speicher benötigt, indem ein Shader verwendet wird, der keine Kopie der Bitmap erstellt. Der allgemeine Kern der Funktionalität ist hier:
Dies hat gegenüber anderen Methoden folgende Vorteile:
Ich habe eine RoundedImageView basierend auf diesem Code erstellt, die diese Logik in eine ImageView einschließt und die richtige
ScaleType
Unterstützung und einen optionalen abgerundeten Rand hinzufügt .quelle
/ example / res / layout / rounded_item.xml
Warum geben Sie in Ihrem Warum einen Bild-Quellcode an, wenn alle Ihre Quellen fest codiert sind? Schöne Demo, einfach übertrieben.Eine andere einfache Möglichkeit ist die Verwendung einer CardView mit dem Eckenradius und einer ImageView im Inneren:
quelle
Das Abschneiden auf abgerundete Formen wurde der
View
Klasse in API 21 hinzugefügt .Mach das einfach:
res / drawable / round_outline.xml
android:background="@drawable/round_outline"
android:clipToOutline="true"
Leider gibt es einen Fehler und dieses XML-Attribut wird nicht erkannt. Zum Glück können wir das Clipping noch in Java einrichten:
ImageView.setClipToOutline(true)
So wird es aussehen:
Hinweis:
Diese Methode funktioniert für jede zeichnbare Form (nicht nur abgerundet). Die ImageView wird an die Formkontur angepasst, die Sie in Ihrer Drawable-XML definiert haben.
Besonderer Hinweis zu ImageViews
setClipToOutline()
Funktioniert nur, wenn der Hintergrund der Ansicht auf eine Form eingestellt ist, die gezeichnet werden kann. Wenn diese Hintergrundform vorhanden ist, behandelt View den Umriss der Form als Rahmen für Beschneidungs- und Schattenzwecke.Dies bedeutet, wenn Sie
setClipToOutline()
die Ecken in einer ImageView abrunden möchten, muss Ihr Bildandroid:src
anstelle von festgelegt werdenandroid:background
(da der Hintergrund auf Ihre abgerundete Form eingestellt werden muss). Wenn Sie den Hintergrund verwenden müssen, um Ihr Bild anstelle von src festzulegen, können Sie diese Problemumgehung verwenden:quelle
android:clipToOutline
muss man verwendenandroid:outlineProvider="background"
.In Version 21 der Support-Bibliothek gibt es jetzt eine Lösung dafür: RoundedBitmapDrawable .
Es ist im Grunde wie ein normales Drawable, außer dass Sie ihm einen Eckradius für das Abschneiden geben mit:
Ausgehend von
Bitmap src
einem ZielImageView
würde es also ungefähr so aussehen:quelle
android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
sov4
auch unterstützungen.v4
Support-Bibliothek, aber erstREVISION 21
in der Support-BibliothekscaleType
centerCrop
(Support Library v25.3.1)Ich habe von Custom ImageView gemacht:
Wie benutzt man:
Ausgabe:
Hoffe das würde dir helfen.
quelle
Canvas.clipPath()
kannjava.lang.UnsupportedOperationException
in einigen Fällen verursachen. Siehe stackoverflow.com/questions/13248904/…android:background
, aber nichtandroid:src
.Eine schnelle XML-Lösung -
Sie können die gewünschte Breite, Höhe und den gewünschten Radius in CardView und scaleType in ImageView festlegen.
Verwenden Sie mit AndroidX
<androidx.cardview.widget.CardView>
quelle
scaleType="fitXY"
@ThemBonesIch fand, dass beide Methoden sehr hilfreich waren, um eine funktionierende Lösung zu finden. Hier ist meine zusammengesetzte Version, die pixelunabhängig ist und es Ihnen ermöglicht, einige quadratische Ecken zu haben, wobei der Rest der Ecken den gleichen Radius hat (was der übliche Anwendungsfall ist). Dank an beide oben genannten Lösungen:
Außerdem habe ich ImageView überschrieben, um dies einzufügen, damit ich es in XML definieren kann. Vielleicht möchten Sie einen Teil der Logik hinzufügen, die der Superaufruf hier ausführt, aber ich habe ihn kommentiert, da er in meinem Fall nicht hilfreich ist.
Hoffe das hilft!
quelle
Abgerundetes Bild
ImageLoader
Hier verwendenErstellen
DisplayImageOptions
:Oder Sie können die
Picasso
Bibliothek von Square aus verwenden.Sie können hier RoundedTransformation Datei herunterladen hier
quelle
Da mir alle Antworten nur für runde Ecken zu kompliziert erschienen, dachte ich und kam zu einer anderen Lösung, die ich für sinnvoll halte, nur mit XML, falls Sie etwas Platz um das Bild haben:
Erstellen Sie eine Rahmenform mit transparentem Inhalt wie folgt:
In einem RelativeLayout können Sie dann zuerst Ihr Bild und dann mit einer anderen ImageView an derselben Stelle über der Form platzieren. Die Deckform sollte um den Umfang der Randbreite größer sein. Achten Sie darauf, einen größeren Eckenradius zu verwenden, da der äußere Radius definiert ist, aber der innere Radius bedeckt Ihr Bild.
Hoffe es hilft auch jemandem.
Bearbeiten Sie das entsprechende Layoutbeispiel gemäß CQM-Anforderung:
quelle
Ab der Version
1.2.0-alpha03
der Material Components Library gibt es die neueShapeableImageView
.Sie können etwas verwenden wie:
mit:
Oder programmatisch:
quelle
Meine Implementierung von ImageView mit einem Widget mit abgerundeten Ecken, das das Bild (nach unten || nach oben) auf die erforderlichen Abmessungen anpasst. Es verwendet die Codeform CaspNZ.
quelle
Seit kurzem gibt es einen anderen Weg - die Verwendung der generierten API von Glide . Es erfordert einige anfängliche Arbeiten, bietet Ihnen dann aber die ganze Kraft von Glide mit der Flexibilität, alles zu tun, da Sie den eigentlichen Code schreiben, sodass ich denke, dass dies auf lange Sicht eine gute Lösung ist. Außerdem ist die Verwendung sehr einfach und ordentlich.
Richten Sie zunächst Glide Version 4+ ein:
Erstellen Sie dann die App-Modulklasse von Glid, um die Annotationsverarbeitung auszulösen:
Erstellen Sie dann die Glide-Erweiterung, die die Arbeit tatsächlich erledigt. Sie können es anpassen, um zu tun, was Sie wollen:
Erstellen Sie nach dem Hinzufügen dieser Dateien Ihr Projekt.
Verwenden Sie es dann wie folgt in Ihrem Code:
quelle
RequestOptions
undoptions
in params einzufügen@GlideExtension
Anmerkungen versehenen Klasse zu vermeiden, und ging einfach dahin,.transform(new RoundedCorners(px))
wopx
es dasselbe ist (int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
).Es gibt eine coole Bibliothek , mit der Sie Bildansichten gestalten können.
Hier ist ein Beispiel:
Formdefinition:
Ergebnis:
quelle
Hier ist ein einfaches Beispiel, das imageView überschreibt. Sie können es dann auch im Layout-Designer zur Vorschau verwenden.
Dies ist für eine schnelle Lösung. Der Radius wird an allen Ecken verwendet und basiert auf dem Prozentsatz der Bitmap-Breite.
Ich habe gerade
setImageDrawable
die Support v4-Methode für abgerundete Bitmap-Zeichen überschrieben und verwendet.Verwendungszweck:
Vorschau mit imageView und benutzerdefiniertem imageView:
quelle
Sie sollten
ImageView
Ihr eigenes abgerundetes Rechteck erweitern und zeichnen.Wenn Sie einen Rahmen um das Bild haben möchten, können Sie den abgerundeten Rahmen auch über die Bildansicht im Layout legen.
[Bearbeiten] Überlagern Sie den Rahmen, um das Originalbild zu öffnen, indem Sie
FrameLayout
beispielsweise ein verwenden. Das erste Element vonFrameLayout
wird das Bild sein, das Sie diplomatisch gerundet haben möchten. Fügen Sie dann einen weiterenImageView
mit dem Rahmen hinzu. Die zweiteImageView
wird über dem Original angezeigtImageView
und Android zeichnet den Inhalt über das OriginalImageView
.quelle
FrameLayout
Put-ImageView
In und fügen Sie ein weiteresImageView
mit dem abgerundeten Rahmen hinzu. Auf diese Weise zeigt das ersteImageView
das ausgewählte Bild und das zweiteImageFrame
den abgerundeten Rahmen an.Romain Guy ist da, wo es ist.
Minimierte Version wie folgt.
quelle
Diese reine XML-Lösung war in meinem Fall gut genug. http://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/
BEARBEITEN
Hier ist die Antwort auf den Punkt gebracht:
Erstellen Sie im Ordner / res / drawable eine Datei frame.xml. Darin definieren wir ein einfaches Rechteck mit abgerundeten Ecken und einer transparenten Mitte.
In Ihrer Layoutdatei fügen Sie ein LinearLayout hinzu, das eine Standard-ImageView sowie ein verschachteltes FrameLayout enthält. Das FrameLayout verwendet Polsterung und benutzerdefiniertes Zeichnen, um die Illusion abgerundeter Ecken zu erzeugen.
quelle
Requisiten an George Walters II oben, ich habe nur seine Antwort genommen und sie ein wenig erweitert, um das Abrunden einzelner Ecken unterschiedlich zu unterstützen. Dies könnte etwas weiter optimiert werden (einige der Zielbereiche überlappen sich), aber nicht viel.
Ich weiß, dass dieser Thread etwas alt ist, aber er ist eines der besten Ergebnisse bei Abfragen bei Google, wie man Ecken von ImageViews auf Android abrundet.
quelle
Wenden Sie eine Form
imageView
wie folgt an:es kann für deinen Freund hilfreich sein.
quelle
Warum nicht einschneiden
draw()
?Hier ist meine Lösung:
Code:
quelle
Im Folgenden wird ein Layoutobjekt für abgerundete Rechtecke erstellt, das ein abgerundetes Rechteck um alle darin platzierten untergeordneten Objekte zeichnet. Außerdem wird gezeigt, wie Ansichten und Layouts programmgesteuert erstellt werden, ohne die XML-Layoutdateien zu verwenden.
Die Klasse für das RoundedRectangle-Layoutobjekt ist wie folgt definiert:
quelle
Kotlin
Um
ImageView
Circular zu machen , können wir änderncornerRadius
mit:quelle
Vielen Dank für die erste Antwort. Hier ist die modifizierte Version, um ein rechteckiges Bild in ein quadratisches (und abgerundetes) Bild umzuwandeln, und die Füllfarbe wird als Parameter übergeben.
quelle
Wenn Sie die Glide Library verwenden, ist dies hilfreich:
quelle
Wenn sich Ihr Bild im Internet befindet, verwenden Sie am besten glide und
RoundedBitmapDrawableFactory
(ab API 21 - aber in der Support-Bibliothek verfügbar) wie folgt :quelle
centerCrop
Sie können nur
ImageView
in Ihrem Layout verwenden undglide
mit dieser Methode können Sie runde Ecken anwenden.schreibe zuerst in dein gradle,
für Bild mit abgerundeten Ecken,
Aufrufmethode:
quelle
ImageView
.Antwort auf die hier umgeleitete Frage: "Wie erstelle ich eine kreisförmige ImageView in Android?"
quelle
Mit Hilfe von glide Bibliothek und RoundedBitmapDrawableFactory Klasse ist es leicht zu erreichen. Möglicherweise müssen Sie ein kreisförmiges Platzhalterbild erstellen.
quelle
Für diejenigen, die Glide und Kotlin verwenden, können Sie dies durch Erweitern erreichen
RequestBuilder
und verwenden als;
quelle
roundCorners
wie oben hinzugefügt ? @ Dr.aNdRO