QQ聊天界面的布局和设计(IOS篇)-第二季
QQChat Layout - 第二季
本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了。有些细节可能会一带而过, 如有疑问, 相互交流进步~.
在第一季中我们完成了QQ聊天界面的基本框架.但是相对于iphone上手机QQ的聊天界面还存在以下差距。
- 第二季中的工程源文件下载地址:点击到百度云下载
- 聊天消息没有左右区分。
- 聊天内容没有背景图片。
菜单栏还没做出, 不能发消息。
现在我们就一步步来解决这些问题。首先我们解决消息没有左右区分的问题。
第四步:
我们打开StoryBoard。拖入和左边一样的两个控件ImageView和UIButton。并设置和左边一样的约束。具体的约束思路如下:1.设置ImageView距离右边10 , 宽高为40==》确定了x,和宽高
2.设置ImageView的上面和timeLabel下面对齐 ==》确定了Y, 确定了Button
3.设置Button右边距离ImageView左边10, 固定宽高。
4.设置Button的上面与ImageView上面对齐。
SB图片如下:
修改完SB的cell界面后开始编码了。我们主要需要在setMessage这个setter方法中, 加入判断聊天消息是属于左边还是属于右边。具体逻辑如下:
- (void)setMessage:(Message *)message {_message = message;MessageWhoIsMe ==_message.type?[self setShowButton: _rightText andIcon: _rightIcon withMessage:message]:[self setShowButton: _text andIcon: _icon withMessage:message];}/*** 设置要展示的消息内容与头像** @param button 设置要显示的信息。* @param icon 设置要显示的头像*/
- (void)setShowButton:(UIButton *)text andIcon:(UIImageView *)icon withMessage:(Message*)message{_rightIcon.hidden = _rightText.hidden = (text != _rightText);_icon.hidden = _text.hidden = (text != _text);// 1.给控件装数据icon.image = [UIImage imageNamed:[self getPicture: message.type]];[text setTitle:message.text forState:UIControlStateNormal];_timeLabel.text = message.time;// 2.装完数据强制布局, 使得设置按钮高度的值准确, 并且更新约束[text layoutIfNeeded];// 要先强制布局, 这时候更新约束才准确// 更新约束, 使得按钮的高度此时等于文本的高度。[text updateConstraints:^(MASConstraintMaker *make) {CGFloat textH = CGRectGetHeight(text.titleLabel.frame); //+ 30;make.height.equalTo(textH);}];// 3.再次强制布局, 使得约束生效, 这样获取到的按钮高度才准确[text layoutIfNeeded];CGFloat textH = CGRectGetMaxY(text.frame);CGFloat iconH = CGRectGetMaxY(icon.frame);CGFloat cellH = MAX(textH, iconH) + 10;// 4.更新cell的高度到模型中message.height = cellH;}
效果图如下(已经实现了左右排列):
- 第五步:
- 我们已经完成了QQ消息的可以分左右排列, 接下去我们需要给消息上背景图, 也就是设置按钮的背景图。由于按钮有状态,所以你不能操作它的图片控件来给它设置图, 应该用其提供的设置图片的接口。具体的逻辑比较简单。你可以直接看代码,我主要讲下
[UIImage resizeWithImageName:
的知识点。
.....省略N行代码_timeLabel.text = message.time;// 1.2 改进背景图。if (!_rightText.hidden) { // 当前显示的是右边, 则设置右边的背景[_rightText setBackgroundImage:[UIImage resizeWithImageName:@"chat_send_nor"] forState:UIControlStateNormal];[_rightText setBackgroundImage:[UIImage resizeWithImageName:@"chat_send_press_pic"] forState:UIControlStateHighlighted];}else { // 显示的是左边[_text setBackgroundImage:[UIImage resizeWithImageName:@"chat_recive_press_pic"] forState:UIControlStateNormal];[_text setBackgroundImage:[UIImage resizeWithImageName:@"chat_recive_nor"] forState:UIControlStateHighlighted];}// 2.装完数据强制布局, 使得设置按钮高度的值准确, 并且更新约束.....省略N行代码
- 具体的逻辑很简单,但是我要介绍下图片拉伸的知识。在实际项目中, 我们使用的资源图片不可能是十分大的, 能小则小。不然很消耗内存。你可以打开工程看到, 这个工程中的资源图片中消息背景图。你可以尝试把
UIImage resizeWithImageName:
替换成UIImage imageNamed:
来加载图片, 会发现,当按钮中的文字变大时候,图片还是那么大,也就说图片没有随着按钮的尺寸进行伸缩。好在苹果已经为我们提供了一个方法来伸缩图片。其实UIImage resizeWithImageName:
只是我对Apple官方的方法的一个封装, 并将它做成UIImage的分类 细说
-(UIImage *)resizableImageWithCapInsets:
这个方法是Apple提供的Image类的实例方法。为了不误导大家, 特意查了官方解释如下:1.简单来说该方法是用来返回一个可随着Button尺寸自动伸缩的图片,并且能保留住原来图片的四个边角, 也就说你要把它设置成Button的背景图。
2.该方法主要通过保护区域是不是有宽、高,和保护区域的大小来决定渲染的方式。当保护区域有高该图片就是竖直可伸缩, 有宽则是水平可伸缩。当宽高都是1px时候,选用的渲染方式是直接把这1px的图片扯大, 渲染的效率十分高。
那么究竟如何确定保护区域呢?根据官方文档,我们最好将保护区域设置成1*1的大小。这样水平、竖直方向都可以进行拉伸, 并且渲染方式也高, 还有一点就是这个区域我们最好选择的是最靠近正中间的, 因为一般来说这样才能尽可能把图片边缘切掉, 保证渲染出来的图片和远图片看上去是放大后的效果。否则可能出现,图片存在菱角。当然我们还能通过resizableImageWithCapInsets:resizingMode:
来说明图片渲染的模式,一种是使用拉伸来resize图片, 一种是使用平铺的方式来resize图片.说了那么多, 你应该懂得了原理, 那么直接看我给UIImage扩充的分类方法吧。
#import "UIImage+Resizingable.h"@implementation UIImage (Resizingable)+ (UIImage *)resizeWithImageName:(NSString *)imageName {UIImage * image = [UIImage imageNamed: imageName];int W = image.size.width * 0.5;int H = image.size.height * 0.5;return [image resizableImageWithCapInsets: UIEdgeInsetsMake(H, W, image.size.height - H - 1 , image.size.width - W - 1)];}
@end
第五步-1效果图:
- 你一定会看出还存在一点问题。问什么文字没有全部被背景包括着,这是因为很多时候美工给的图片背景都会有留白问题。也就是不是没有被图片包括着,是因为图片旁边有一些空白,显示出来就成这样了。这是后我们又可以利用按钮的内边距来把Label向左右推,这样Label就会变高了,会超出Button,所以我们需要再给Button加点高度。应为给Button设置内边距只需要设置一次,所以我一般将这种操作方法
- (void)awakeFromNib
方法中
- (void)awakeFromNib {// 设置自动换行_text.titleLabel.numberOfLines = 0;_rightText.titleLabel.numberOfLines = 0;// 设置button的内边距_text.contentEdgeInsets = UIEdgeInsetsMake(0, 30, 0, 30);_rightText.contentEdgeInsets = UIEdgeInsetsMake(0, 30, 0, 30);}
更改Button的高度约束,多加30
[text updateConstraints:^(MASConstraintMaker *make) {CGFloat textH = CGRectGetHeight(text.titleLabel.frame)+ 30;make.height.equalTo(textH);}];
我觉得你会对内边距存在很大的疑惑, 请看我的博客有专门介绍了下内边距。
最终效果图如下:
时间有限,菜单栏还介绍, 敬请关注第三季。
转载于:https://www.cnblogs.com/objectc/p/4561781.html
QQ聊天界面的布局和设计(IOS篇)-第二季相关推荐
- 防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果
教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...
- gui编程实践(2)--qq聊天界面 JTextArea多行文本框组件
//qq聊天界面 package com.test; import java.awt.*; import javax.swing.*; public class Demo8_10 extends JF ...
- C语言实现类似QQ聊天界面抖动功能
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处 本文章博客地址:https://cplusplus.blog.csdn.net/article/details/104991863 实 ...
- 点击跳转到QQ聊天界面
<!--//需要添加好友验证--><a href="tencent://message/?uin=QQ号码&Site=&Menu=yes"> ...
- 【3】QQ 聊天界面
1.说明 稍微修改了下QQ示例里面的聊天界面界面,然后把代码扣过来完成了QQ聊天界面部分,效果还可以. 不过自己添加了消息响应:窗口抖动,截屏,字体栏的显示和隐藏 2.代码部分 // QQTalk.h ...
- qt小项目 代码实现简易的QQ聊天界面
qt小项目 代码实现简易的QQ聊天界面 代码 效果图 总结 代码 myDialog.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QW ...
- 轻松实现网页中通过链接跳转到QQ聊天界面,通过链接加QQ群,自动打开聊天对话框等等,包含电脑版和手机版的实现,示例部分Android和iOS的代码
通过链接打开对话框: 打开qq聊天窗口的方法 <a href="http://wpa.qq.com/msgrd?v=3&uin=1450612626&site=qq&a ...
- Android 仿qq聊天界面之一
一.登录界面 本来是只想仿一个qq的聊天界面的,顺便做了一个登录界面,熟悉下SharedPreferences(解释一下:SharedPreferences由于非常适合记录一些零散的简单的数据,因此登 ...
- UI界面编写(仿QQ聊天界面)
UI界面编写实战 这里我们模拟QQ聊天的主界面,编写一个简单的聊天界面. 项目描述 首先搭建我们的主界面,在最上边放一个标题栏,然后是一个ListView,用于展示发送的消息,最下边是选择要发送的表情 ...
最新文章
- Spark(六):SparkSQLAndDataFrames对结构化数据集与非结构化数据的处理
- POJ 3034 Whac-a-Mole [DP]
- 【牛客 - 303B第十五届浙江大学宁波理工学院程序设计大赛(同步赛)】Fibonacci and Counting(Fib数性质,gcd辗转相除法性质)
- Python Imaging Library: ImageQt Module(图像QT模块)
- 如何自学python知乎-学习Python价格多少?如何学习好?老男孩IT教育
- mariadb修改默认字符集
- 现在最火的深度学习框架是什么?
- cdsn 最大分类数相关
- “耐撕”团队第一次讨论——“抢答器”需求分析
- 计算机 添加环境变量,windows系统手动添加环境变量的方法
- html在线生成字体,手写字体在线生成
- Kmplayer音频设置
- uniapp显示服务器请求超时,uniapp发布H5连接服务器超时
- 一步步教你批量压缩打包文件夹
- 这次的PION的总结
- 电脑mp4格式视频打不开怎么解决?
- 养鸡场的计算机管理,养鸡场管理系统7.3 免费版
- 红橙Darren视频笔记 换肤框架4 换肤的功能完善 内存泄漏分析
- spring cloud gateway统一异常拦截处理
- 沈南鹏:成功创业者的特征
热门文章
- 利用BeautifulSoup合并多个带有交叉链接的html文件
- 广州琶洲人工智能与数字经济试验区亮相进博会
- 基于机器视觉的图像灰度化方法比较分析
- 太强了,今晚又找到一篇搞笑语录
- 仅仅有人物没背景的图片怎么弄_设置微信聊天背景里怎么就一张白色的,没有可供下载的背景图...
- 武汉大学计算机学院历任院长,胡瑞敏 - 教师简历 CV- 武汉大学计算机学院
- nasm汇编实现贪吃蛇
- PADS VX2.8 Mark点的制作方法
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用详情功能-视频录像功能说明...
- “FOR loop contains no keywords”问题解决