web-dev-qa-db-fra.com

Définir l'image du coin rond dans ImageView

J'ai cherché plus sur les sites Web et j'ai reçu de nombreuses suggestions comme ci-dessous

  • Changer l'arrière-plan avec un style personnalisé pour définir le rayon et le rembourrage des coins

  • Changer l'image donnée en Bitmap en décodant l'image et la fonctionnalité de recadrage en passant ce bitmap et cette largeur (cela prend plus de temps à charger)

J'ai vérifié le WhatsApp Chat history list and it has rounded corner images but its loaded with minimum time.

Pourriez-vous s'il vous plaît me suggérer la meilleure façon de créer un modèle de liste avec des images arrondies comme dans WhatsApp?

Je m'attends à changer l'image avec un coin arrondi en définissant les détails du style dans la page xml . (la largeur et la hauteur de l'image sont de 60 dp, ma liste contenant également environ 60 éléments)

Références:

res/mylayout.xml: 

<ImageView
        Android:id="@+id/contactssnap"
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:src="@drawable/contactssnap"
        Android:background="@drawable/roundimage" />

res/drawable/roundimage.xml: 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle" >
    <solid Android:color="#ffffffff" />
    <stroke
        Android:width="2dp"
        Android:color="#90a4ae" />
    <size
        Android:height="50dp"
        Android:width="50dp" />
    <padding
        Android:bottom="2dp"
        Android:left="2dp"
        Android:right="2dp"
        Android:top="2dp" />
    <corners Android:radius="100dp" />
</shape>

Remarque: pris en charge Android Version de 14 à 22

androidandroid-listviewandroid-imageviewandroid-xml
11
Ponmalar

La réponse de sats est travaillée. Mais RoundedBitmapDrawable ne peut pas être appliqué à une ImageView avec scaleType: centerCrop.

Une mise à jour.

Si vous utilisez Android API au niveau 21. Nous avons ici une solution simple.

Tout d'abord, créez un dessin comme arrière-plan pour la vue d'image

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<corners Android:radius="8dp" />
<solid Android:color="@Android:color/white" />

<stroke
    Android:width="1dp"
    Android:color="@color/colorWhite" />
</shape>

Ensuite, changez la propriété setClipToOutline de ImageView en true. Et définissez le dessin arrondi comme arrière-plan d'ImageView.

C'est tout.

enter image description here

Dans ma démo, j'utilise cette méthode pour une vue d'image arrondie. Peut le trouver ici dialogue de cuberto

12
Cuong Vo

Mettez imageView dans CardView et définissez CornerRadius pour CardView

<Android.support.v7.widget.CardView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:cardCornerRadius="8dp"
        app:cardElevation="0dp">

        <ImageView
            Android:id="@+id/imgTourismHr"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:scaleType="fitXY" />

    </Android.support.v7.widget.CardView>
8
Mostafa Azadi

vous pouvez utiliser les API standard fournies par Google pour créer une ImageView circulaire.

ImageView imageView = (ImageView) findViewById(R.id.circleImageView);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
roundedBitmapDrawable.setCircular(true);
imageView.setImageDrawable(roundedBitmapDrawable);

Voir également https://www.youtube.com/watch?v=zVC-YAnDlgk

7
sats

Voir l'image du rectangle arrondi avec bordure arrondie

Maintenant, pour Définir une image rectangulaire arrondie avec une bordure arrondie.

Vous pouvez simplement déclarer CardView dans CardView avec app: cardCornerRadius = "30dp", app: cardUseCompatPadding = "true", app: cardElevation = "0dp".

Voir le code Xml ci-dessous 

            <androidx.cardview.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_gravity="center"
                app:cardCornerRadius="30dp"
                app:cardUseCompatPadding="true"
                app:cardElevation="0dp"
                Android:layout_margin="5dp"
                >
                <ImageView
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:src="@drawable/temp"
                    Android:scaleType="fitXY"
                    Android:layout_gravity="center"
                    />
            </androidx.cardview.widget.CardView>
        </androidx.cardview.widget.CardView>
2
CodeInsideCofee

Solution rapide pour toute personne utilisant Glide pour charger des images réseau, qui utilise RequestOptions.circleCropTransform ():

Glide.with(context)
     .load(imageUrl)
     .apply(RequestOptions.circleCropTransform())
     .into(object : CustomViewTarget<ImageView, Drawable>(imageView) {
            override fun onLoadFailed(errorDrawable: Drawable?) {
            }
            override fun onResourceCleared(placeholder: Drawable?) {
            }
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                imageView.setImageDrawable(resource)
            }
        })
0
giang nguyen

Avez-vous vérifié la technique des 9 patchs dans Android?

Si vous essayez de créer quelque chose comme ce qui est des chats à bulles avec des coins arrondis, je vous suggère d'utiliser cette technique au lieu d'utiliser XML Bitmap Decoder.

voici un exemple: Link

selon cet exemple, vous pouvez utiliser 9 générateurs de correctifs pour créer vos propres formes personnalisées et images bitmap qui se redimensionnent automatiquement pour s'adapter au contenu de la vue et à la taille de l'écran. Les parties sélectionnées de l'image sont mises à l'échelle horizontalement ou verticalement à l'aide d'indicateurs dessinés dans l'image.

enter image description here

0
Hamid Reza