如何根据JSON动态生成并填充ImageView？（Gson+Picasso）

Alright, let's tackle this dynamic image loading problem you're facing. The issue right now is that your layout and code are hardcoded for a fixed number of ImageViews, which doesn't work when the JSON returns a variable number of images. Here's how to fix it with two practical approaches:

Approach 1: Dynamic LinearLayouts (Quick Tweak to Your Current Setup) #

This method builds on your existing layout structure, dynamically creating rows of ImageViews based on the number of images in your JSON response.

Step 1: Update Your Layout File #

Replace your hardcoded image rows with an empty vertical LinearLayout to act as a container for dynamic rows:

<LinearLayout 
    android:id="@+id/linearLayat" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical">

    <TextView 
        android:id="@+id/txtFeatured" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="Show Images" />

    <!-- Empty container for dynamic image rows -->
    <LinearLayout
        android:id="@+id/image_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gap="8dp"/> <!-- Optional: Add spacing between rows -->

</LinearLayout>

Step 2: Modify MainActivity Code #

Remove hardcoded ImageView references, fetch your image list from JSON, and dynamically create views:

public class MainActivity extends AppCompatActivity {
    private LinearLayout imageContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageContainer = findViewById(R.id.image_container);

        // Move network request to a background thread to avoid ANR!
        new Thread(() -> {
            try {
                Response response = client.newCall(request).execute();
                if (response.isSuccessful()) {
                    String responseJson = response.body().string();
                    Gson gson = new Gson();
                    ObtenerDatos data = gson.fromJson(responseJson, ObtenerDatos.class);
                    List<ImageItem> imageItems = data.items;

                    // Update UI on the main thread
                    runOnUiThread(() -> populateImages(imageItems));
                }
            } catch (IOException e) {
                e.printStackTrace();
                runOnUiThread(() -> Toast.makeText(this, "Failed to load images", Toast.LENGTH_SHORT).show());
            }
        }).start();
    }

    private void populateImages(List<ImageItem> imageItems) {
        LinearLayout currentRow = null;

        for (int i = 0; i < imageItems.size(); i++) {
            // Create a new row every 2 images (matches your original 2-per-row layout)
            if (i % 2 == 0) {
                currentRow = new LinearLayout(this);
                LinearLayout.LayoutParams rowParams = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.MATCH_PARENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT);
                rowParams.setMargins(0, 8, 0, 0);
                currentRow.setLayoutParams(rowParams);
                currentRow.setOrientation(LinearLayout.HORIZONTAL);
                currentRow.setWeightSum(2); // Ensure equal width for 2 images
                imageContainer.addView(currentRow);
            }

            // Create a dynamic ImageView
            ImageView imageView = new ImageView(this);
            LinearLayout.LayoutParams imgParams = new LinearLayout.LayoutParams(
                    0, // Use weight to distribute width
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    1); // Equal weight for each image in the row
            imgParams.setMargins(4, 0, 4, 0); // Spacing between images
            imageView.setLayoutParams(imgParams);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setImageResource(android.R.drawable.btn_star_big_on); // Placeholder

            // Load image with Picasso
            String imageUrl = imageItems.get(i).item.images.information;
            Picasso.get()
                    .load(imageUrl)
                    .placeholder(android.R.drawable.btn_star_big_on)
                    .error(android.R.drawable.ic_delete) // Error placeholder
                    .into(imageView);

            // Add ImageView to the current row
            if (currentRow != null) {
                currentRow.addView(imageView);
            }
        }
    }

    // Updated model classes (follow Java naming conventions)
    static class ObtenerDatos {
        List<ImageItem> items;
    }

    static class ImageItem {
        Item item;
    }

    static class Item {
        Images images;
    }

    static class Images {
        String information; // Your image URL field
    }
}

Approach 2: RecyclerView (Scalable for Large Image Sets) #

If you expect to load many images (10+), use RecyclerView with a GridLayoutManager for better performance (view recycling reduces memory usage).

Step 1: Update Layout to Use RecyclerView #

<LinearLayout 
    android:id="@+id/linearLayat" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical">

    <TextView 
        android:id="@+id/txtFeatured" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="Show Images" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/image_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gap="8dp"/>

</LinearLayout>

Step 2: Create a RecyclerView Adapter #

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {
    private List<String> imageUrls;
    private Context context;

    public ImageAdapter(Context context, List<String> imageUrls) {
        this.context = context;
        this.imageUrls = imageUrls;
    }

    @NonNull
    @Override
    public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ImageView imageView = new ImageView(context);
        RecyclerView.LayoutParams params = new RecyclerView.LayoutParams(
                parent.getWidth() / 2, // Half the screen width per image
                RecyclerView.LayoutParams.WRAP_CONTENT);
        params.setMargins(4, 4, 4, 4);
        imageView.setLayoutParams(params);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        return new ImageViewHolder(imageView);
    }

    @Override
    public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
        Picasso.get()
                .load(imageUrls.get(position))
                .placeholder(android.R.drawable.btn_star_big_on)
                .error(android.R.drawable.ic_delete)
                .into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return imageUrls.size();
    }

    static class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public ImageViewHolder(@NonNull ImageView itemView) {
            super(itemView);
            imageView = itemView;
        }
    }
}

Step 3: Set Up RecyclerView in MainActivity #

Add this code inside your runOnUiThread block after parsing the JSON:

// Extract image URLs from your model
List<String> imageUrls = new ArrayList<>();
for (ImageItem item : imageItems) {
    imageUrls.add(item.item.images.information);
}

// Configure RecyclerView
RecyclerView recyclerView = findViewById(R.id.image_recycler);
recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); // 2 columns
recyclerView.setAdapter(new ImageAdapter(this, imageUrls));

Key Notes: #

• Network Requests: Always run network calls on a background thread (as shown) to avoid Application Not Responding (ANR) errors.
• Java Naming Conventions: I updated your model class names to follow standard Java practices (e.g., ObtenerDatos instead of obtenerDatos) for readability.
• Placeholders/Error Handling: Added placeholder and error images to improve user experience if image loading fails.

内容的提问来源于stack exchange，提问作者Fumatamax