How to display grid of images ( GridLayout ) in Harmony OS?

To display an image grid in Harmony OS, we can utilize the UI framework of Harmony OS. Harmony OS is an operating system developed by Huawei that supports developing applications for multiple devices, including smartphones, tablets, and TVs. GridLayout is a highly practical layout method that can flexibly display multiple components, such as images, in the UI.

Step 1: Create Project and Add Permissions

First, create a Harmony OS project in DevEco Studio and ensure that access permissions for image resources are added in the config.json file.

json
{
  "module": {
    "configChanges": [
      "orientation"
    ],
    "reqPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]
  }
}

Step 2: Designing the Layout File

In the resources/base/layout directory of the project, create a layout file, such as main_ability_slice.xml. In this file, we can use TableLayout to achieve a GridLayout-like effect.

xml
<TableLayout
    ohos:id="$+id:tablelayout"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:layout_alignment="center"
    ohos:horizontal_centered="true"
    ohos:vertical_centered="true"
    ohos:top_padding="16vp"
    ohos:bottom_padding="16vp"
    ohos:left_padding="16vp"
    ohos:right_padding="16vp"
    ohos:orientation="vertical">

    <!-- Define rows -->
    <TableRow
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:layout_weight="1">
        <!-- Add image components -->
        <Image
            ohos:id="$+id:image1"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:layout_weight="1"
            ohos:image_src="$media:example_image1"/>
        <Image
            ohos:id="$+id:image2"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:layout_weight="1"
            ohos:image_src="$media:example_image2"/>
    </TableRow>
    <!-- Add more TableRow elements to include additional images or components -->
</TableLayout>

Step 3: Java Code Logic

In the corresponding MainAbilitySlice.java file, load this layout and perform necessary settings or event handling.

java
@Override
protected void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_main_ability_slice);
    
    // You can add additional code here to handle dynamic image loading or other logic
}

Step 4: Adding Image Resources

Ensure that image resources are placed in the resources/base/media folder and correctly referenced in the layout file using ohos:image_src.

Step 5: Testing the Application

Finally, run the application on a Harmony OS device or emulator to test if the GridLayout displays the images as expected.

By following these steps, you can implement a basic image grid display in a Harmony OS application. This layout is particularly suitable for showcasing image galleries, product lists, and similar interfaces.