仿微信输入框

最近在写通讯的工程,发现现在很多通讯的输入框都和微信的差不多一样了,都有语音发送,表情包,更多功能选择,最厉害的就是输入框,可以控制高度的变化,然后仔细研究了下,发现里面的细节还是很多的,所以自己写了一个仿微信的输入框。
放上效果图,里面的表情和更多功能是对应的View视图

效果图

下面说一下主要的技术点

1.底部视图的位置和子控件的位置

因为我使用的是存代码的编写,所以在自动布局方便要有很多地方要重新写控件的位置。把底部当做一个整体的View的好处就是每一次改变输入框大小,里面的子控件会自动调用subLayout方法来进行布局,这样就只需要去管理整个底部View的位置就可以了。

-(void)layoutSubviews{
    [super layoutSubviews];
    self.voiceBtn.frame = CGRectMake(0, self.bounds.size.height-45, 45, 45);
    self.emoticonBtn.frame = CGRectMake(kScreenW-90, self.bounds.size.height-45, 45, 45);
    self.moreBtn.frame = CGRectMake(kScreenW-45, self.bounds.size.height-45, 45, 45);
    
    self.holdVoiceBtn.frame = CGRectMake(50, 5, kScreenW-150, 35);
}

这里涉及到一个问题就是键盘的高度,不可能跟更多和表情的View高度一样,所以要专门有一个全局变量来控制高度

2.监听改变UITextView的高度

个人认为最难的是监听IUITextView的高度的变化,本来我以为,只需要拿到UITextView里面的内容,然后来计算高度就可以了,但是发现UITextView会有一个顶部和底部的一个空白距离,如果只算文字的高度来赋值,是不行的必须在加上这个顶部和底部的空白距离,所以我使用另外一种算法

NSInteger height = ceilf([self sizeThatFits:CGSizeMake(self.bounds.size.width, MAXFLOAT)].height);

具体的我专门封装在了CFAITextView类中

3.各个按钮点击后的效果

各个按钮点击后的效果,这个技术含量不高,但是里面有很多的逻辑判断在里面,一定要先明确每一步做什么才能减少BUG,不然按钮点的顺序不一样可能就会有问题。
为了知道当前的输入类型所以专门要写一个枚举来记录当前的输入类型

//当前的类型
typedef enum : NSUInteger {
    noneType,
    keyBoradType,
    voiceBoradType,
    emtoiconType,
    moreType,
} ShowType;

@property (nonatomic,assign) ShowType showType;

4.监听用户是否在输入语音

微信语音效果

微信可以获取用户有没有在输入语音,并且在上面会有不同的提示,这个可以通过按钮的不同触发方式来实现,至于上划取消这个的实现,我想是因为输入框在底部,取消的话只能是上划,下面的不在屏幕内就直接发送出去了。

    [self.inputView.holdVoiceBtn addTarget:self action:@selector(holdVoiceBtnClike:) forControlEvents:UIControlEventTouchDragInside];
    [self.inputView.holdVoiceBtn addTarget:self action:@selector(holdVoiceBtnCancel:) forControlEvents:UIControlEventTouchDragOutside];
监听用户是否在输入语音

喜欢请给个Star
Dome地址:https://github.com/cf0717/talkShow

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,138评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,419评论 0 17
  • 《庄子》解,每章一读。 文: 曾子居卫,缊袍无表,颜色肿哙,手足胼胝。三日不举火,十年不制衣,正冠而缨绝,捉衿而肘...
    千里飘蓬阅读 823评论 0 0
  • 个人博客搭建完成,欢迎大家来访问哦黎默丶lymoo的博客 什么是node.js JavaScript是一个脚本语言...
    黎默丶lymoo阅读 417评论 0 4