在做私信时,聊天泡泡仿着QQ做时,聊天泡泡底图有露出,不怎么好看,微信的就比较好看,当时就因为那2行纠结了好久

  1. - (void)viewDidLoad {
  2. [super viewDidLoad];
  3. // Do any additional setup after loading the view, typically from a nib.
  4. self.view.backgroundColor=[UIColor grayColor];
  5.  
  6. /*左边聊天泡泡*/
  7. UIImage *leftbubbleImage = [UIImage imageNamed:@"Information-box_secect"];
  8. leftbubbleImage = [leftbubbleImage stretchableImageWithLeftCapWidth:leftbubbleImage.size.height * 0.3 topCapHeight:leftbubbleImage.size.height * 0.8];
  9.  
  10. UIImageView *leftBubbleView=[[UIImageView alloc]init];
  11. leftBubbleView.image=leftbubbleImage;
  12. leftBubbleView.frame=CGRectMake(20, 100.0f,leftbubbleImage.size.width*3, leftbubbleImage.size.height*3);
  13. [self.view addSubview:leftBubbleView];
  14.  
  15. //聊天图片
  16. UIImageView *ChatPicture0=[[UIImageView alloc]initWithFrame:leftBubbleView.frame];
  17. ChatPicture0.image=[UIImage imageNamed:@"chat1.jpg"];
  18. [self.view addSubview:ChatPicture0];
  19.  
  20. //画图 关键代码
  21. CALayer *layer0 = leftBubbleView.layer;
  22. layer0.frame = (CGRect){{0,0},leftBubbleView.layer.frame.size};
  23. ChatPicture0.layer.mask = layer0;
  24.  
  25. /*右边聊天泡泡*/
  26. UIImage *rightBubbleImage = [UIImage imageNamed:@"Information-box_blue_nor"];
  27. rightBubbleImage = [rightBubbleImage stretchableImageWithLeftCapWidth:rightBubbleImage.size.height * 0.3 topCapHeight:rightBubbleImage.size.height * 0.8];
  28.  
  29. UIImageView *bubbleView=[[UIImageView alloc]init];
  30. bubbleView.image=rightBubbleImage;
  31. bubbleView.frame=CGRectMake(200, 100.0f,rightBubbleImage.size.width*3, rightBubbleImage.size.height*3);
  32. [self.view addSubview:bubbleView];
  33.  
  34. //聊天图片
  35. UIImageView *ChatPicture=[[UIImageView alloc]initWithFrame:bubbleView.frame];
  36. ChatPicture.image=[UIImage imageNamed:@"chat1.jpg"];
  37. [self.view addSubview:ChatPicture];
  38.  
  39. //画图 仿weixin
  40. CALayer *layer = bubbleView.layer;
  41. layer.frame = (CGRect){{0,0},bubbleView.layer.frame.size};
  42. ChatPicture.layer.mask = layer;
  43.  
  44. }

效果图

 
 

聊天泡泡(仿微信)By-H罗的更多相关文章

  1. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  2. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...

  3. react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN ...

  4. angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

    一.项目介绍 运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室 ...

  5. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  6. 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]

    本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...

  7. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  8. Android 高仿微信语音聊天页面高斯模糊效果

    目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...

  9. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

随机推荐

  1. 通过Rancher Desktop在桌面上运行K8s

    Rancher 发行的操作系统新选择:Rancher Desktop for Windows,它可以帮助你在Windows桌面上管理Kubernetes和容器.当然他当然会支持Linux,Mac的. ...

  2. 部署Kubernetes Cluster

    中文学习网站:https://www.kubernetes.org.cn/doc-16 部署docker服务 所有节点部署docker服务 curl -sSL https://get.daocloud ...

  3. Ranger-Sqoop2插件实现详解

    1.组件和插件介绍 1.1.Ranger介绍 Apache Ranger能够监控和管理整个Hadoop平台的综合数据安全, 目前作为Apache Top Level Project(TLP顶级项目), ...

  4. javascript中逻辑运算(||,&&,!)

    作为一个后端开发的程序员,一直就对JavaScript情有独钟,作为一门前后端通吃的语言,必须赞一下.而且之前很长一段时间都有在做JavaScript,一路都是和ie8死磕,磕完又找低版本的谷歌磕,坑 ...

  5. xshell 所选的用户密钥未在远程主机上注册;无法加载密钥

    他山之石 https://zhuanlan.zhihu.com/p/92528287 安全起见,服务器最近的安全策略准备进行更改,逐渐由原来的密码登录更换为密钥登录认证. 于是今天把服务器上的id_r ...

  6. 解读与部署(三):基于 Kubernetes 的微服务部署即代码

    在基于 Kubernetes 的基础设施即代码一文中,我概要地介绍了基于 Kubernetes 的 .NET Core 微服务和 CI/CD 动手实践工作坊使用的基础设施是如何使用代码描述的,以及它的 ...

  7. 一文搞清楚 DNS 的来龙去脉

    目录 美国霸权 ICANN:互联网界的联合国 IP 地址分配 域名解析架构 分层架构: DNS 缓存: 根 DNS 服务器: 顶级 DNS 服务器(TLD): 权威 DNS 服务器: 本地 DNS: ...

  8. 《剑指offer》面试题22. 链表中倒数第k个节点

    问题描述 输入一个链表,输出该链表中倒数第k个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个节点.例如,一个链表有6个节点,从头节点开始,它们的值依次是1.2.3.4.5. ...

  9. MongDB日志分析

    Result文件数据说明: Ip:106.39.41.166,(城市) Date:10/Nov/2016:00:01:02 +0800,(日期) Day:10,(天数) Traffic: 54 ,(流 ...

  10. 【记录一个问题】golang中的time.Now()非常慢

    对一个代码做profile: 总函数调用 29.74s 20.25s 153: timestamp := time.Now().Unix() 这样的一行占了20.25秒. 我知道linux下 time ...