基于环信EaseUI修改气泡宽度第二弹

本篇文章介绍一下基于EaseUI二次开发修改气泡宽度.

1.分析布局警告并去掉多余布局约束

首先通过EaseUI找到 语音消息气泡类.分析下语音气泡上都有哪些控件.如图所示:

Paste_Image.png

再看下他们布局到底是如何处理的,见下图

Paste_Image.png

Paste_Image.png

通过上面截图我们可以看到,EaseUI使用的代码是系统原生自动布局处理的,还可以看到所有的子控件都以self.backgroundImageView 进行自动布局适配,然后self.backgroundImageView根据bubbleView上下左右自动适配布局;这里可以得出我们只要改变self.bubbleView的宽度就可以实现我们需求了,首先看下默认效果:

Paste_Image.png

Paste_Image.png

根据警告提示表达气泡有多余的布局,建议可以删除.可以看出这个width<=0毫无意义,一定是这里找到删除掉.然后直接在环信的EaseBaseMessageCell和EaseMessageCell搜索self.bubbleView看看cell加载语音消息的气泡布局到底写在哪里,那些布局有多余.

Paste_Image.png

Paste_Image.png

Paste_Image.png

由上图在该EaseBaseMessageCell没有设置宽度布局,下面看下EaseMessageCell里面搜索如图:

Paste_Image.png

Paste_Image.png

Paste_Image.png

通过上图断点测试,OK我们找到这个无意义的布局,那么我们注释掉,看看是否可以解决布局警告,如下图控制台没有打印任何布局警告,有点强迫症的我看着很舒心了,哈哈

Paste_Image.png

2.根据时间计算不同长度气泡并显示

下面我们根据时间不同给self.bubbleView宽度即可,我可以通过- (void)setModel:方法可以获取语音消息时间,所以语音气泡宽度可以在这个方法设置;(其他类型气泡改变长度同理在这里添加下面的代码即可,还请自己变通)如下:

@interface EaseMessageCell() 
//MARK:根据时间设置气泡长度
@property (nonatomic) NSLayoutConstraint *bubbleVoiceWidthConstraint;
@property (nonatomic) NSLayoutConstraint *bubbleLocationWidthConstraint;
@property (nonatomic) NSLayoutConstraint *bubbleImageWidthConstraint;

@end
@implementation EaseMessageCell
.......
- (void)setModel:(id)model
{
_model = model;
if ([self respondsToSelector:@selector(isCustomBubbleView:)] && [self isCustomBubbleView:model]) {
    [self setCustomModel:model];
} else {
    switch (model.bodyType) {
        case EMMessageBodyTypeText:
        .......
        case EMMessageBodyTypeVoice:
        {
            ........
            //MARK:根据时间设置气泡长度
            CGFloat voiceWidth = (_model.mediaDuration*3)+60;
            [self removeConstraint:self.bubbleVoiceWidthConstraint];
            self.bubbleVoiceWidthConstraint = [NSLayoutConstraint constraintWithItem:self.bubbleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:(voiceWidth > 255 ? 255 : voiceWidth)];              
            [self addConstraint:self.bubbleVoiceWidthConstraint];
            ........ 
        }
            break;
        .......
}

设置效果如图:

Paste_Image.png

通过上图下拉操作,会导致voiceImageView被拉伸,我们找到voiceImageView多余的左和右自动布局代码注释掉即可解决

Paste_Image.png

OK,截图下拉导致被拉伸,效果图如下:

Paste_Image.png

仅供大家参考快速定位和解决EaseUI布局问题,如果有其他bug已经解决,分享一下大家一起学习!