|
| 1 | +## ChatInput |
| 2 | + |
| 3 | +[English Document](./README_EN.md) |
| 4 | + |
| 5 | +这是一个聊天界面输入框组件，可以方便地结合 `MessageList` 使用，包含录音，选择图片，拍照等功能，提供了一些丰富的接口和回调供用户使用， |
| 6 | +还可以选择自定义样式。 |
| 7 | + |
| 8 | +> 该组件依赖了 Glide 3.7.0 |
| 9 | +
|
| 10 | +## 集成 |
| 11 | +提供了以下几种方式添加依赖，只需要选择其中一种即可。 |
| 12 | + |
| 13 | +- Gradle |
| 14 | +```groovy |
| 15 | +compile 'cn.jiguang.imui:chatinput:0.2.0' |
| 16 | +``` |
| 17 | + |
| 18 | +- Maven |
| 19 | +``` |
| 20 | +<dependency> |
| 21 | + <groupId>cn.jiguang.imui</groupId> |
| 22 | + <artifactId>chatinput</artifactId> |
| 23 | + <version>0.2.0</version> |
| 24 | + <type>pom</type> |
| 25 | +</dependency> |
| 26 | +``` |
| 27 | + |
| 28 | +- JitPack |
| 29 | + |
| 30 | + > project 下的 build.gradle |
| 31 | +
|
| 32 | + ```groovy |
| 33 | + allprojects { |
| 34 | + repositories { |
| 35 | + ... |
| 36 | + maven { url 'https://jitpack.io' } |
| 37 | + } |
| 38 | + } |
| 39 | + ``` |
| 40 | + |
| 41 | + > module 的 build.gradle |
| 42 | +
|
| 43 | + ```groovy |
| 44 | + dependencies { |
| 45 | + compile 'com.github.jpush:imui:0.2.0' |
| 46 | + } |
| 47 | + ``` |
| 48 | + |
| 49 | +## 用法 |
| 50 | +使用 ChatInput 只需要两个步骤： |
| 51 | + |
| 52 | +1. 在 xml 布局文件中引用 ChatInputView： |
| 53 | +```xml |
| 54 | + <cn.jiguang.imui.chatinput.ChatInputView |
| 55 | + android:id="@+id/chat_input" |
| 56 | + android:layout_width="match_parent" |
| 57 | + android:layout_height="wrap_content" |
| 58 | + android:layout_alignParentBottom="true" |
| 59 | + app:cameraBtnIcon="@drawable/aurora_menuitem_camera" |
| 60 | + app:inputCursorDrawable="@drawable/aurora_edittext_cursor_bg" |
| 61 | + app:inputEditTextBg="@drawable/aurora_edittext_bg" |
| 62 | + app:inputHint="@string/chat_input_hint" |
| 63 | + app:photoBtnIcon="@drawable/aurora_menuitem_photo" |
| 64 | + app:sendBtnIcon="@drawable/aurora_menuitem_send" |
| 65 | + app:voiceBtnIcon="@drawable/aurora_menuitem_mic" /> |
| 66 | +``` |
| 67 | + |
| 68 | +2. 初始化 ChatInputView |
| 69 | +```java |
| 70 | +ChatInputView chatInputView = (ChatInputView) findViewById(R.id.chat_input); |
| 71 | +chatInputView.setMenuContainerHeight(softInputHeight); |
| 72 | +``` |
| 73 | + |
| 74 | + **初始化后一定要设置一下 MenuContainer 的高度，最好设置为软键盘的高度，否则会导致第一次打开菜单时高度不正常（此时打开软键盘会导致界面伸缩）。** |
| 75 | + |
| 76 | + 建议在跳转到聊天界面之前使用 onSizeChanged 方法监听软键盘的高度，然后在初始化的时候设置即可， |
| 77 | + 关于监听软键盘高度的方法可以参考 sample 下的 MessageListActivity 及 ChatView 中的 onSizeChanged 相关方法。 |
| 78 | + |
| 79 | +## 重要接口及事件 |
| 80 | +ChatInputView 提供了各种按钮及事件的监听回调，所以用户可以灵活地运用监听事件做一些操作，如发送消息等事件。 |
| 81 | + |
| 82 | +### OnMenuClickListener |
| 83 | +首先是输入框下面的菜单栏事件的监听，调用 `chatInputView.setMenuClickListener` 即可设置监听： |
| 84 | +```java |
| 85 | +chatInput.setMenuClickListener(new OnMenuClickListener() { |
| 86 | + @Override |
| 87 | + public boolean onSendTextMessage(CharSequence input) { |
| 88 | + // 输入框输入文字后，点击发送按钮事件 |
| 89 | + } |
| 90 | + |
| 91 | + @Override |
| 92 | + public void onSendFiles(List<String> list) { |
| 93 | + // 选中文件或者录制完视频后，点击发送按钮触发此事件 |
| 94 | + } |
| 95 | + |
| 96 | + @Override |
| 97 | + public void switchToMicrophoneMode() { |
| 98 | + // 点击语音按钮触发事件，显示录音界面前触发此事件 |
| 99 | + } |
| 100 | + |
| 101 | + @Override |
| 102 | + public void switchToActionMode() { |
| 103 | + // 点击图片按钮触发事件，显示图片选择界面前触发此事件 |
| 104 | + } |
| 105 | + |
| 106 | + @Override |
| 107 | + public void switchToEmojiMode() { |
| 108 | + // 点击拍照按钮触发事件，显示拍照界面前触发此事件 |
| 109 | + } |
| 110 | +}); |
| 111 | +``` |
| 112 | +关于上述事件的处理，可以参考 sample 中的 MessageListActivity 对于事件的处理。 |
| 113 | + |
| 114 | +### RecordVoiceListener |
| 115 | +这是录音的接口，使用方式： |
| 116 | + |
| 117 | +```java |
| 118 | +mRecordVoiceBtn = mChatInput.getRecordVoiceButton(); |
| 119 | +mRecordVoiceBtn.setRecordVoiceListener(new RecordVoiceListener() { |
| 120 | + @Override |
| 121 | + public void onStartRecord() { |
| 122 | + // Show record voice interface |
| 123 | + // 设置存放录音文件目录 |
| 124 | + File rootDir = mContext.getFilesDir(); |
| 125 | + String fileDir = rootDir.getAbsolutePath() + "/voice"; |
| 126 | + mRecordVoiceBtn.setRecordVoiceFile(fileDir, new DateFormat().format("yyyy_MMdd_hhmmss", |
| 127 | + Calendar.getInstance(Locale.CHINA)) + ""); |
| 128 | + } |
| 129 | + |
| 130 | + @Override |
| 131 | + public void onFinishRecord(File voiceFile, int duration) { |
| 132 | + MyMessage message = new MyMessage(null, IMessage.MessageType.SEND_VOICE); |
| 133 | + message.setMediaFilePath(voiceFile.getPath()); |
| 134 | + message.setDuration(duration); |
| 135 | + message.setTimeString(new SimpleDateFormat("HH:mm", Locale.getDefault()).format(new Date())); |
| 136 | + mAdapter.addToStart(message, true); |
| 137 | + } |
| 138 | + |
| 139 | + @Override |
| 140 | + public void onCancelRecord() { |
| 141 | + |
| 142 | + } |
| 143 | +}); |
| 144 | +``` |
| 145 | + |
| 146 | +### OnCameraCallbackListener |
| 147 | +这是相机相关的接口，使用方式： |
| 148 | +```java |
| 149 | +mChatInput.setOnCameraCallbackListener(new OnCameraCallbackListener() { |
| 150 | + @Override |
| 151 | + public void onTakePictureCompleted(String photoPath) { |
| 152 | + MyMessage message = new MyMessage(null, IMessage.MessageType.SEND_IMAGE); |
| 153 | + message.setTimeString(new SimpleDateFormat("HH:mm", Locale.getDefault()).format(new Date())); |
| 154 | + message.setMediaFilePath(photoPath); |
| 155 | + message.setUserInfo(new DefaultUser("1", "Ironman", "ironman")); |
| 156 | + MessageListActivity.this.runOnUiThread(new Runnable() { |
| 157 | + @Override |
| 158 | + public void run() { |
| 159 | + mAdapter.addToStart(message, true); |
| 160 | + } |
| 161 | + }); |
| 162 | + } |
| 163 | + |
| 164 | + @Override |
| 165 | + public void onStartVideoRecord() { |
| 166 | + |
| 167 | + } |
| 168 | + |
| 169 | + @Override |
| 170 | + public void onFinishVideoRecord(String videoPath) { |
| 171 | + // 请注意，点击发送视频的事件会回调给 onSendFiles，这个是在录制完视频后触发的 |
| 172 | + } |
| 173 | + |
| 174 | + @Override |
| 175 | + public void onCancelVideoRecord() { |
| 176 | + |
| 177 | + } |
| 178 | +}); |
| 179 | +``` |
| 180 | + |
| 181 | +### 设置拍照后保存的文件 |
| 182 | +`setCameraCaptureFile(String path, String fileName)` |
| 183 | +```java |
| 184 | +// 参数分别是路径及文件名，建议在上面的 onCameraClick 触发时调用 |
| 185 | +mChatInput.setCameraCaptureFile(path, fileName); |
| 186 | +``` |
0 commit comments