Aurora IMUI 开源项目教程

Aurora IMUI 开源项目教程

aurora-imuiGeneral IM UI components. Android/iOS/RectNative ready. 通用 IM 聊天 UI 组件，已经同时支持 Android/iOS/RN。项目地址:https://gitcode.com/gh_mirrors/au/aurora-imui

项目介绍

Aurora IMUI 是一个通用的即时通讯（IM）UI 组件库，不依赖于任何特定的 IM SDK。该库提供了常见的 UI 组件，如消息列表（MessageList）和输入视图（InputView），支持常见的消息类型，如文本、图片、音频等。Aurora IMUI 已经同时支持 Android、iOS 和 React Native 平台。

项目快速启动

Android 快速启动

1. 添加依赖： 在 build.gradle 文件中添加以下依赖：

   dependencies {
       implementation 'cn.jiguang.imui:messagelist:0.11.0'
       implementation 'cn.jiguang.imui:chatinput:0.10.0'
   }
   

2. 初始化布局： 在 activity_main.xml 中添加 MessageList 和 ChatInput：

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
       <cn.jiguang.imui.messages.MessageList
           android:id="@+id/msg_list"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1" />
       <cn.jiguang.imui.chatinput.ChatInputView
           android:id="@+id/chat_input"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   </LinearLayout>
   

3. 在 Activity 中初始化：

   public class MainActivity extends AppCompatActivity {
       private MessageList messageList;
       private ChatInputView chatInput;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           messageList = findViewById(R.id.msg_list);
           chatInput = findViewById(R.id.chat_input);
   
           // 设置消息列表的适配器和事件监听
           messageList.setAdapter(new DefaultMessageAdapter(this));
           chatInput.setChatInputListener(new ChatInputView.ChatInputListener() {
               @Override
               public void onSendTextMessage(CharSequence text) {
                   // 处理发送文本消息的逻辑
               }
           });
       }
   }
   

iOS 快速启动

1. 安装依赖： 使用 CocoaPods 安装依赖：

   pod 'AuroraIMUI', '~> 0.11.0'
   

2. 初始化布局： 在 ViewController.swift 中添加 IMUIMessageCollectionView 和 IMUIInputView：

   import UIKit
   import AuroraIMUI
   
   class ViewController: UIViewController {
       var messageList: IMUIMessageCollectionView!
       var chatInput: IMUIInputView!
   
       override func viewDidLoad() {
           super.viewDidLoad()
   
           messageList = IMUIMessageCollectionView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height - 50))
           chatInput = IMUIInputView(frame: CGRect(x: 0, y: view.frame.height - 50, width: view.frame.width, height: 50))
   
           view.addSubview(messageList)
           view.addSubview(chatInput)
   
           // 设置消息列表的适配器和事件监听
           messageList.delegate = self
           chatInput.inputViewDelegate = self
       }
   }
   
   extension ViewController: IMUIMessageMessageCollectionViewDelegate, IMUIInputViewDelegate {
       // 实现代理方法
   }
   

React Native 快速启动

1. 安装依赖： 使用 npm 安装依赖：

   npm install aurora-imui-react-native --save
   

2. 初始化布局： 在 `

aurora-imuiGeneral IM UI components. Android/iOS/RectNative ready. 通用 IM 聊天 UI 组件，已经同时支持 Android/iOS/RN。项目地址:https://gitcode.com/gh_mirrors/au/aurora-imui