Как установить высоту и ширину ImageView перед загрузкой изображения с помощью Picasso внутри Recycerview StaggeredGridLayout

Я ищу, чтобы установить высоту ImageView перед загрузкой изображения с Пикассо. Попытка предотвратить изменение высоты родительского вида по отношению к изображению. Я получаю высоту и ширину изображения и устанавливаю его внутри Пикассо, а затем уменьшаю его.

Как масштабировать ImageView на основе "webformatHeight" и "webformatWidth" перед загрузкой изображения в Picasso, чтобы предотвратить изменение размера.

изменение изображений после загрузки Пикассо

Данные

{
    ...
    "hits":[
        {
            "webformatHeight":426,
            "webformatWidth":640,
            "webformatURL":"https://pixabay.com/get/eb32b5062dfd013ed95c4518b74a4291ea77ead204b0144190f8c478a2ebb3_640.jpg",
            ...
        },
        ...
    ]
}

Рециклер Реализация

RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
mPixabayAdapter = new PixabayAdapter();
recycler.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
recycler.setAdapter(mPixabayAdapter);

ViewHolder

class ViewHolder extends RecyclerView.ViewHolder {

    private ImageView mImage;
    private TextView mTitle;

    private ViewHolder(View view) {
        super(view);
        mImage = view.findViewById(R.id.image);
        mTitle = view.findViewById(R.id.title);
    }

    void bindView() {
        ColorDrawable[] shotLoadingPlaceholders = new ColorDrawable[]{new ColorDrawable(ContextCompat.getColor(itemView.getContext(), R.color.background_light))};
        Hit hit = mHitList.get(getAdapterPosition());
        mTitle.setText(hit.getUser());
        Picasso
                .with(mImage.getContext())
                .load(hit.getWebformatURL())
                .placeholder(shotLoadingPlaceholders[0])
                .resize(hit.getImageWidth(), hit.getImageHeight())
                .priority(Picasso.Priority.HIGH)
                .onlyScaleDown()
                .into(mImage);
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@+id/image"
        android:background="@color/background_light"
        android:fontFamily="sans-serif-medium"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textColor="@color/white_light"
        android:textSize="13sp" />
</RelativeLayout>
Источник

2 ответа

Решение

Рассчитайте соотношение сторон вашего изображения по width/height и оберните ваш ImageView внутри что-то вроде этого:

public class PixabayImageView extends AppCompatImageView {
    private float aspectRatio = 1.77f;

    public PixabayImageView(Context context) {
        super(context);
    }

    public PixabayImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public void setAspectRatio(float ratio) {
        aspectRatio = ratio;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (width * aspectRatio), MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

Создайте формат изображения внутри ViewHolder

class ViewHolder extends RecyclerView.ViewHolder {

    private PixabayImageView mImage;
    ...
    private ViewHolder(View view) {
        super(view);
        mImage = view.findViewById(R.id.image);
        ...
    }

    private void bindView() {
        final Hit hit = mHitList.get(getAdapterPosition());
        float p1 = (float) hit.getWebformatHeight() / hit.getWebformatWidth();
        mImage.setAspectRatio(p1);
        ...
    }
}
Источник

Вы можете установить layoutParams ImageView на bindView с шириной и высотой класса Hit, как это.

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(hit.getImageWidth(), hit.getImageHeight());
mImage.setLayoutParams(layoutParams);

С уважением.

Источник
Другие вопросы по тегам