Ändern Sie die Bildgröße mit Picasso auf volle Breite und variable Höhe

Ich habe eine listView mit einem Adapter, ImageViewder eine variable Größe (Breite und Höhe) enthält. Ich muss die Größe der mit Picasso geladenen Bilder auf die maximale Breite des Layouts und eine variable Höhe ändern, die durch das Seitenverhältnis des Bildes gegeben ist.

Ich habe diese Frage überprüft: Ändern Sie die Bildgröße mit Picasso auf volle Breite und feste Höhe

Die fit()Arbeiten, aber ich habe nichts gefunden, um das Seitenverhältnis des Bildes zu halten.

Dieser Code funktioniert teilweise, wenn ich die Höhe im Layout des Adapters festgelegt habe:

Picasso.with(this.context).load(message_pic_url)
.placeholder(R.drawable.profile_wall_picture)
.fit().centerInside()
.into(holder.message_picture);

Es werden jedoch Leerzeichen zwischen den Bildern der listView generiert, da die Bilder möglicherweise nicht so hoch sind.

Danke im Voraus.

Ab Picasso 2.4.0 wird dieser Vorgang jetzt direkt unterstützt . Fügen Sie einfach eine .resize()Anfrage mit einer der Dimensionen als hinzu 0. Um beispielsweise eine variable Breite zu haben, würde Ihr Anruf wie folgt lauten:

Picasso.with(this.context)
       .load(message_pic_url)
       .placeholder(R.drawable.profile_wall_picture)
       .resize(0, holder.message_picture.getHeight()),
       .into(holder.message_picture);

Beachten Sie, dass dieser Aufruf verwendet .getHeight()und daher davon ausgeht, dass der message_picturebereits gemessen wurde. Wenn dies nicht der Fall ist, z. B. wenn Sie eine neue Ansicht in a aufgeblasen haben ListAdapter, können Sie diesen Aufruf bis nach der Messung verzögern, indem Sie OnGlobalLayoutListenerder Ansicht ein hinzufügen :

holder.message_picture.getViewTreeObserver()
      .addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            // Wait until layout to call Picasso
            @Override
            public void onGlobalLayout() {
                // Ensure we call this only once
                imageView.getViewTreeObserver()
                         .removeOnGlobalLayoutListener(this);


                Picasso.with(this.context)
                       .load(message_pic_url)
                       .placeholder(R.drawable.profile_wall_picture)
                       .resize(0, holder.message_picture.getHeight())
                       .into(holder.message_picture);
            }
        });

Ich bin auf dasselbe Problem gestoßen und habe eine Weile gebraucht, um eine Lösung zu finden, aber ich bin schließlich auf etwas gestoßen, das für mich funktioniert.

Zuerst habe ich den Picasso-Anruf in geändert

Picasso.with(this.context).load(message_pic_url)
.placeholder(R.drawable.profile_wall_picture)
.into(holder.message_picture);

Entfernen der fitund der centerInside. Als Nächstes müssen Sie der ImageView in Ihrem XML die folgenden Zeilen hinzufügen

android:scaleType="fitStart"
android:adjustViewBounds="true"

Hoffentlich funktioniert es auch für Sie.

Schließlich habe ich es gelöst, indem ich eine Transformation von Picasso durchgeführt habe. Hier ist der Ausschnitt:

    Transformation transformation = new Transformation() {

        @Override
        public Bitmap transform(Bitmap source) {
            int targetWidth = holder.message_picture.getWidth();

            double aspectRatio = (double) source.getHeight() / (double) source.getWidth();
            int targetHeight = (int) (targetWidth * aspectRatio);
            Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
            if (result != source) {
                // Same bitmap is returned if sizes are the same
                source.recycle();
            }
            return result;
        }

        @Override
        public String key() {
            return "transformation" + " desiredWidth";
        }
    };

    mMessage_pic_url = message_pic_url;

    Picasso.with(this.context)
        .load(message_pic_url)
        .error(android.R.drawable.stat_notify_error)
        .transform(transformation)
        .into(holder.message_picture, new Callback() {
            @Override
            public void onSuccess() {
                holder.progressBar_picture.setVisibility(View.GONE);
            }

            @Override
            public void onError() {
                Log.e(LOGTAG, "error");
                holder.progressBar_picture.setVisibility(View.GONE);
            }
    });

Diese Linie kann mit Ihrer gewünschten Breite angepasst werden:

int targetWidth = holder.message_picture.getWidth();

Zusätzlich enthält dieser Ausschnitt einen Rückruf zum Laden von verstecktem und fehlerzeichenbarem integriertem Picasso.

Wenn Sie weitere Informationen zum Debuggen von Fehlern benötigen, MÜSSEN Sie einen benutzerdefinierten Listener (Picasso Builder) implementieren, da die onError CallbackInformationen "null" sind. Sie wissen nur, dass ein Fehler im Verhalten der Benutzeroberfläche vorliegt.

Ich hoffe, das hilft jemandem, viele Stunden zu sparen.

Mai akzeptierte Antwort ist nützlich für alle , aber wenn Sie mehr verbindlich ViewHolderfür Multiple Viewsdann können Sie Ihren Code reduzieren Klasse Erstellen für Transformation und vorbei Image aus ViewHolder.

/**
 * Created by Pratik Butani
 */
public class ImageTransformation {

    public static Transformation getTransformation(final ImageView imageView) {
        return new Transformation() {

            @Override
            public Bitmap transform(Bitmap source) {
                int targetWidth = imageView.getWidth();

                double aspectRatio = (double) source.getHeight() / (double) source.getWidth();
                int targetHeight = (int) (targetWidth * aspectRatio);
                Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
                if (result != source) {
                    // Same bitmap is returned if sizes are the same
                    source.recycle();
                }
                return result;
            }

            @Override
            public String key() {
                return "transformation" + " desiredWidth";
            }
        };
    }
}

Anruf von ViewHolder:

Picasso.with(context).load(baseUrlForImage)
                     .transform(ImageTransformation.getTransformation(holder.ImageView1))
                     .error(R.drawable.ic_place_holder_circle)
                     .placeholder(R.drawable.ic_place_holder_circle)
                     .into(holder.mMainPhotoImageView1);

Hoffe es wird dir helfen.

    Picasso.with(this).load(url).resize(1800, 1800).centerInside().into(secondImageView)

    <ImageView
        android:id="@+id/SecondImage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:adjustViewBounds="true"
        android:layout_margin="10dp"
        android:visibility="gone"/>

Dies hilft Ihnen bei der variablen Höhe der Bilder für alle Geräte

Ich habe einen einfachen Helfer geschrieben, der sich darum kümmert, den Listener für das vollständige Layout hinzuzufügen und (imageView) aufzurufen, wenn der Layoutprozess abgeschlossen ist.

public class PicassoDelegate {

private RequestCreator mRequestCreator;

public PicassoDelegate(ImageView target, RequestCreator requestCreator) {
    if (target.getWidth() > 0 && target.getHeight() > 0) {
        complete(target, requestCreator);
    } else {
        mRequestCreator = requestCreator;
        target.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                v.removeOnLayoutChangeListener(this);
                complete((ImageView) v, mRequestCreator);
            }
        });

    }

}

private void complete(ImageView target, RequestCreator requestCreator) {
    if (target.getWidth() > 0 && target.getHeight() > 0) {
        requestCreator.resize(target.getWidth(), target.getHeight());
    }

    requestCreator.into(target);
}

}}

So können Sie es einfach so verwenden, zum Beispiel in onViewCreated () von fragment.

new PicassoDelegate(customerPhoto, Picasso.with(getActivity()).load(user.getPhotoUrl()).centerCrop());

imageView.post(new Runnable() {
      @Override public void run() {
        Picasso.with(context)
            .resize(0, imageView.getHeight())
            .onlyScaleDown()
            .into(imageView, new ImageCallback(callback, null));
      }
    });

public class CropSquareTransformation implements Transformation {

  private int mWidth;
  private int mHeight;

  @Override public Bitmap transform(Bitmap source) {
    int size = Math.min(source.getWidth(), source.getHeight());

    mWidth = (source.getWidth() - size) / 2;
    mHeight = (source.getHeight() - size) / 2;

    Bitmap bitmap = Bitmap.createBitmap(source, mWidth, mHeight, size, size);
    if (bitmap != source) {
      source.recycle();
    }

    return bitmap;
  }

  @Override public String key() {
    return "CropSquareTransformation(width=" + mWidth + ", height=" + mHeight + ")";
  }

Weitere Transformationen: https://github.com/wasabeef/picasso-transformations

Erweitern Sie ImageView und überschreiben Sie dann die onMeasure-Methode wie folgt.

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        Drawable d = getDrawable();

        if(d!=null && fittingType == FittingTypeEnum.FIT_TO_WIDTH){
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
            setMeasuredDimension(width, height);
        }else{
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

Eigentlich stieg ich beim Laden des Bildes in CustomImageView ein, das über eine zoombare Funktionalität verfügte

Fehler war

java.lang.RuntimeException: Transformation transformation desiredWidth crashed with exception.

Ich habe es gelöst, indem ich den Code aus der akzeptierten Antwort bearbeitet habe. Ich habe die maximale Breite meiner Anzeige erhalten, als ob meine Bildansichtsbreite bereits match_parent wäre.

if (! imgUrl.equals ("")) {

        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        int height = displayMetrics.heightPixels;
        int width = displayMetrics.widthPixels;

        Picasso.with(context).load(imgUrl)
                .transform(getTransformation(width, imageView))
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        if (progressBar != null) {
                            progressBar.setVisibility(View.GONE);
                        }
                    }

                    @Override
                    public void onError() {
                        if (progressBar != null) {
                            progressBar.setVisibility(View.GONE);
                        }
                    }
                });
    }

    public static Transformation getTransformation(final int width, final ImageView imageView) {
        return new Transformation() {
            @Override
            public Bitmap transform(Bitmap source) {
                int targetWidth = width;
                double aspectRatio = (double) source.getHeight() / (double) source.getWidth();
                int targetHeight = (int) (targetWidth * aspectRatio);
                Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
                if (result != source) {
                    // Same bitmap is returned if sizes are the same
                    source.recycle();
                }
                return result;
            }

            @Override
            public String key() {
                return "transformation" + " desiredWidth";
            }
        };
    }

Picasso.get()
.load(message_pic_url)
.fit()
.centerCrop()
.placeholder(R.drawable.profile_wall_picture)
.into(holder.message_picture);

Versuchen Sie diesen Code, arbeitete für mich.

@Override
    protected void onResume() {
        super.onResume();

        imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                loadImageIfReady();
            }
        });

    }

    private void loadImageIfReady() {
        if (imageView.getMeasuredWidth() <= 0 || mPayload == null)
            this.finish();    // if not ready GTFO

        Picasso.with(this)
                    .load(mPayload)
                    .resize(imageView.getMeasuredWidth(), imageView.getMeasuredWidth())
                    .centerInside()
                    .into(imageView);


    }