Image Resizing with the resizable Attribute

Overview

This sample demonstrates how to resize chat bubbles and placeholder images using the slice and lattice options of the Image component's resizable attribute. You can resize the middle of a chat bubble while its rounded corners stay fixed, or the four edges of a placeholder image while its center remains unchanged.

Effect

Chat Bubble	Placeholder Image

Project Directory

1. After installing and launching the application, tap the Chat Bubble and Placeholder Image buttons to navigate to the chat page and placeholder image page, respectively.
2. On the chat page, bubbles resize automatically to fit any message length, with the bubble background adapting to the width and height of the content.
3. On the placeholder image page, tap the operation button in the lower-right corner of the image to resize it.

目录结构

├──entry/src/main/ets/ 
│  ├──common 
│  │  └──Constants.ets                    // Constants 
│  ├──entryability 
│  │  └──EntryAbility.ets                 // Entry ability 
│  ├──entrybackupability 
│  │  └──EntryBackupAbility.ets           // Data backup and restoration 
│  ├──pages 
│  │  └──Index.ets                        // Application home page 
│  └──view 
│     ├──ChatMessageView.ets              // Chat page 
│     └──PlaceholderImgView.ets           // Placeholder image page 
└──entry/src/main/resources               // Static resources

How to Implement

• Use the slice option of the Image component's resizable attribute to achieve the resizable chat bubble effect.
• Use the lattice option of the Image component's resizable attribute to implement resizable placeholder images.

Required Permissions

N/A

Constraints

1. This sample is only supported on Huawei phones running standard systems.
2. The HarmonyOS version must be HarmonyOS 6.0.1 Release or later.
3. The DevEco Studio version must be DevEco Studio 6.0.1 Release or later.
4. The HarmonyOS SDK version must be HarmonyOS 6.0.1 Release SDK or later.