之前有朋友让我写个朋友圈楼层评论的demo,本着帮着他人,提高自己的精神我就开始写了,因为能力有限,所以写的不是很好,如果有你觉得对你有用的地方可以看看,如果有不好的地方欢迎给我指出来.
先看看效果图吧.
效果差不多就是这样,我一点点分解出来,慢慢讲.....
首先先看看大体布局吧
整体是个tableview,每条信息用一个section表示,每个section2个cell,第一个cell是用户的名字,内容,时间.第二个cell里面就是回复.
首先,点击那个评论按钮弹出评论和点赞,再点一下就收回时怎么做的?首先在cell里面放一个view,view里面放评论和点赞按钮,将他们三个的width拖进代码里分别设置为:
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *dianzanWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *pinglunWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewWidth;
然后给外面的评论按钮添加一个点击事件.
-(void)showMore
{
if (_isSpread) {
[UIView animateWithDuration:0.3 animations:^{
[_viewWidth setConstant:80];
[_dianzanWidth setConstant:15];
[_pinglunWidth setConstant:15];
[self.contentView layoutIfNeeded];
_isSpread = NO;
}];
}
else{
[UIView animateWithDuration:0.3 animations:^{
[_viewWidth setConstant:0];
[_dianzanWidth setConstant:0];
[_pinglunWidth setConstant:0];
[self.contentView layoutIfNeeded];
_isSpread = YES;
}];
}
}
给autolayout添加动画需要用到[self.contentView layoutIfNeeded];这个方法.
然后点击评论后,弹出键盘,而且键盘上面还有一个textfield,这个是用到了textfield的inputAccessoryView这个属性了.
我是这样写的:
_textField = [[UITextField alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(0, 0, 300, 30)];
UIView *inputView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.contentView.frame.size.width, 30)];
inputView.backgroundColor = [UIColor grayColor];
textfield.placeholder = @"请输入评论";
[inputView addSubview:textfield];
textfield.delegate = self;
[_textField setInputAccessoryView:inputView];
_textField.delegate = self;
[self.contentView addSubview:_textField];
点击评论按钮就让_textField成为第一响应.
再创建一个model,里面是这样的.
Model.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Model : NSObject
@property (nonatomic, strong)NSString *username;//用户名
@property (nonatomic, strong)NSString *content;//内容
@property (nonatomic, strong)NSString *time;//时间
@property (nonatomic, strong)NSMutableArray *pinglunArr;//评论数组
-(CGFloat)setHeight;//根据content设置高度
@end
Model.m
#import "Model.h"
@implementation Model
-(CGFloat)setHeight
{
CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 88;
CGFloat contentH = [_content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14.0]}
context:nil].size.height;
return 100 + contentH;
}
@end
这个model就是tableview里面每个section的数据.
还有个问题就是怎么根据评论数组去显示评论呢,我是这样处理的.
-(void)setupWithArray:(NSMutableArray *)array
{
for (UILabel *label in self.contentView.subviews) {
[label removeFromSuperview];
}
if (array.count == 0) {
return;
}
for (NSInteger i = 0; i < array.count; i++) {
if (i == 0) {
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 0, 300, [self getHeitht:array[0]])];
[label setFont:[UIFont systemFontOfSize:12]];
label.tag = 1000 + i;
label.text = array[0];
label.numberOfLines = 0;
[self.contentView addSubview:label];
}
else
{
UILabel *lastLabel = (UILabel *)[self.contentView viewWithTag:999 + i];//获取到签名的那个label
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, lastLabel.frame.origin.y + lastLabel.frame.size.height, 300, [self getHeitht:array[i]])];
label.tag = 1000 + i;
label.text = array[i];
label.numberOfLines = 0;
[label setFont:[UIFont systemFontOfSize:12]];
[self.contentView addSubview:label];
}
}
}
-(CGFloat)getHeitht:(NSString *)string
{
CGFloat contentW = 300;
CGFloat contentH = [string boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12.0]}
context:nil].size.height;
NSLog(@"%.2f",contentH);
return contentH;
}
这个方法就是根据数组的个数去创建多少个label,然后每个label根据上面那个label的位置去摆放自己的位置.
然后再看看viewcontroller吧.
#import "ViewController.h"
#import "TestCell.h"
#import "Model.h"
#import "PinglunCell.h"
#define WEAKSELF __weak typeof(&*self) weakSelf = self;
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>
@property (strong, nonatomic) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *dataArr;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
_dataArr = [NSMutableArray array];
for (NSInteger i = 0; i < 7; i ++) {
Model *model = [[Model alloc]init];
model.username = [NSString stringWithFormat:@"徐老茂%ld",i];
model.content = @"这是个测试的sdjfk;saljdfkl;;sajdklfjsa;ldkjf;aslkdjf;laksdjf;";
model.time = @"1小时前";
model.pinglunArr = [NSMutableArray array];
[_dataArr addObject:model];
}
[_tableView reloadData];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == 0) {
Model *model = _dataArr[indexPath.section];
return [model setHeight];
}
else
{
CGFloat height = 0;
Model *model = _dataArr[indexPath.section];
for (NSString *str in model.pinglunArr) {
height += [self setHeight:str];
}
return height;
}
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self.view endEditing:YES];
}
-(CGFloat)setHeight:(NSString *)pinglun
{
CGFloat contentW = [UIScreen mainScreen].bounds.size.width - 20;
CGFloat contentH = [pinglun boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12.0]}
context:nil].size.height;
return contentH + 5;
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return _dataArr.count;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
Model *model = _dataArr[section];//如果有评论就显示2个cell,没有评论就显示一个cell
if (!model.pinglunArr.count) {
return 1;
}
return 2;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == 0 ) {
static NSString *identifier = @"testcell";
TestCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
cell.tag = 1000 + indexPath.section;
[cell setupWithModel:_dataArr[indexPath.section]];
WEAKSELF
[cell setPinglunBlock:^(Model *model, NSInteger section){
[weakSelf.dataArr replaceObjectAtIndex:section withObject:model];
[weakSelf.tableView reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];
}];
return cell;
}else
{
static NSString *identifier = @"pingluncell";
PinglunCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
Model *model = _dataArr[indexPath.section];
[cell setupWithArray:model.pinglunArr];
return cell;
}
}
@end
那么还剩一个问题,就是怎么在输入完了之后点击ruturn然后把输入的内容放到数据源呢.
我们在点击评论按钮是会获取那个cell是第几个section,因为在我应经在返回cell的代理方法里面设置了cell的tag值
cell.tag = 1000 + indexPath.section;
我是这样做的,在testcell.h里面建一个block,
typedef void(^PinglunBlock)(Model *model,NSInteger section);
然后在点击return的方法里
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
[_textField resignFirstResponder];
NSMutableArray *arr = _model.pinglunArr;
[arr addObject:textField.text];
_model.pinglunArr = arr;
self.pinglunBlock(_model,self.tag - 1000);
return true;
}
在viewcontroller返回tableviewcell的代理方法里有
[cell setPinglunBlock:^(Model *model, NSInteger section){
[weakSelf.dataArr replaceObjectAtIndex:section withObject:model];
[weakSelf.tableView reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];
}];
这样就把评论的文字添加到数据源里.
好了,思路差不多就是这样,写的不是很好,以前也没遇到过这种类似的需求,所以肯定有一些很笨拙的地方,大家见谅,也希望大家能提出来.祝大家天天开心😄
