IM模块-UiCollectionView列表显示气泡文本

雨点打透心脏的1/2处 2022-09-25 04:19 288阅读 0赞

转载地址： \[简书地址\]([http://www.jianshu.com/users/23d0ae412e19/latest\_articles][http_www.jianshu.com_users_23d0ae412e19_latest_articles])

实现了， 自定义气泡，文本消息的基本展示。 效果图如下。 ![Center][]

点击  最下面的  textView  实现自动上拉，显示出下面的一个UIView，这个UIview按道理会显示出更多，表情这样的视图组件出来。 具体代码如下：

#import "ViewController.h"
    #import "TalkCell.h"
    #import "TalkMessage.h"
    
    @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UITextViewDelegate>
    
    @property (nonatomic,strong) NSMutableArray *array;
    @property (nonatomic,strong) TalkMessage *talkMsg;
    @property (nonatomic,strong) UICollectionView *collection;
    @property (nonatomic,assign) bool  flag;
    
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        self.view.backgroundColor = [UIColor whiteColor];
        
        _array = [[NSMutableArray alloc]init];
        for (int i = 0; i < 20; i++) {
            TalkMessage *talkMessage = [[TalkMessage alloc]init];
            talkMessage.messageBubbleType = MessageBubbleTypeText;
            if (i%2 == 0) {
                talkMessage.flag = YES ;
                talkMessage.talkContent = [NSString stringWithFormat:@"%d-->号新秀,iOS坚持多长时间了",i];
            }else{
                talkMessage.flag = NO;
                talkMessage.talkContent = @"战斗力都是5的渣渣";
            }
            
            [_array addObject:talkMessage];
        }
        
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        layout.minimumLineSpacing = 0;
        layout.minimumInteritemSpacing = 0;
        
        
        _collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.height) collectionViewLayout:layout];
        _collection.delegate = self;
        _collection.dataSource = self;
        _collection.backgroundColor = [UIColor grayColor];
        _collection.contentInset = UIEdgeInsetsMake(0, 0, 100, 0);
        
        [_collection registerClass:[TalkCell class] forCellWithReuseIdentifier:@"talkCell"];
        [self.view addSubview:_collection];
        
        
        // 默认移动到最后一项
        [_collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:_array.count - 1 inSection:0] atScrollPosition:UICollectionViewScrollPositionBottom animated:true];
        
        
        // 监控contentSize的变化， 好移动UIScrollView 
        [_collection addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
        
        
        UITextView *field = [[UITextView alloc]init];
        field.frame = CGRectMake(0, self.view.bounds.size.height - 50, self.view.bounds.size.width, 50);
        field.backgroundColor = [UIColor orangeColor];
        field.delegate = self;
        [self.view bringSubviewToFront:field];
        [self.view addSubview:field];
        
        
        UIView *view = [[UIView alloc]init];
        view.frame = CGRectMake(0, self.view.bounds.size.height, self.view.bounds.size.width, 300);
        view.backgroundColor = [UIColor purpleColor];
        [self.view addSubview:view];
    }
    
    
    #pragma mark  UITextFieldDelegate
    
    - (void)textViewDidChange:(UITextView *)textView{
        
        
    
        [UIView animateWithDuration:1 animations:^{
            
            self.view.frame = CGRectMake(0, -300, self.view.bounds.size.width, self.view.bounds.size.height);
            
        } completion:^(BOOL finished) {
            
              [self handlerBusiness];
        }];
    
    }
    
    #pragma mark -- scrollViewDelegate
    
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
        
        if (self.view.frame.origin.y == 0) {
            
            return;
        }
        
        [UIView animateWithDuration:1 animations:^{
            
            self.view.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
            
        } completion:^(BOOL finished) {
            
             [_collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:_array.count -1 inSection:0] atScrollPosition:UICollectionViewScrollPositionBottom animated:true];
        }];
        
    }
    
    
    
    
    - (void)handlerBusiness{
    
        TalkMessage *talkMessage = [[TalkMessage alloc]init];
        talkMessage.messageBubbleType = MessageBubbleTypeText;
        talkMessage.flag = YES;
        talkMessage.talkContent = @"战斗力都是25的渣渣";
        [_array addObject:talkMessage];
        [_collection reloadData];
        [_collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:_array.count -1 inSection:0] atScrollPosition:UICollectionViewScrollPositionBottom animated:true];
    }
     
    
    #pragma mark UICollectionViewDelegate
    
    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    
        return 1;
    }
    
    
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
        return _array.count;
    }
    
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        
        _talkMsg = [_array objectAtIndex:indexPath.row];
        TalkCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"talkCell" forIndexPath:indexPath];
        cell.backgroundColor = [UIColor grayColor];
        cell.message = _talkMsg;
        return cell;
    }
    
    
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
        CGSize  itemSize = CGSizeMake(self.view.bounds.size.width, 80);
        return itemSize;
    }
    
    
    // 监控 这个值的变化。 KVO 处理。
    
    - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    
        if ([keyPath isEqualToString:@"contentSize"]) {
            
             NSLog(@"正在监控中........");
        }
    }
    
    
    @end

#import <UIKit/UIKit.h>
    #import "TalkMessage.h"
    
    @interface TalkCell : UICollectionViewCell
    
    @property (nonatomic,strong) TalkMessage *message;
    
    @end

#import "TalkCell.h"
    #import "BubbleView.h"
    #import "UIView+FrameLayout.h"
    #import "UIImage+Addition.h"
    #import "BubbleTextView.h"
    
    
    @interface TalkCell()
    
    // 头像
    @property (nonatomic,strong) UIImageView *avateImageV;
    
    // 昵称
    @property (nonatomic,strong) UILabel *nameLabel;
    
    // 聊天的气泡,包含所有的消息类型
    @property (nonatomic,strong) BubbleView *bubbleImageV;
    
    
    // 消息发送状态
    @property (nonatomic,strong) UIView *messageSendStateView;
    
    
    @end
    
    
    @implementation TalkCell
    
    
    - (void)awakeFromNib{
    
     
        
    }
    
    
    - (instancetype)initWithFrame:(CGRect)frame{
    
        self  = [super initWithFrame:frame];
        if (self) {
            [self setUpUi];
        }
        return self;
    }
    
    
    - (void)setUpUi{
        
        _avateImageV = [[UIImageView alloc]init];
        _avateImageV.image = [UIImage imageNamed:@"3.jpg"];
        _avateImageV.layer.cornerRadius = 45/2;
        _avateImageV.layer.masksToBounds = YES;
        _avateImageV.userInteractionEnabled = YES;
        
        _bubbleImageV = [[BubbleView alloc]init];
        _bubbleImageV.backgroundColor = [UIColor clearColor];
        
        _messageSendStateView = [[UIView alloc]init];
        
        [self.contentView addSubview:_avateImageV];
        [self.contentView addSubview:_bubbleImageV];
        [self.contentView addSubview:_messageSendStateView];
    }
    
    
    #define KTopMargin 10
    #define KLeftMargin 12
    
    // 根据不同的标示显示出不同的组件的位置。
    
    - (void)setMessage:(TalkMessage *)message{
        
        _message = message;
        
        if (message.flag) { // 左边
            
            _avateImageV.frame = CGRectMake(self.width0-45-KLeftMargin, KTopMargin, 45, 45);
            [_bubbleImageV setBubbleImage:[UIImage imageWithColor:[[UIColor orangeColor] colorWithAlphaComponent:0.45]] isSender:YES];
         
        }else{// 右边
             
            _avateImageV.frame = CGRectMake(KLeftMargin, KTopMargin, 45, 45);
           [self.bubbleImageV setBubbleImage:[UIImage imageWithColor:[[UIColor whiteColor] colorWithAlphaComponent:0.45]] isSender:NO];
         }
        
        
        //bubbleImageV中的视图是不确定的，所以不打算复用，每次赋值移除之前视图，重新加新视图，复用会重叠问题。
        [self.bubbleImageV.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
        
        
        
        // 判断类型
        switch (message.messageBubbleType) {
            case MessageBubbleTypeText:{
                
                BubbleTextView *bubbleView = [BubbleTextView BubbleTextView];
                bubbleView.message = message;
                [self.bubbleImageV addSubview:bubbleView];
                
                CGSize size = [self makeRect];
                
                //注意self.bubbleImageV是在内部bubble的size.width上增加间距定的frame
                if (_message.flag) {
                    self.bubbleImageV.frame = CGRectMake(CGRectGetMinX(self.avateImageV.frame)-(size.width+2*KLeftMargin)-10,KTopMargin,size.width+2*KLeftMargin,size.height+2*KTopMargin);
                    
                }else{
                    self.bubbleImageV.frame = CGRectMake(CGRectGetMaxX(self.avateImageV.frame)+10,KTopMargin,size.width+2*KLeftMargin,size.height+2*KTopMargin);
                }
                
                   bubbleView.frame = CGRectMake(KLeftMargin, KTopMargin, size.width, size.height);
                   break;
               }
            default:
                break;
        }
    }

#import <UIKit/UIKit.h>
    
    @interface BubbleView : UIView
    
    @property(nonatomic,strong) UIImage *bubbleImage;
    @property(nonatomic,assign) BOOL isSender;
    
    
    - (void)setBubbleImage:(UIImage *)bubbleImage
                  isSender:(BOOL)isSender;
    
    @end

#import "BubbleView.h"
    #import "UIImage+Addition.h"
    
    
    @implementation BubbleView
    
    
    - (void)setBubbleImage:(UIImage *)bubbleImage isSender:(BOOL)isSender{
        _bubbleImage = bubbleImage;
        _isSender = isSender;
        [self setNeedsDisplay];
    }
    
    
    - (void)drawRect:(CGRect)rect{
        
        [UIImage drawImage:_bubbleImage atFrame:rect isSender:_isSender];
    }
    
    @end

#import <Foundation/Foundation.h>
    
    
    typedef NS_ENUM(NSInteger,MessageBubbleType){
        
        MessageBubbleTypeText = 0, // 文本
        MessageBubbleTypePhoto = 1, // 照片
        MessageBubbleTypeVideo = 2, // 视频
        MessageBubbleTypeVoice = 3, // 声音
        MessageBubbleTypeLocation = 4 // 地理位置
    };
    
    
    @interface TalkMessage : NSObject
    
    // 消息类型
    @property (nonatomic,assign) MessageBubbleType messageBubbleType;
    
    // 左右区别标示
    @property (nonatomic,assign) bool flag;
    
    
    // 文字的内容
    @property (nonatomic,strong) NSString *talkContent;
    
    
    @end

#import <UIKit/UIKit.h>
    #import "TalkMessage.h"
    
    @interface BubbleTextView : UIView
    
    
    @property (nonatomic,strong) TalkMessage *message;
    
    
    + (instancetype)BubbleTextView;
     
    
    
    @end

#import "BubbleTextView.h"
    
    #define Kfont [UIFont systemFontOfSize:14]
    
    
    @interface BubbleTextView ()
    
    @property(nonatomic,strong) UILabel *textLabel;
    
    @end
    
    
    
    @implementation BubbleTextView
    
    
    + (instancetype)BubbleTextView
    {
        BubbleTextView *bubbleView = [[self alloc]init];
        return bubbleView;
    }
    
    
    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            self.textLabel = [[UILabel alloc]initWithFrame:self.bounds];
            self.textLabel.userInteractionEnabled = YES;
            self.textLabel.font = Kfont;
            self.textLabel.numberOfLines = 0;
            self.textLabel.lineBreakMode = NSLineBreakByCharWrapping;
            [self addSubview:self.textLabel];
        }
        return self;
    }
    
    
    
    - (void)setMessage:(TalkMessage *)message{
       
        _message = message;
        self.textLabel.text = message.talkContent;
    }
    
    
    
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        self.textLabel.frame = self.bounds;
    }
    
    
    
    
    
    
    
    
    
    
    @end

画气泡代码如下：

+ (void)drawImage:(UIImage *)image atFrame:(CGRect)rect isSender:(BOOL)isSender
    {
        
        CGFloat width = rect.size.width;
        CGFloat height = rect.size.height;
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        
        
        
        //左上弧度角
        CGPoint leftTopCornerTopPoint  = CGPointMake(KMargin+KCornRadius, KMargin);
        CGPoint leftTopCornerBottomPoint = CGPointMake(KMargin, KMargin+KCornRadius);
        
        
        //右上弧度角
        CGPoint rightTopCornerTopPoint  = CGPointMake(width-KCornRadius-KMargin, leftTopCornerTopPoint.y);
        CGPoint rightTopCornerBottomPoint = CGPointMake(width-KMargin,leftTopCornerBottomPoint.y);
        
        
        
        //左下弧度角
        CGPoint leftBottomCornerTopPoint  = CGPointMake(leftTopCornerBottomPoint.x, height-KMargin-KCornRadius);
        CGPoint leftBottomCornerBottomPoint = CGPointMake(leftTopCornerTopPoint.x, height-KMargin);
        
        
        //右下弧度角
        CGPoint rightBottomCornerTopPoint  = CGPointMake(rightTopCornerBottomPoint.x, leftBottomCornerTopPoint.y);
        CGPoint rightBottomCornerBottomPoint = CGPointMake(rightTopCornerTopPoint.x, leftTopCornerBottomPoint.y);
        
        if (isSender) {
            
            //右上尖嘴符号：三角
            //三角上端点
            CGPoint triangleTopPoint = CGPointMake(rightTopCornerBottomPoint.x, rightTopCornerTopPoint.y+KTriangleSpace);
            CGPoint triangleMiddlePoint = CGPointMake(width, triangleTopPoint.y+KTriangleWidth/2);
            CGPoint trianglBottomPoint = CGPointMake(triangleTopPoint.x, triangleTopPoint.y+KTriangleWidth);
            
            
            //先画左上圆弧
            
            [path moveToPoint:leftTopCornerBottomPoint];
            [path addArcWithCenter:CGPointMake(leftTopCornerTopPoint.x, leftTopCornerBottomPoint.y) radius:KCornRadius startAngle:-M_PI endAngle:-M_PI_2 clockwise:YES];
            
            
            //上边框线
            [path addLineToPoint:rightTopCornerTopPoint];
            
            //右上圆弧
            [path addArcWithCenter:CGPointMake(rightTopCornerTopPoint.x, rightTopCornerBottomPoint.y) radius:KCornRadius startAngle:-M_PI_2 endAngle:0 clockwise:YES];
            
            //气泡尖嘴
            [path addLineToPoint:triangleTopPoint];
            [path addLineToPoint:triangleMiddlePoint];
            [path addLineToPoint:trianglBottomPoint];
            
            
            //右边框线
            [path addLineToPoint:rightBottomCornerTopPoint];
            
            
            //右下圆弧
            [path addArcWithCenter:CGPointMake(rightBottomCornerBottomPoint.x, rightBottomCornerTopPoint.y) radius:KCornRadius startAngle:0 endAngle:M_PI_2 clockwise:YES];
            
            
            //下边框线
            [path addLineToPoint:leftBottomCornerBottomPoint];
            
            
            [path addArcWithCenter:CGPointMake(leftBottomCornerBottomPoint.x, leftBottomCornerTopPoint.y) radius:KCornRadius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
            
        }
        
        
        
        
        else
        {
            //左上尖嘴符号：三角
            //三角上端点
            CGPoint triangleTopPoint = CGPointMake(leftTopCornerBottomPoint.x, leftTopCornerTopPoint.y+KTriangleSpace);
            CGPoint triangleMiddlePoint = CGPointMake(0, triangleTopPoint.y+KTriangleWidth/2);
            CGPoint trianglBottomPoint = CGPointMake(triangleTopPoint.x, triangleTopPoint.y+KTriangleWidth);
            
            
            //先画左上圆弧
            
            [path moveToPoint:leftTopCornerBottomPoint];
            [path addArcWithCenter:CGPointMake(leftTopCornerTopPoint.x, leftTopCornerBottomPoint.y) radius:KCornRadius startAngle:-M_PI endAngle:-M_PI_2 clockwise:YES];
            
            
            //上边框线
            [path addLineToPoint:rightTopCornerTopPoint];
            
            //右上圆弧
            [path addArcWithCenter:CGPointMake(rightTopCornerTopPoint.x, rightTopCornerBottomPoint.y) radius:KCornRadius startAngle:-M_PI_2 endAngle:0 clockwise:YES];
            
            
            
            //右边框线
            [path addLineToPoint:rightBottomCornerTopPoint];
            
            
            //右下圆弧
            [path addArcWithCenter:CGPointMake(rightBottomCornerBottomPoint.x, rightBottomCornerTopPoint.y) radius:KCornRadius startAngle:0 endAngle:M_PI_2 clockwise:YES];
            
            
            //下边框线
            [path addLineToPoint:leftBottomCornerBottomPoint];
            
            
            [path addArcWithCenter:CGPointMake(leftBottomCornerBottomPoint.x, leftBottomCornerTopPoint.y) radius:KCornRadius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
            
            
            //气泡尖嘴
            [path addLineToPoint:triangleTopPoint];
            [path addLineToPoint:triangleMiddlePoint];
            [path addLineToPoint:trianglBottomPoint];
            
        }
        
        
        //终于画完了,oh shit
        
        [path addClip];
        
        
        [image drawInRect:rect];
        
    }
    
    
    
    + (UIImage *)imageWithColor:(UIColor *)color
    {
        CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
        UIGraphicsBeginImageContext(rect.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        CGContextSetFillColorWithColor(context, [color CGColor]);
        CGContextFillRect(context, rect);
        
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        return image;
    }

[http_www.jianshu.com_users_23d0ae412e19_latest_articles]: http://www.jianshu.com/users/23d0ae412e19/latest_articles
[Center]: /images/20220718/2a9ff0191f6045749aeb42bc9f904b1f.png