聊天窗口小技术点

文字输入UITextView 随文字行数变高

static void *textVObservingContext = &textVObservingContext;

- (void)addObservers
{
    [self.inputV.textV addObserver:self
                 forKeyPath:NSStringFromSelector(@selector(contentSize))
                    options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew
                    context:textVObservingContext];
}

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context
{
    if (context != textVObservingContext) return;
    if (object != self.inputV.textV) return;
    if (![keyPath isEqualToString:NSStringFromSelector(@selector(contentSize))]) return;
    
    CGSize oldContentSize = [[change objectForKey:NSKeyValueChangeOldKey] CGSizeValue];
    CGSize newContentSize = [[change objectForKey:NSKeyValueChangeNewKey] CGSizeValue];
    
    CGFloat dy = newContentSize.height - oldContentSize.height;
    // self.maxInputVHeight = 115 这里会相等是因为下面有重新调整dy值
    if (self.inputV.bounds.size.height == self.maxInputVHeight) {
        if (dy > 0 || self.inputV.textV.contentOffset.y > 0) return;
    }
    
    if (dy > 0) { // 增高的情况
        CGFloat curInputVHeight = self.inputV.bounds.size.height;
        CGFloat newInputVHeight = curInputVHeight + dy;
        // 重新调整距离 为了上面的 == 判断能相等
        if (newInputVHeight >= self.maxInputVHeight) {
            dy = self.maxInputVHeight - curInputVHeight;
        }
    } else { // 缩小的情况
        //if (self.inputV.textV.contentOffset.y == 0) return;
        if (oldContentSize.height > self.maxInputVHeight && newContentSize.height > InputVHeight) return;
    }

    // 调整输入工具条高度
    [self intputVHeightChange:dy];
}

- (void)intputVHeightChange:(CGFloat)dy
{
    CGFloat proposedHeight = self.inputV.bounds.size.height + dy;
    
    // 最小是44高度
    CGFloat finalHeight = MAX(proposedHeight, 44);
    [self.inputV updateConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(finalHeight);
    }];
    [self.view setNeedsUpdateConstraints];
    [self.view layoutIfNeeded];
}

height.gif

---

发送图片消息显示的效果(如上图所示)

- (void)testBubbleImage
{
    // 显示的图片
    self.showIV.image = [UIImage imageNamed:@"goldengate"];

    // 泡泡图片
    UIImageView *bubbleIV = [[UIImageView alloc] init];
    
    // 从正中间拉伸的图片
    UIImage *bubbleImage = [UIImage imageNamed:@"send_nor"];
    UIEdgeInsets insets = UIEdgeInsetsMake(bubbleImage.size.height / 2 - 1,
                                           bubbleImage.size.width / 2 - 1,
                                           bubbleImage.size.height / 2 + 1,
                                           bubbleImage.size.width / 2 + 1);
    bubbleIV.image = [bubbleImage resizableImageWithCapInsets:insets];
    //必须设置frame
    //bubbleIV.frame = CGRectInset(self.showIV.bounds, 2.0f, 2.0f);
    bubbleIV.frame = self.showIV.bounds;
    //也可以添加为子控件
    //[self.view addSubview:bubbleIV];
    
    //设置mask 就能做到泡泡边框的图片 如上图所示
    self.showIV.layer.mask = bubbleIV.layer;
}

参考资料:
https://github.com/wangjun59/JSQMessagesViewController