Sous Android, une ImageView est un rectangle par défaut. Comment puis-je en faire un rectangle arrondi (couper les 4 coins de mon bitmap pour être des rectangles arrondis) dans ImageView?
573
Sous Android, une ImageView est un rectangle par défaut. Comment puis-je en faire un rectangle arrondi (couper les 4 coins de mon bitmap pour être des rectangles arrondis) dans ImageView?
ShapeableImageView
faire une image circulaire ou arrondieView stackoverflow.com/a/61086632/7666442Réponses:
C'est assez tard dans la réponse, mais pour quiconque le recherche, vous pouvez faire le code suivant pour arrondir manuellement les coins de vos images.
http://www.ruibm.com/?p=184
Ce n'est pas mon code, mais je l'ai utilisé et cela fonctionne à merveille. Je l'ai utilisé comme aide dans une classe ImageHelper et je l'ai étendu un peu pour transmettre la quantité de plumes dont j'ai besoin pour une image donnée.
Le code final ressemble à ceci:
J'espère que cela aide quelqu'un!
la source
Alors que la réponse ci-dessus fonctionne, Romain Guy (un développeur Android de base) montre une meilleure méthode dans son blog qui utilise moins de mémoire en utilisant un shader ne créant pas une copie du bitmap. L'essentiel général de la fonctionnalité est ici:
Les avantages de cette méthode par rapport aux autres méthodes sont les suivants:
J'ai créé un RoundedImageView basé sur ce code qui enveloppe cette logique dans un ImageView et ajoute un
ScaleType
support approprié et une bordure arrondie facultative.la source
/ example / res / layout / rounded_item.xml
pourquoi spécifiez-vous une image src lorsque toutes vos sources sont codées en dur? Belle démo, juste exagérée.Un autre moyen simple consiste à utiliser une CardView avec le rayon de coin et une ImageView à l'intérieur:
la source
Le découpage en formes arrondies a été ajouté à la
View
classe dans l'API 21.Faites juste ceci:
res / drawable / round_outline.xml
android:background="@drawable/round_outline"
android:clipToOutline="true"
Malheureusement, il y a un bogue et cet attribut XML n'est pas reconnu. Heureusement, nous pouvons toujours configurer l'écrêtage en Java:
ImageView.setClipToOutline(true)
Voici à quoi cela ressemblera:
Remarque:
Cette méthode fonctionne pour toutes les formes dessinables (pas seulement arrondies). Il fixera l'ImageView à n'importe quel contour de forme que vous avez défini dans votre xml Drawable.
Note spéciale sur ImageViews
setClipToOutline()
ne fonctionne que lorsque l'arrière-plan de la vue est défini sur une forme dessinable. Si cette forme d'arrière-plan existe, View traite le contour de la forme comme des bordures à des fins de découpe et d'ombrage.Cela signifie que si vous souhaitez utiliser
setClipToOutline()
pour arrondir les coins d'une ImageView, votre image doit être définie à l'aide deandroid:src
au lieu deandroid:background
(car l'arrière-plan doit être défini selon votre forme arrondie). Si vous DEVEZ utiliser l'arrière-plan pour définir votre image au lieu de src, vous pouvez utiliser cette solution de contournement:la source
android:clipToOutline
, il faut utiliserandroid:outlineProvider="background"
.Dans la version 21 de la bibliothèque de support, il existe maintenant une solution à cela: elle s'appelle RoundedBitmapDrawable .
C'est fondamentalement comme un Drawable normal, sauf que vous lui donnez un rayon de coin pour l'écrêtage avec:
Donc, en commençant par
Bitmap src
et une cibleImageView
, cela ressemblerait à ceci:la source
android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
doncv4
aussi le soutient.v4
bibliothèque de support mais pas avantREVISION 21
la bibliothèque de supportscaleType
centerCrop
(bibliothèque de support v25.3.1)J'ai fait par Custom ImageView:
Comment utiliser:
Production:
J'espère que cela vous aidera.
la source
Canvas.clipPath()
peut provoquerjava.lang.UnsupportedOperationException
dans certains cas. Voir stackoverflow.com/questions/13248904/…android:background
, mais pasandroid:src
.Une solution xml rapide -
Vous pouvez définir la largeur, la hauteur et le rayon souhaités sur CardView et scaleType sur ImageView.
Avec AndroidX, utilisez
<androidx.cardview.widget.CardView>
la source
scaleType="fitXY"
et ne semble pas correcte @ThemBonesJ'ai trouvé que les deux méthodes étaient très utiles pour trouver une solution de travail. Voici ma version composite, qui est indépendante des pixels et vous permet d'avoir des coins carrés avec le reste des coins ayant le même rayon (ce qui est le cas d'utilisation habituel). Merci aux deux solutions ci-dessus:
De plus, j'ai outrepassé ImageView pour le mettre afin de pouvoir le définir en xml. Vous voudrez peut-être ajouter une partie de la logique que le super appel fait ici, mais je l'ai commentée car elle n'est pas utile dans mon cas.
J'espère que cela t'aides!
la source
Image arrondie Utilisation
ImageLoader
iciCréer
DisplayImageOptions
:Ou vous pouvez utiliser la
Picasso
bibliothèque de Square.vous pouvez télécharger le fichier RoundedTransformation ici ici
la source
Comme toutes les réponses me semblaient trop compliquées juste pour les coins ronds, j'ai pensé et suis venu à une autre solution qui, je pense, mérite d'être partagée, juste avec XML au cas où vous auriez un peu d'espace autour de l'image:
Créez une forme bordée avec un contenu transparent comme celui-ci:
Ensuite, dans un RelativeLayout, vous pouvez d'abord placer votre image, puis au même endroit au-dessus de la forme avec une autre ImageView. La forme du couvercle doit être plus grande en fonction de la largeur de la bordure. Faites attention à prendre un rayon d'angle plus grand car le rayon extérieur est défini mais le rayon intérieur est ce qui recouvre votre image.
J'espère que ça aide quelqu'un aussi.
Modifiez selon la demande CQM l'exemple de disposition relative:
la source
À partir de la version
1.2.0-alpha03
de la bibliothèque de composants de matériaux, il y a la nouvelleShapeableImageView
.Vous pouvez utiliser quelque chose comme:
avec:
Ou par programmation:
la source
Mon implémentation du widget ImageView avec coins arrondis, qui (bas || haut) dimensionne l'image aux dimensions requises. Il utilise la forme de code CaspNZ.
la source
Récemment, il existe un autre moyen: utiliser l'API générée de Glide . Cela prend un peu de travail initial mais vous donne ensuite toute la puissance de Glide avec la flexibilité de faire n'importe quoi parce que vous écrivez le code réel, donc je pense que c'est une bonne solution à long terme. De plus, l'utilisation est très simple et soignée.
Tout d'abord, configurez Glide version 4+:
Créez ensuite la classe de module d'application de Glid pour déclencher le traitement des annotations:
Créez ensuite l'extension Glide qui fait le travail. Vous pouvez le personnaliser pour faire ce que vous voulez:
Après avoir ajouté ces fichiers, générez votre projet.
Ensuite, utilisez-le dans votre code comme ceci:
la source
RequestOptions
etoptions
dans les paramètres@GlideExtension
classe annotée et je suis allé avec.transform(new RoundedCorners(px))
oùpx
est le même (int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
).Il y a une bibliothèque sympa qui vous permet de façonner des vues d'images.
Voici un exemple:
Définition de la forme:
Résultat:
la source
Voici un exemple simple remplaçant imageView, vous pouvez également l'utiliser dans le concepteur de mise en page pour prévisualiser.
C'est pour une solution rapide. Le rayon est utilisé à tous les coins et est basé sur le pourcentage de largeur de bitmap.
Je viens de remplacer
setImageDrawable
et d'utiliser la méthode de support v4 pour le bitmap arrondi dessinable.Usage:
Aperçu avec imageView et imageView personnalisée:
la source
Vous devez étendre
ImageView
et dessiner votre propre rectangle arrondi.Si vous voulez un cadre autour de l'image, vous pouvez également superposer le cadre arrondi au-dessus de la vue de l'image dans la mise en page.
[modifier] Superposez le cadre pour opérer l'image originale, en utilisant un
FrameLayout
par exemple. Le premier élément duFrameLayout
sera l'image que vous souhaitez afficher arrondie. Ajoutez ensuite un autreImageView
avec le cadre. Le secondImageView
sera affiché au-dessus de l'originalImageView
et ainsi Android dessinera son contenu au-dessus de l'origineImageView
.la source
FrameLayout
mettre unImageView
dedans et en ajouter un autreImageView
avec le cadre arrondi. De cette façon, le premierImageView
affichera votre image sélectionnée et le secondImageFrame
affichera le cadre arrondi.Romain Guy est là où il en est.
Version réduite comme suit.
la source
Cette solution XML pure était assez bonne dans mon cas. http://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/
ÉDITER
Voici la réponse en bref:
Dans le dossier / res / drawable, créez un fichier frame.xml. Dans celui-ci, nous définissons un rectangle simple avec des coins arrondis et un centre transparent .
Dans votre fichier de mise en page, vous ajoutez un LinearLayout qui contient un ImageView standard, ainsi qu'un FrameLayout imbriqué. Le FrameLayout utilise un rembourrage et le dessinable personnalisé pour donner l'illusion de coins arrondis.
la source
Accessoires à George Walters II ci-dessus, je viens de prendre sa réponse et de l'étendre un peu pour prendre en charge les arrondis individuels différemment. Cela pourrait être optimisé un peu plus (certains des rects cibles se chevauchent), mais pas beaucoup.
Je sais que ce fil est un peu ancien, mais c'est l'un des meilleurs résultats pour les requêtes sur Google pour savoir comment arrondir les coins d'ImageViews sur Android.
la source
Appliquez une forme à votre
imageView
comme ci-dessous:cela peut vous être utile, mon ami.
la source
Pourquoi ne pas couper
draw()
?Voici ma solution:
Code:
la source
Ce qui suit crée un objet de présentation en rectangle arrondi qui dessine un rectangle arrondi autour des objets enfants qui y sont placés. Il montre également comment créer des vues et des présentations par programme sans utiliser les fichiers xml de présentation.
La classe de l'objet de présentation RoundedRectangle est celle définie ici:
la source
Kotlin
Pour faire
ImageView
Circulaire, nous pouvons changercornerRadius
avec:la source
Merci beaucoup pour la première réponse. Voici une version modifiée pour convertir une image rectangulaire en une image carrée (et arrondie) et la couleur de remplissage est passée en paramètre.
la source
Si vous utilisez Glide Library, cela serait utile:
la source
si votre image est sur Internet, le meilleur moyen est d'utiliser glide et
RoundedBitmapDrawableFactory
(à partir d'API 21 - mais disponible dans la bibliothèque de support) comme ceci:la source
centerCrop
vous pouvez utiliser uniquement
ImageView
dans votre mise en page et en utilisantglide
, vous pouvez appliquer des coins arrondis en utilisant cette méthode.d'abord dans votre écriture gradle,
pour une image aux coins arrondis,
méthode d'appel:
la source
ImageView
.Répondez à la question qui est redirigée ici: "Comment créer une ImageView circulaire dans Android?"
la source
Avec l'aide de la bibliothèque glide et de la classe RoundedBitmapDrawableFactory , c'est facile à réaliser. Vous devrez peut-être créer une image d'espace réservé circulaire.
la source
Pour ceux qui utilisent Glide et Kotlin, vous pouvez le faire en étendant
RequestBuilder
et utiliser comme;
la source
roundCorners
comme ci-dessus? @ Dr.aNdRO