qq聊天布局思路

最新推荐文章于 2016-10-13 17:29:47 发布

ITcontend

最新推荐文章于 2016-10-13 17:29:47 发布

阅读量3.3k

点赞数 2

分类专栏： iOS-UI设计文章标签： qq聊天布局思路

本文链接：https://blog.csdn.net/ITcontend/article/details/41812935

版权

该博客详细介绍了如何实现QQ聊天界面的布局，包括：1. 控制器继承和 storyboard 修改；2. 数据模型的创建和加载；3. 数据模型的保存和描述；4. 自定义 cell 的封装；5. 实现代理方法计算行高和加载数据；6. 监听键盘通知处理输入框；7. 自动回复功能的实现；8. 其他界面设置，如去除分割线和设置背景。通过这些步骤，可以构建一个功能完整的聊天界面。

摘要由CSDN通过智能技术生成

qq聊天布局思路

步骤一、更改控制器继承 UITableViewController ，然后修改 storyboard 中的控制器。
步骤二、加载 plist 文件，创建对应的数据模型
+ ( instancetype )qqWithDict:(NSDictionary *)dict
{
    return [[ self alloc] initWithDict:dict];
}
- ( instancetype )initWithDict:(NSDictionary *)dict
{
    self = [ super init];
    if ( self ) {
        [ self setValuesForKeysWithDictionary:dict];
    }
    return self ;
}

步骤三、把数据模型用数组保存起来
+ (NSMutableArray *)qqs
{
    NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource: @"messages.plist" ofType: nil ]];
    NSMutableArray *arrayM = [NSMutableArray array];
    for (NSDictionary *dict in array) {
        [arrayM addObject:[ self qqWithDict:dict]];
    }
    return arrayM;
}

- (NSString *)description
{
    return [NSString stringWithFormat: @"<%@,%p>{text:%@,time:%@,type:%d}" , self .class, self , self .text, self .time, self .type];
}

步骤四、把 cell 封装到 View 层里面，重写 set 方法，把 frame 计算好

+ ( instancetype )qqView:(UITableView *)tableView
{
    static NSString *ID = @"cell" ;
    SUNQQView *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil ) {
        cell = [[SUNQQView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    return cell;
}

- ( void )setQqInfo:(SUNQQInfo *)qqInfo
{
    _qqInfo = qqInfo;

    // 设置时间
    self .timerLabel.text = qqInfo.time;
    CGFloat timerW = [UIScreen mainScreen].bounds.size.width;
    self .timerLabel.frame = CGRectMake( 0 , 0 , timerW, 35 );

    // 设置头像
    if (qqInfo.type) {
        CGFloat imageX = kMargin;
        CGFloat imageY = CGRectGetMaxY( self .timerLabel.frame) + kMargin;
        self .iconImageView.frame = CGRectMake(imageX, imageY, kIconW, kIconH);
        self .iconImageView.image = [UIImage imageNamed: @"other" ];
    } else {
        CGFloat X = [UIScreen mainScreen].bounds.size.width - kMargin - kIconW;
        CGFloat Y = CGRectGetMaxY( self .timerLabel.frame) + 10 ;
        self .iconImageView.frame = CGRectMake(X, Y, kIconW, kIconH);
        self .iconImageView.image = [UIImage imageNamed: @"me" ];

    }

    // 设置文字
    NSDictionary *dict = @{ NSFontAttributeName: [UIFont systemFontOfSize: 13.0 ] } ;
    CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake( 150 , MAXFLOAT ) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context: nil ];
    [ self .textBtn setTitle:qqInfo.text forState:UIControlStateNormal];
    self .textBtn.contentEdgeInsets = UIEdgeInsetsMa