手把手教你实现微信聊天框随文本升高

2023-11-10 08:16:10

当当当当，我胡汉三又回来了。今天介绍实现聊天的聊天框随文本升高，效果图如下

接下来让我们一步一步实现这个功能吧

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]

手把手教你实现微信聊天框随文本升高

码农公寓

Part1 实现textView自动升高

Part2 聊天中的聊天框实现

相关文章