仿微信输入框

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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