之前有朋友讓我寫(xiě)個(gè)朋友圈樓層評(píng)論的demo,本著幫著他人,提高自己的精神我就開(kāi)始寫(xiě)了,因?yàn)槟芰τ邢?所以寫(xiě)的不是很好,如果有你覺(jué)得對(duì)你有用的地方可以看看,如果有不好的地方歡迎給我指出來(lái).
先看看效果圖吧.
效果差不多就是這樣,我一點(diǎn)點(diǎn)分解出來(lái),慢慢講.....
首先先看看大體布局吧
整體是個(gè)tableview,每條信息用一個(gè)section表示,每個(gè)section2個(gè)cell,第一個(gè)cell是用戶的名字,內(nèi)容,時(shí)間.第二個(gè)cell里面就是回復(fù).
首先,點(diǎn)擊那個(gè)評(píng)論按鈕彈出評(píng)論和點(diǎn)贊,再點(diǎn)一下就收回時(shí)怎么做的?首先在cell里面放一個(gè)view,view里面放評(píng)論和點(diǎn)贊按鈕,將他們?nèi)齻€(gè)的width拖進(jìn)代碼里分別設(shè)置為:
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *dianzanWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *pinglunWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewWidth;
然后給外面的評(píng)論按鈕添加一個(gè)點(diǎn)擊事件.
-(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添加動(dòng)畫(huà)需要用到[self.contentView layoutIfNeeded];這個(gè)方法.
然后點(diǎn)擊評(píng)論后,彈出鍵盤(pán),而且鍵盤(pán)上面還有一個(gè)textfield,這個(gè)是用到了textfield的inputAccessoryView這個(gè)屬性了.
我是這樣寫(xiě)的:
_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 = @"請(qǐng)輸入評(píng)論";
[inputView addSubview:textfield];
textfield.delegate = self;
[_textField setInputAccessoryView:inputView];
_textField.delegate = self;
[self.contentView addSubview:_textField];
點(diǎn)擊評(píng)論按鈕就讓_textField成為第一響應(yīng).
再創(chuàng)建一個(gè)model,里面是這樣的.
Model.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Model : NSObject
@property (nonatomic, strong)NSString *username;//用戶名
@property (nonatomic, strong)NSString *content;//內(nèi)容
@property (nonatomic, strong)NSString *time;//時(shí)間
@property (nonatomic, strong)NSMutableArray *pinglunArr;//評(píng)論數(shù)組
-(CGFloat)setHeight;//根據(jù)content設(shè)置高度
@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
這個(gè)model就是tableview里面每個(gè)section的數(shù)據(jù).
還有個(gè)問(wèn)題就是怎么根據(jù)評(píng)論數(shù)組去顯示評(píng)論呢,我是這樣處理的.
-(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];//獲取到簽名的那個(gè)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;
}
這個(gè)方法就是根據(jù)數(shù)組的個(gè)數(shù)去創(chuàng)建多少個(gè)label,然后每個(gè)label根據(jù)上面那個(gè)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 = @"這是個(gè)測(cè)試的sdjfk;saljdfkl;;sajdklfjsa;ldkjf;aslkdjf;laksdjf;";
model.time = @"1小時(shí)前";
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];//如果有評(píng)論就顯示2個(gè)cell,沒(méi)有評(píng)論就顯示一個(gè)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
那么還剩一個(gè)問(wèn)題,就是怎么在輸入完了之后點(diǎn)擊ruturn然后把輸入的內(nèi)容放到數(shù)據(jù)源呢.
我們?cè)邳c(diǎn)擊評(píng)論按鈕是會(huì)獲取那個(gè)cell是第幾個(gè)section,因?yàn)樵谖覒?yīng)經(jīng)在返回cell的代理方法里面設(shè)置了cell的tag值
cell.tag = 1000 + indexPath.section;
我是這樣做的,在testcell.h里面建一個(gè)block,
typedef void(^PinglunBlock)(Model *model,NSInteger section);
然后在點(diǎn)擊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];
}];
這樣就把評(píng)論的文字添加到數(shù)據(jù)源里.
好了,思路差不多就是這樣,寫(xiě)的不是很好,以前也沒(méi)遇到過(guò)這種類似的需求,所以肯定有一些很笨拙的地方,大家見(jiàn)諒,也希望大家能提出來(lái).祝大家天天開(kāi)心??
