MainAbility Layout File and Code Implementation
Layout File
Here’s the layout file for MainAbility:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<DependentLayout
ohos:id="$+id:company_page_dl"
ohos:height="50vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true">
<Button
ohos:id="$+id:main_my_btn"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Send"
ohos:text_size="35vp"
ohos:align_parent_right="true"
ohos:background_element="$graphic:background_btn">
</Button>
<TextField
ohos:id="$+id:main_textfiled"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:hint="Enter your message"
ohos:vertical_center="true"
ohos:text_size="50"
ohos:left_of="$id:main_my_btn"
ohos:layout_alignment="left">
</TextField>
</DependentLayout>
<ListContainer
ohos:above="$id:company_page_dl"
ohos:id="$+id:main_list"
ohos:height="match_parent"
ohos:width="match_parent">
</ListContainer>
</DependentLayout>
In this layout file, we have a ListContainer to display sent and received messages, a TextField for user input, and a Button to trigger the sending action.
Logic Code
Initializing Views
private void initview() {
listContainer = (ListContainer) findComponentById(ResourceTable.Id_main_list);
textField = (TextField) findComponentById(ResourceTable.Id_main_textfiled);
mainbtn = (Button) findComponentById(ResourceTable.Id_main_my_btn);
mainbtn.setClickedListener(this);
myProvider = new MyProvider(data, getAbility());
listContainer.setItemProvider(myProvider);
myProvider.notifyDataChanged(); // Refresh ListView display when new messages arrive
}
Initializing Default Messages
private void initMsg() {
Msg msg1 = new Msg("Hello", Msg.RECEIVED);
data.add(msg1);
Msg msg2 = new Msg("Hi there", Msg.SENT);
data.add(msg2);
Msg msg3 = new Msg("Nice to meet you", Msg.RECEIVED);
data.add(msg3);
}
Handling User Input
@Override
public void onClick(Component component) {
content = textField.getText().toString();
switch (component.getId()) {
case ResourceTable.Id_main_my_btn:
if (!flag) {
Msg msg = new Msg(content, Msg.SENT);
data.add(msg);
flag = true;
} else {
Msg msg = new Msg(content, Msg.RECEIVED);
data.add(msg);
flag = false;
}
myProvider.notifyDataChanged(); // Refresh ListView display when new messages arrive
textField.setText(""); // Clear the input field
break;
default:
break;
}
}
A boolean flag is used to alternate between sending and receiving messages.
Message Class
package com.example.imdemo.bean;
public class Msg {
public static final int RECEIVED = 0; // Received a message
public static final int SENT = 1; // Sent a message
private String content; // Message content
private int type; // Message type
public Msg(String content, int type) {
this.content = content;
this.type = type;
}
public String getContent() {
return content;
}
public int getType() {
return type;
}
}
Adapter Item Layout (item.xml)
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:left_layout"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="left"
ohos:background_element="$graphic:background_blue"
ohos:left_margin="5vp"
ohos:visibility="visible"
ohos:top_margin="10vp">
<Text
ohos:id="$+id:left_msg"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="Test message"
ohos:text_color="#fff"
ohos:text_size="20vp"
ohos:margin="10vp">
</Text>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:right_Layout"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="right"
ohos:background_element="$graphic:background_red"
ohos:right_margin="5vp"
ohos:visibility="visible">
<Text
ohos:id="$+id:right_msg"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="Test message"
ohos:text_color="#fff"
ohos:text_size="20vp"
ohos:margin="10vp">
</Text>
</DirectionalLayout>
</DirectionalLayout>
The layout includes two DirectionalLayouts for displaying messages on the left and right sides, representing received and sent messages respectively.
The link you provided earlier couldn’t be parsed successfully due to network issues. This might be related to the link itself or a network problem. You can check the validity of the link and try again.