- To send messages, there is a trigger interface for sending messages, usually an input box, and related buttons
There is a list of display messages
- NIMKit is very well designed
Protocol – oriented, easy to replace structure
This article focuses on displaying messages
IM customization, the general understanding is
Custom message, divided into data and interface, two parts
- Customize the data structure of the message
/ / a custom message parsing NIMCustomObject. RegisterCustomDecoder (IMMsgDecoder ())Copy the code- Customize the interface for messages
So what we see in the chat log is just a list of messages, UITableView
// Layout manager nimkit.shared ().registerLayoutConfig(IMCellLayoutConfig())Copy the codeScene, chat session interface, need a set of IM interface
In the voice room, the half-screen chat interface needs a different style of IM interface
In other words, there are two IM chat interfaces in the same app
Idea 1: Simple, change the configuration
This is the default way to register
// Layout manager nimkit.shared ().registerLayoutConfig(IMCellLayoutConfig())Copy the codeIn the new Chat style interface,
If it appears, change to a new configuration,
If no, restore the original configuration
class SessionChatVC: NIMSessionViewController{
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
NIMKit.shared().registerLayoutConfig(IMCellLayoutConfigDjz())
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
NIMKit.shared().registerLayoutConfig(IMCellLayoutConfig())
}
}
Copy the codeThe effect is to change the text color of the text message
Class IMCellLayoutConfigDjz: NIMCellLayoutConfig{contentView Override func cellContent(_ model: NIMMessageModel!) -> String! { guard model.message.messageType ! =.text else {// Look at this line, Enough return NSStringFromClass (NIMSessionTextContentViewDJZ. Self)} guard model. The message. The messageType = =. The custom, let customAttachment = model.message.messageObject as? NIMCustomObject, let attachment = customAttachment.attachment else { return super.cellContent(model) } if attachment.isKind(of: IMGiftsAttachment.self) { return NSStringFromClass(IMGiftContentView.self) }else if attachment.isKind(of: IMGifImageAttachment.self) { return NSStringFromClass(IMGifImageContentView.self) } else{ return NSStringFromClass(IMChatUpContentView.self) } } }Copy the codeNIMSessionTextContentViewDJZ other with NIMKit own NIMSessionTextContentView, same
@implementation NIMSessionTextContentViewDJZ - (void)refresh:(NIMMessageModel *)data { [super refresh:data]; / / message decoding the default: self. Model. The message. The text nsstrings * text = [IMMessageTool imMessageTextBase64Decoded: self. Model. The message]; NIMKitSetting *setting = [[NIMKit sharedKit].config setting:data.message]; Self.textlabel.textcolor = uicolor.redcolor; self.textLabel.textColor = uicolor.redcolor; // self.textLabel.textColor = setting.textColor; self.textLabel.font = setting.font; [self.textLabel nim_setText:text]; [self.bubbleImageView setHidden: true]; } @endCopy the codeIdea 2: More complex, more source code involved
Create a subclass of the chat interface, NIMSessionViewController
@interface NIMDjzSessionViewCtrl: NIMSessionViewController
@end
Copy the codeSimply change the background color of the chat screen to cell background color
Chat interface, style A, background color AA
@implementation NIMSessionViewController
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[[[NIMKit sharedKit] config] setCellBackgroundColor: NIMKit_UIColorFromRGB(0xf5f5f5)];
}
@end
Copy the codeVoice room chat interface, style Z, background color ZZ
@implementation NIMDjzSessionViewCtrl
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear: animated];
[[[NIMKit sharedKit] config] setCellBackgroundColor: bgColor];
}
@end
Copy the codeModify the background color of TableView and root view
Voice room chat interface
@implementation NIMDjzSessionViewCtrl
- (void)setupTableView{
self.view.backgroundColor = bgColor;
self.tableView = [[UITableView alloc] initWithFrame: CGRectMake(0, 52, 375, 233) style:UITableViewStylePlain];
self.tableView.backgroundColor = bgColor;
// ...
}
@end
Copy the codeRemove background bubbles from the chat screen in the voice room
Use NIMAdvancedMessageCellDjz, not NIMAdvancedMessageCell
The difference between the NIMAdvancedMessageCellDjz and NIMAdvancedMessageCell, lies in
@ implementation NIMAdvancedMessageCellDjz - (void) refreshBubblesBackgroundView {/ / hide bubble [self. BubblesBackgroundView setHidden: YES]; } @endCopy the codeIf I go up,
In order to use NIMAdvancedMessageCellDjz,
You need to use NIMMessageCellFactoryDeng
@implementation NIMMessageCellFactoryDeng - (NIMMessageCell *)cellInTable:(UITableView*)tableView forMessageMode:(NIMMessageModel *)model { id<NIMCellLayoutConfig> layoutConfig = [[NIMKit sharedKit] layoutConfig]; NSString *identity = [layoutConfig cellContent:model]; NIMMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:identity]; if (! Cell) {/ / note that this line of nsstrings * CLZ = @ "NIMAdvancedMessageCellDjz"; [tableView registerClass:NSClassFromString(clz) forCellReuseIdentifier:identity]; cell = [tableView dequeueReusableCellWithIdentifier:identity]; } return (NIMMessageCell *)cell; } @endCopy the codeNIMMessageCellFactoryDeng similar to NIMMessageCellFactory
Style, as above
And if I keep going,
In order to use NIMMessageCellFactoryDeng,
You need to use NIMSessionTableAdapterDeng
@interface NIMSessionTableAdapterDeng()
@property (nonatomic,strong) NIM_djz_MessageCellFactory *cellFactory;
@end
@implementation NIMSessionTableAdapterDeng
- (instancetype)init
{
self = [super init];
if (self) {
_cellFactory = [[NIMMessageCellFactoryDeng alloc] init];
}
return self;
}
@end
Copy the codeNIMSessionTableAdapterDeng similar to NIMSessionTableAdapter
And if I keep going,
In order to use NIMSessionTableAdapterDeng,
The NIMSessionConfigurator source code needs to be adjusted
Add attributes
@interface NIMSessionConfigurator()
@property (nonatomic,strong) NIM_djz_SessionTableAdapter *tableAdapterDeng;
@end
Copy the codeAdd methods
@implementation NIMSessionConfigurator - (void)setupDeng:(NIMSessionViewController *)vc{ With the setup method _tableAdapterDeng = [[NIMSessionTableAdapterDeng alloc] init]; _tableAdapterDeng.interactor = _interactor; _tableAdapterDeng.delegate = vc; vc.tableView.delegate = _tableAdapterDeng; vc.tableView.dataSource = _tableAdapterDeng; [vc setInteractor:_interactor]; } @endCopy the codeIf I go up,
In the end,
Voice room half-screen chat interface, style Z
Call setupDeng and get through
@implementation NIMAdvancedMessageCellDjz - (void)setupConfigurator{ self.configurator = [[NIMSessionConfigurator alloc] init]; [self.configurator setupDeng:self]; BOOL needProximityMonitor = [self needProximityMonitor]; [[NIMSDK sharedSDK].mediaManager setNeedProximityMonitor:needProximityMonitor]; } @endCopy the codeNIMKit isn’t that hard, it just has a lot of features,
In order to decouple, the call goes around and around
It’s been combed backwards
Let’s go through it one more time
And we see that in the chat view,
There is a tableView
@interface NIMSessionViewController
@property (nonatomic, strong) UITableView *tableView;
@end
Copy the codeConfiguration code in chat view
@implementation NIMSessionViewController - (void)viewDidLoad { [super viewDidLoad]; // The session-dependent logic configurator is installed [self setupConfigurator]; } - (void)setupConfigurator { _configurator = [[NIMSessionConfigurator alloc] init]; [_configurator setup:self]; } @endCopy the codeNIMSessionConfigurator inside,
Set the dataSource of the TableView list of NIMSessionViewController in the chat session interface
@implementation NIMSessionConfigurator
- (void)setup:(NIMSessionViewController *)vc
{
vc.tableView.delegate = _tableAdapter;
vc.tableView.dataSource = _tableAdapter;
}
@end
Copy the codeThe lines of chat we see are, of course, dataSource
Like this. The two sides are open