手把手教你實現微信聊天框隨文本升高

當當當當，我胡漢三又回來了。今天介紹實現聊天的聊天框隨文本升高，效果圖如下

接下來讓我們一步一步實現這個功能吧

Part1 實現textView自動升高

1.創建一個UITextView的分類 UITextView+AutoRise

@interface UITextView (AutoRise)

@property (nonatomic, assign) CGFloat defaultHeight;
@property (nonatomic, assign) CGFloat maxHeight;
@property (nonatomic, copy) void (^handler)(CGFloat expectHeight);

- (void)addAutoRiseHandlerWithdefaultHeight:(CGFloat)defaultHeight maxHeight:(CGFloat)maxHeight handler:(void (^)(CGFloat expectHeight))handler;

@end

接下來實現
- (void)addAutoRiseHandlerWithdefaultHeight:maxHeight:handler:方法

- (void)addAutoRiseHandlerWithdefaultHeight:(CGFloat)defaultHeight maxHeight:(CGFloat)maxHeight handler:(void (^)(CGFloat))handler
{
    
    self.defaultHeight = defaultHeight;
    self.maxHeight = maxHeight;
    self.handler = handler;
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textChange:) name:UITextViewTextDidChangeNotification object:nil];
}

因為是在分類中添加屬性，所以需要使用runtime的關聯對象(AssociatedObject)來添加。

- (CGFloat)maxHeight
{
    return [objc_getAssociatedObject(self, UITextRiseMaxHeight) floatValue];
}

- (CGFloat)defaultHeight
{
    return  [objc_getAssociatedObject(self, UITextRiseDefaultHeight) floatValue];
}

- (void (^)(CGFloat))handler
{
    return objc_getAssociatedObject(self, UITextRiseHandler);
}

-(void)setDefaultHeight:(CGFloat)defaultHeight
{
    objc_setAssociatedObject(self, UITextRiseDefaultHeight, @(defaultHeight), OBJC_ASSOCIATION_RETAIN);
    
    
}

- (void)setMaxHeight:(CGFloat)maxHeight
{
    objc_setAssociatedObject(self, UITextRiseMaxHeight, @(maxHeight), OBJC_ASSOCIATION_RETAIN);
}

- (void)setHandler:(void (^)(CGFloat))handler
{
    objc_setAssociatedObject(self, UITextRiseHandler, handler, OBJC_ASSOCIATION_COPY_NONATOMIC);
}

現在我們來實現textChange:方法

- (void)textChange:(NSNotification *)noti
{
    UITextView *inputTextView = noti.object;
    
    if (inputTextView != self) {
        return;
    }
    CGFloat expectHeight = 0.f;
    CGSize contentSize = inputTextView.contentSize;

    if(contentSize.height <= self.defaultHeight){
        
        expectHeight = self.defaultHeight;
        
    }else{
        expectHeight = contentSize.height;
        expectHeight = expectHeight > self.maxHeight ? self.maxHeight : expectHeight;
        
        if (expectHeight < self.maxHeight) {
            [inputTextView setContentOffset:CGPointMake(0, 0) animated:NO];
        }
    }

    if (self.handler) {
        self.handler(expectHeight);
    }
}

2.在StoryBoard中添加一個TextView，並設置好約束

將高度約束關聯到控制器

3.在ViewDidLoad:中根據自己的需求設置自動升高

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [_textView addAutoRiseHandlerWithdefaultHeight:_textViewHeightConstraint.constant maxHeight:100 handler:^(CGFloat expectHeight) {
        _textViewHeightConstraint.constant = expectHeight;
        [_textView layoutIfNeeded];
    }];
}

至此自動升高就完成了。

 

Part2 聊天中的聊天框實現

1.在StoryBoard中創建一個控制器(省略)
2.在控制器中添加一個view作為聊天的背景框 bottomBackgroundView
為背景設置一個背景色，並且設置好約束，見圖

3.在bottomBackgroundView中添加一個textView

為textView添加好約束，見圖

4.將添加的控件與控制器關聯

5.在控制器中設置處理代碼

- (void)viewDidLoad {
    [super viewDidLoad];
    
    __weak typeof(self)weakSelf = self;
    
    CGFloat defaultHeight = _bottomBackgroundViewHeightConstraint.constant - 8 * 2;//默認高度
    
    [_textView addAutoRiseHandlerWithdefaultHeight:defaultHeight maxHeight:100.f handler:^(CGFloat expectHeight) {
        __strong typeof(weakSelf) strongSelf = weakSelf;
        strongSelf.bottomBackgroundViewHeightConstraint.constant = expectHeight + 8 * 2;
        [strongSelf.bottomBackgroundView layoutIfNeeded];
    }];
}

效果如下：

你可以從這里下載[demo]