聊天泡泡(仿微信)By-H罗

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

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor=[UIColor grayColor];

    /*左边聊天泡泡*/
    UIImage *leftbubbleImage = [UIImage  imageNamed:@"Information-box_secect"];
    leftbubbleImage = [leftbubbleImage stretchableImageWithLeftCapWidth:leftbubbleImage.size.height * 0.3 topCapHeight:leftbubbleImage.size.height * 0.8];

    UIImageView  *leftBubbleView=[[UIImageView alloc]init];
    leftBubbleView.image=leftbubbleImage;
    leftBubbleView.frame=CGRectMake(20, 100.0f,leftbubbleImage.size.width*3, leftbubbleImage.size.height*3);
    [self.view  addSubview:leftBubbleView];

    //聊天图片
    UIImageView  *ChatPicture0=[[UIImageView alloc]initWithFrame:leftBubbleView.frame];
    ChatPicture0.image=[UIImage imageNamed:@"chat1.jpg"];
    [self.view addSubview:ChatPicture0];

    //画图 关键代码
    CALayer *layer0              = leftBubbleView.layer;
    layer0.frame                 = (CGRect){{0,0},leftBubbleView.layer.frame.size};
    ChatPicture0.layer.mask = layer0;

    /*右边聊天泡泡*/
    UIImage *rightBubbleImage = [UIImage  imageNamed:@"Information-box_blue_nor"];
    rightBubbleImage = [rightBubbleImage stretchableImageWithLeftCapWidth:rightBubbleImage.size.height * 0.3 topCapHeight:rightBubbleImage.size.height * 0.8];

    UIImageView  *bubbleView=[[UIImageView alloc]init];
    bubbleView.image=rightBubbleImage;
    bubbleView.frame=CGRectMake(200, 100.0f,rightBubbleImage.size.width*3, rightBubbleImage.size.height*3);
    [self.view  addSubview:bubbleView];

    //聊天图片
    UIImageView  *ChatPicture=[[UIImageView alloc]initWithFrame:bubbleView.frame];
    ChatPicture.image=[UIImage imageNamed:@"chat1.jpg"];
    [self.view addSubview:ChatPicture];

    //画图 仿weixin
    CALayer *layer              = bubbleView.layer;
    layer.frame                 = (CGRect){{0,0},bubbleView.layer.frame.size};
    ChatPicture.layer.mask = layer;

}

效果图

时间: 2024-08-06 11:56:54

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

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

今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是使用自己开发的wcPop.js插件:编辑器部分由原先的单一表情新增为动图表情,实现了消息.表情发送 | 大图.视频效果预览 | 仿微信红包.打赏等微交互功能. 案例截图: // ...滚动聊天区底部 function wchat_ToBottom(){ //$(".wc__chatMsg-panel

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

一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 MVVM框架:Vue2.5.6 状态管理:Vuex 页面路由:Vue-router iconfont图标:阿里巴巴字体图标库 自定义滚动条:vue-gemini-sc

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

一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom,实现了原生app启动页.As

iOS_29仿微信聊天界面

最终效果图: 自定义cell的封装 BeyondCell // // BeyondCell.h // 29_仿微信聊天 // // Created by beyond on 14-9-4. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> @class BeyondCellFrame; @interface BeyondCell : UITableViewCell // 一行自定

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

html5开发的仿微博.微信聊天web端案例,h5仿微信聊天网页版,采用html5+css3+jquery+swiper+wcPop等技术进行布控架构开发,弹窗插件wcPop.js进行了一次全面api升级,修复编辑器插入表情时光标定位错误bug,新增了上传附件及自定义推送内容,另外也新增了个人名片.上传附件.分享等样式,功能上实现了消息.表情的发送,图片.视频全屏预览. 项目运行图: /* --- 用户设置.Start ---*/ // 联系人/群聊切换 $("body").on(&q

Android 高仿微信实时聊天 基于百度云推送

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天终于有幸利用百度云推送仿一仿微信聊天了~~~ 首先特别感谢:weidi1989分享的Android之基于百度云推送IM ,大家可以直接下载:省了很多事哈,本例中也使用了weidi的部分代码,凡是@author way的就是weidi1989的代码~~ 1.效果图 核心功能也就上面的两张图了~~~我拿着手机和模拟器

一款基于微客服的仿微信的聊天软件

一款基于微客服的仿微信的聊天软件 服务分类: 其它开发,推送 使用服务: 微客服 , 小米推送 功能分类: 社交 支持平台: Android 运行环境: Android 开发语言: Java 开发工具: Eclipse 源码大小: 7.11MB 下载地址:http://www.devstore.cn/code/info/68.html 源码简介 通过集成微客服的SDK和小米推送等常用SDK实现一款仿微信聊天的工具. 源码片段 源码运行截图 热门源码下载: 高仿京东商城 Android快速开发不可

网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍. 效果展示: 先打下广告: 网页闯关游戏入口(请狠狠地点击我, ^_^) . 仿微信窗口的设计源于第四关--倾听女神的故事. 这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉. 需求设定:

CSS3 仿微信聊天小气泡

今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家看看页面的样子吧,如下图所示: 小月博客仿微信聊天界面 页面大致就是这个样子,接下来我们来一起学习制作步骤吧. 第一部分: HTML <div class="leftd">     <span ng-class="leftd_h">