博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信朋友圈评论功能的细节考虑及实现
阅读量:6240 次
发布时间:2019-06-22

本文共 1237 字,大约阅读时间需要 4 分钟。

1. 微信朋友圈

微信朋友圈的布局很容易,网上类似的代码也很多,但是评论功能有些细节的地方要考虑,主要是为了用户体验。

类似键盘不要遮挡评论框,评论框随着内容的增多变长这些网上的处理方法很多,这里就不列出来了。

微信朋友圈只要按了评论,对话框升起来正好是落在了这条状态的正下方,这个小细节有着非常好的用户体验,这种实现方式有很多,下面来说说我实现的方法。

2. 评论细节的实现

我的方法是,按下评论按钮的时候先把按钮所在的cell的尾部的位置坐标y保存下。

self.replyViewDraw = [cell convertRect:cell.bounds toView:self.view.window].origin.y + cell.frame.size.height;

然后在键盘升起来的时候,评论框也升起到键盘上方,此时键盘的位置坐标y减去上方保存的位置y,就是tableView需要移动的位置。

评论框移动的方法:更改frame.origin.y

tableview移动的方法:更改contentOffset.y

[UIView animateWithDuration:[dic[UIKeyboardAnimationDurationUserInfoKey] floatValue] animations:^{                        [UIView setAnimationCurve:[dic[UIKeyboardAnimationCurveUserInfoKey] doubleValue]];                        CGRect frame = self.replyInputView.frame;            frame.origin.y = frame.origin.y - keyboardRect.size.height + 52;            self.replyInputView.frame = frame;                        CGPoint point = self.familyTableView.contentOffset;                        point.y -= (frame.origin.y - self.replyViewDraw);            self.familyTableView.contentOffset = point;        }];

3. 朋友圈实现截图

朋友圈的功能基本上都实现了,不少细节也都考虑了,大家感兴趣的话可以下载下来看看,欢迎指正交流

github地址:https://github.com/stevenxiaoyang/familyGroup

转载于:https://www.cnblogs.com/stevenfukua/p/4645254.html

你可能感兴趣的文章
vue-waterfall2 基于Vue.js 瀑布流组件
查看>>
Vue一个案例引发的递归组件的使用
查看>>
Canvas 实现一个简单的贪吃蛇
查看>>
前后端导出/下载excel方法
查看>>
JVM之垃圾回收与内存动态分配
查看>>
Numpy中的广播原则/机制
查看>>
DOM编程系列之事件
查看>>
小程序加载svg图片
查看>>
JavaScript面向对象编程-多态
查看>>
sequelize 管理查询——一对一关联查询
查看>>
PHP下kafka的常用脚本实践
查看>>
AJAX
查看>>
百度地图绘制点、图形
查看>>
PHP 文件系统完全指南
查看>>
PyQt5,RadioButton
查看>>
js设计模式(二)-工厂模式
查看>>
前端技术周刊 2018-08-13:Web Components
查看>>
kube-proxy源码解析
查看>>
REM,你这磨人的小妖精!
查看>>
聊聊HystrixConcurrencyStrategy
查看>>