本篇文章介紹一下基于EaseUI二次開發(fā)修改氣泡寬度.
1.分析布局警告并去掉多余布局約束
首先通過EaseUI找到 語音消息氣泡類.分析下語音氣泡上都有哪些控件.如圖所示:
再看下他們布局到底是如何處理的,見下圖
通過上面截圖我們可以看到,EaseUI使用的代碼是系統(tǒng)原生自動布局處理的,還可以看到所有的子控件都以self.backgroundImageView 進(jìn)行自動布局適配,然后self.backgroundImageView根據(jù)bubbleView上下左右自動適配布局;這里可以得出我們只要改變self.bubbleView的寬度就可以實(shí)現(xiàn)我們需求了,首先看下默認(rèn)效果:
根據(jù)警告提示表達(dá)氣泡有多余的布局,建議可以刪除.可以看出這個width<=0毫無意義,一定是這里找到刪除掉.然后直接在環(huán)信的EaseBaseMessageCell和EaseMessageCell搜索self.bubbleView看看cell加載語音消息的氣泡布局到底寫在哪里,那些布局有多余.
由上圖在該EaseBaseMessageCell沒有設(shè)置寬度布局,下面看下EaseMessageCell里面搜索如圖:
通過上圖斷點(diǎn)測試,OK我們找到這個無意義的布局,那么我們注釋掉,看看是否可以解決布局警告,如下圖控制臺沒有打印任何布局警告,有點(diǎn)強(qiáng)迫癥的我看著很舒心了,哈哈
2.根據(jù)時(shí)間計(jì)算不同長度氣泡并顯示
下面我們根據(jù)時(shí)間不同給self.bubbleView寬度即可,我可以通過- (void)setModel:方法可以獲取語音消息時(shí)間,所以語音氣泡寬度可以在這個方法設(shè)置;(其他類型氣泡改變長度同理在這里添加下面的代碼即可,還請自己變通)如下:
@interface EaseMessageCell()
//MARK:根據(jù)時(shí)間設(shè)置氣泡長度
@property (nonatomic) NSLayoutConstraint *bubbleVoiceWidthConstraint;
@property (nonatomic) NSLayoutConstraint *bubbleLocationWidthConstraint;
@property (nonatomic) NSLayoutConstraint *bubbleImageWidthConstraint;
@end
@implementation EaseMessageCell
.......
- (void)setModel:(id<IMessageModel>)model
{
_model = model;
if ([self respondsToSelector:@selector(isCustomBubbleView:)] && [self isCustomBubbleView:model]) {
[self setCustomModel:model];
} else {
switch (model.bodyType) {
case EMMessageBodyTypeText:
.......
case EMMessageBodyTypeVoice:
{
........
//MARK:根據(jù)時(shí)間設(shè)置氣泡長度
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;
.......
}
設(shè)置效果如圖:
通過上圖下拉操作,會導(dǎo)致voiceImageView被拉伸,我們找到voiceImageView多余的左和右自動布局代碼注釋掉即可解決
OK,截圖下拉導(dǎo)致被拉伸,效果圖如下:
僅供大家參考快速定位和解決EaseUI布局問題,如果有其他bug已經(jīng)解決,分享一下大家一起學(xué)習(xí)!
