Picasso 加载图像后我的布局崩溃了

Question

我正在尝试构建如下所示的自定义图像布局，其中 4 A 表示 ImageView.

AABC
AADE

当我尝试使用默认 src 属性绘制布局时，或者当我在 Picasso 上放置 placeholder 选项时，布局渲染没有问题。然而，当毕加索逐渐延迟加载每张图片时，布局就这样崩溃了。（A下面的space是空格space。）

ABC
 DE

如何使用 Picasso 的延迟加载来保持我原来的布局？ CustomSquareImageView 是自定义的 class，它扩展 ImageView 以绘制方形 ImageView。

PartOfLayout.xml

<LinearLayout
    android:id="@+id/set_profile_profile_photos_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <CustomSquareImageView
            android:id="@+id/set_profile_profile_photos_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/profile" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_second"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_third"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fourth"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fifth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

PartOfFragment.java

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    try {
        JSONArray profilePhotos = new JSONArray(mProfile.getProfileImages());
        if (!profilePhotos.get(0).toString().isEmpty()) {
            Picasso.with(getActivity()).load(profilePhotos.get(0).toString()).
                    placeholder(R.drawable.profile).into(mProfilePhotoFirst);
        }
    } catch (JSONException e) {
         e.printStackTrace();
    }
}

已更新

作者here的回答使用.fit().centerCrop()和placeholder有效解决了问题"in the end"，但是在Picasso加载图片的过程中，布局是暂时崩溃，因为每个图像的大小不同。（成功加载所有图像后，布局看起来不错。）

如何在不破坏中间布局的情况下加载图像？我希望加载的图像不会干扰布局，而是直接插入到具有 centerCrop 状态的布局。

Answer 1

因为我使用 LinearLayouts 作为图像框，所以我所要做的就是将 LinearLayouts 的 layout_width 设置为 match_parent，而不是 [=15] =] 或 0dp 作为 Android Studio 建议。

我的新 XML 看起来像这样。

NewPartOfLayout.xml

<LinearLayout
    android:id="@+id/set_profile_profile_photos_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <CustomSquareImageView
            android:id="@+id/set_profile_profile_photos_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/profile" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_second"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_third"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fourth"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fifth"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Picasso 加载图像后我的布局崩溃了

My layout is crashed after Picasso loads images

android

android-layout

imageview

picasso

PartOfLayout.xml

PartOfFragment.java

已更新

NewPartOfLayout.xml