web-dev-qa-db-fra.com

Redimensionner l'image à pleine largeur et à hauteur fixe avec Picasso

J'ai un LinearLayout vertical où l'un des éléments est un ImageView chargé avec Picasso. Je dois augmenter la largeur de l'image à la largeur totale du périphérique et afficher la partie centrale de l'image rognée à une hauteur fixe (150dp). J'ai actuellement le code suivant:

Picasso.with(getActivity()) 
    .load(imageUrl) 
    .placeholder(R.drawable.placeholder) 
    .error(R.drawable.error) 
    .resize(screenWidth, imageHeight)
    .centerInside() 
    .into(imageView);

Quelles valeurs dois-je mettre dans screenWidth et imageHeight (= 150dp)?

javaandroidimageviewimage-resizingpicasso
151
David Rabinowitz

Tu recherches:

.fit().centerCrop()

Qu'est-ce que cela signifie:

  • fit - attendez que la ImageView ait été mesurée et redimensionnez l'image pour qu'elle corresponde exactement à sa taille.
  • centerCrop - redimensionne l'image en respectant le format de l'image jusqu'à ce qu'elle occupe la taille souhaitée. Recadrez le haut et le bas ou la gauche et la droite pour qu'elle corresponde exactement à la taille.
457
Jake Wharton

Ce blog explique les fonctions de redimensionnement et d’ajustement de Picasso en détail: https://futurestud.io/tutorials/picasso-image-resizing-scaling-scaling-and-fit .

Redimensionnement d'image avec redimensionnement (x, y)

En règle générale, il est optimal si votre serveur ou votre API fournit l’image aux dimensions exactes dont vous avez besoin, ce qui représente un compromis parfait entre bande passante, consommation de mémoire et qualité d’image.

Malheureusement, vous ne pouvez pas toujours demander des images aux dimensions parfaites. Si les images sont dans une taille étrange, vous pouvez utiliser l'appel de redimensionnement (horizontalSize, verticalSize) pour modifier les dimensions de votre image en une taille plus appropriée. Cela redimensionnera l'image avant de l'afficher dans ImageView.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200) // resizes the image to these dimensions (in pixel). does not respect aspect ratio
    .into(imageViewResize);

Utilisation de scaleDown ()

Lors de l'utilisation de l'option resize (), Picasso met également votre image à niveau. Perdre du temps de calcul en agrandissant une petite image sans en améliorer la qualité, appelez scaleDown (true) pour appliquer le redimensionnement () uniquement lorsque les dimensions de l'image d'origine sont supérieures à celles de la taille cible.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(6000, 2000)
    .onlyScaleDown() // the image will only be resized if it's bigger than 6000x2000 pixels.
    .into(imageViewResizeScaleDown);

Éviter les images étendues avec la mise à l'échelle

Maintenant, comme pour toute manipulation d'image, le redimensionnement des images peut vraiment déformer le rapport de format et rendre l'image plus nette. Dans la plupart des cas d'utilisation, vous souhaitez empêcher cela. Picasso vous propose deux options d'atténuation, appelez centerCrop () ou centerInside ().

CenterCrop

CenterCrop () est une technique de recadrage qui redimensionne l'image de sorte qu'elle remplisse les limites demandées de ImageView, puis recadre le contenu supplémentaire. ImageView sera complètement rempli, mais toute l'image pourrait ne pas être affichée.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200) // resizes the image to these dimensions (in pixel)
    .centerCrop() 
    .into(imageViewResizeCenterCrop);

CenterInside

CenterInside () est une technique de rognage qui redimensionne l'image de sorte que les deux dimensions soient égales ou inférieures aux limites demandées de ImageView. L'image sera affichée complètement mais ne remplira peut-être pas la totalité de ImageView.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200)
    .centerInside() 
    .into(imageViewResizeCenterInside);

Dernier point, mais non le moindre: l'ajustement de Picasso () Les options présentées devraient couvrir vos besoins en fonctionnalités concernant le redimensionnement et la mise à l'échelle de l'image. Il existe une dernière fonctionnalité d'aide de Picasso, qui peut être très utile: fit ().

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .fit()
    // call .centerInside() or .centerCrop() to avoid a stretched image
    .into(imageViewFit);

fit () mesure les dimensions de la ImageView cible et utilise en interne resize () pour réduire la taille de l'image aux dimensions de la ImageView. Il y a deux choses à savoir sur fit (). Tout d’abord, appeler fit () peut retarder la demande d’image, car Picasso devra attendre que la taille de la ImageView puisse être mesurée. Deuxièmement, vous pouvez uniquement utiliser fit () avec un ImageView comme cible (nous examinerons d'autres cibles plus tard).

L'avantage est que la résolution de l'image est la plus basse possible, sans affecter sa qualité. Une résolution inférieure signifie moins de données à conserver dans le cache. Cela peut réduire considérablement l'impact des images dans l'empreinte mémoire de votre application. En résumé, si vous préférez un impact mémoire moins important que des temps de chargement un peu plus rapides, fit () est un excellent outil.

8
Farruh Habibullaev

Dans certains cas, l'ajustement () est inutile. Avant, vous devez attendre la fin des mesures de largeur et de hauteur. Vous pouvez donc utiliser globallayoutlistener. par exemple;

imageView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                Picasso.with(getActivity())
                        .load(imageUrl)
                        .placeholder(R.drawable.placeholder)
                        .error(R.drawable.error)
                        .resize(screenWidth, imageHeight)
                        .fit
                        .centerInside()
                        .into(imageView);
                view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });
0
Umut ADALI