iOS評論頁面的簡單思路

需求: 做一個類似於微信朋友圈一樣的帶有展示和評論 回復功能的頁面

思路: 1.整個頁面可以使用UITableView進行實現

       2.將發布的信息主體作為UITableView的區頭

       3.將評論信息作為UITableView的cell

這樣我們再添加一些簡單的邏輯和控件 就能實現簡單的評論頁面

簡單的做出來的效果如下圖

那么下面我們看看具體的代碼實現方式:

控制器頁面:

#import "ViewController.h"
#import "CircleObj.h"
#import "HeardFooterView.h"
#import "CircleTableViewCell.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UITextFieldDelegate>
@property (nonatomic, strong) UITableView *WWTableView;
@property (nonatomic, strong) NSMutableArray *titleArray;//儲存主體信息
@property (nonatomic, strong) NSMutableArray *dataArray;//儲存評論
@property (nonatomic, strong) UITextField *inputTextField;
@property (nonatomic, strong) UIView *inPutView;

@property (nonatomic, assign) int reviewInSecion;//記錄評論屬於哪一個分區
@property (nonatomic, assign) int reviewInRow;//記錄回復屬於哪一行

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"朋友圈";
    self.view.backgroundColor = [UIColor redColor];
    _reviewInRow = -1;
    _reviewInSecion = 0;
    
    //增加監聽，當鍵盤出現或改變時收出消息
    
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillShow:)
                                                 name:UIKeyboardWillShowNotification
                                               object:nil];
    
    //增加監聽，當鍵退出時收出消息
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide:)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
    
    _titleArray = [NSMutableArray array];
    _dataArray = [NSMutableArray array];
    NSArray *comNameArr = @[@"建華實業有限公司",@"陳氏紡織加工公司",@"中州貴金屬交易有限公司"];
    NSArray *contactNameArr = @[@"建華",@"買布找我",@"誠交朋友"];
    NSArray *topTitleArr = @[@"我公司推出一款新品,有需求的朋友聯系我~",@"我發布了一條新品采購需求,有這種面料的朋友聯系我~",@"未來一段時間,貴金屬持續上漲,誠邀各位傾情加入~"];
    NSArray *hisTitleArr = @[@"新品樣式如圖",@"誠心找這種面料,有面料的朋友趕快聯系我,來了請你喝茶",@"大度能容天下朋,誠信鑄就大中州~"];
    NSArray *numArr = @[@"數量: 面議",@"數量: 1000米",@""];
    NSArray *timeArr = @[@"1分鍾前",@"5分鍾前",@"2小時前"];
    NSArray *addressArr = @[@"廣東省-深圳市",@"杭州市-余杭區",@"安徽省-合肥市"];
    
    NSArray *da1 = @[@"東方不敗: 贊一個!",@"李忘生: 研發速度可以啊",@"李老板: 這個我們公司有需求,具體的私聊~"];
    NSArray *da2 = @[@"猴子:別信他,上次還欠我一頓飯,你說上次我給你找的,快請我吃飯,不然我就把你的罪行昭告天下~",@"小姚:看樣子這次是老板自己發的信息了[偷笑]"];
    NSArray *da3 = @[@"誠交朋友:[抱拳]"];
    [_dataArray addObject:da1];
    [_dataArray addObject:da2];
    [_dataArray addObject:da3];
    
    for (int i = 0; i < 3; i ++) {
        CircleObj *model = [[CircleObj alloc] init];
        model.companyName = comNameArr[i];
        model.contactName = contactNameArr[i];
        model.topTitle = topTitleArr[i];
        model.hisTitle = hisTitleArr[i];
        model.amount = numArr[i];
        model.timeString = timeArr[i];
        model.address = addressArr[i];
        [_titleArray addObject:model];
    }
    
    [self loadUI];
    [self loadInPutView];
}


- (void)loadUI{
    _WWTableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    _WWTableView.delegate = self;
    _WWTableView.dataSource = self;
    _WWTableView.backgroundColor = [UIColor whiteColor];
    _WWTableView.tableFooterView = [UIView new];
    _WWTableView.separatorStyle = UITableViewCellSelectionStyleNone;
    [self.view addSubview:_WWTableView];
}

#pragma mark - inputView
- (void)loadInPutView{
    _inPutView = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height+45, self.view.frame.size.width, 45)];
    _inPutView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:_inPutView];
    
    
    _inputTextField = [[UITextField alloc] initWithFrame:CGRectMake(12, 6, self.view.frame.size.width - 24, 30)];
    [_inputTextField setBorderStyle:UITextBorderStyleRoundedRect];
    _inputTextField.backgroundColor = [UIColor clearColor];
    
    [_inputTextField setValue:[UIFont boldSystemFontOfSize:15] forKeyPath:@"_placeholderLabel.font"];
    _inputTextField.font = [UIFont systemFontOfSize:14];
    _inputTextField.textColor = [UIColor blackColor];
    _inputTextField.delegate = self;
    _inputTextField.returnKeyType=UIReturnKeySend;
    [_inPutView addSubview:_inputTextField];
    
}
#pragma mark - UITableViewDelegate,UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSArray *arr = _dataArray[section];
    return arr.count;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return _titleArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellString = @"cell";
    CircleTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellString];
    if (!cell) {
        cell = [[CircleTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellString];
    }
    cell.selectionStyle =UITableViewCellSelectionStyleNone;
    cell.ciecleLabel.text = _dataArray[indexPath.section][indexPath.row];
    [cell resetLablFrame:_dataArray[indexPath.section][indexPath.row]];
    return cell;
}

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    HeardFooterView*headV=[tableView  dequeueReusableHeaderFooterViewWithIdentifier:@"headv"];
    
    if (!headV) {
        headV=[[HeardFooterView alloc]initWithReuseIdentifier:@"headv"];
        
    }
    CircleObj *model = [[CircleObj alloc] init];
    model = _titleArray[section];
    headV.contactLabel.text = model.contactName;
    headV.companyLabel.text = model.companyName;
    headV.topTitleLabel.text = model.topTitle;
    headV.hisTitleLabel.text = model.hisTitle;
    headV.amountLabel.text = model.amount;
    headV.addressLabel.text = model.address;
    headV.timeLabel.text = model.timeString;
    
    headV.reviewButton.tag = 100 + section;
    [headV.reviewButton addTarget:self action:@selector(reviewButtonAction:) forControlEvents:UIControlEventTouchUpInside];
    headV.zanButton.tag = 200 + section;
    [headV.zanButton addTarget:self action:@selector(zanButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        
    return headV;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return [CircleTableViewCell heightOfString:_dataArray[indexPath.section][indexPath.row]];
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 200;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
    _reviewInSecion = (int)indexPath.section;
    _inputTextField.placeholder = @"回復 李忘生";
    _reviewInRow = (int)indexPath.row;
    [_inputTextField becomeFirstResponder];
}

//添加評論
- (void)reviewButtonAction:(UIButton *)button{
    int a = (int)button.tag - 100; //在哪一個分區
    _inputTextField.placeholder = @"評論";
    _reviewInRow = -1;
    _reviewInSecion = a;
    [_inputTextField becomeFirstResponder];
}

//贊
- (void)zanButtonAction:(UIButton *)button{
//    int a = (int)button.tag - 200;
}

//當鍵盤出現或改變時調用
- (void)keyboardWillShow:(NSNotification *)aNotification{
    //獲取鍵盤的高度
    NSDictionary *userInfo = [aNotification userInfo];
    NSValue *aValue = [userInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
    CGRect keyboardRect = [aValue CGRectValue];
    int height = keyboardRect.size.height;
    [UIView animateWithDuration:0.3 animations:^{
        _inPutView.frame = CGRectMake(0, self.view.frame.size.height-45-height, self.view.frame.size.width, 45);
    }];
}

//當鍵退出時調用
- (void)keyboardWillHide:(NSNotification *)aNotification
{
    [UIView animateWithDuration:0.3 animations:^{
        _inPutView.frame = CGRectMake(0, self.view.frame.size.height + 45, self.view.frame.size.width, 45);
    }];
}

#pragma mark - UITextFieldDelegate 關於鍵盤的操作
//點擊發送
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    
    if (textField.text.length!=0) {
        NSMutableArray *arr = [NSMutableArray array];
        [arr addObjectsFromArray:_dataArray[_reviewInSecion]];
        if (_reviewInRow == -1) {
            NSString *str = [NSString stringWithFormat:@"李一: %@",textField.text];
            [arr addObject:str];
            [_dataArray replaceObjectAtIndex:_reviewInSecion withObject:arr];
        }else{
            NSString *str = [NSString stringWithFormat:@"李一 回復 李忘生:%@",textField.text];
            [arr insertObject:str atIndex:_reviewInRow + 1];
            [_dataArray replaceObjectAtIndex:_reviewInSecion withObject:arr];
        }
        
        [_WWTableView reloadData];
    }
    textField.text = @"";
    [_inputTextField resignFirstResponder];
    return YES;
}

下面是自定義區頭

#import <UIKit/UIKit.h>

@interface HeardFooterView : UITableViewHeaderFooterView
@property (nonatomic, strong) UIImageView *comImageView;
@property (nonatomic, strong) UILabel *contactLabel;
@property (nonatomic, strong) UILabel *companyLabel;
@property (nonatomic, strong) UILabel *topTitleLabel;
@property (nonatomic, strong) UILabel *hisTitleLabel;
@property (nonatomic, strong) UILabel *amountLabel;
@property (nonatomic, strong) UILabel *addressLabel;
@property (nonatomic, strong) UILabel *timeLabel;
@property (nonatomic, strong) UIImageView *proImageView;


@property (nonatomic, strong) UIButton *reviewButton;
@property (nonatomic, strong) UIButton *zanButton;

@end


#import "HeardFooterView.h"

@implementation HeardFooterView

-(instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{
    
    if (self=[super initWithReuseIdentifier:reuseIdentifier]) {
        
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 200)];
        view.backgroundColor = [UIColor whiteColor];
        [self addSubview:view];
        
        self.comImageView = [[UIImageView alloc] initWithFrame:CGRectMake(12, 10, 40, 40)];
        self.comImageView.backgroundColor = [UIColor redColor];
        self.comImageView.layer.cornerRadius = 20;
        self.comImageView.clipsToBounds = YES;
        [self addSubview:self.comImageView];
        
        self.contactLabel = [[UILabel alloc] initWithFrame:CGRectMake(62, 10, 200, 21)];
        self.contactLabel.textColor = [UIColor blackColor];
        self.contactLabel.textAlignment = 0;
        self.contactLabel.font = [UIFont systemFontOfSize:20];
        [self addSubview:self.contactLabel];
        
        self.companyLabel = [[UILabel alloc] initWithFrame:CGRectMake(62, 35, 200, 16)];
        self.companyLabel.font = [UIFont systemFontOfSize:15];
        self.companyLabel.textColor = [UIColor blackColor];
        [self addSubview:self.companyLabel];
        
        self.topTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(32, 60, [[UIScreen mainScreen] bounds].size.width - 44, 18)];
        self.topTitleLabel.textColor = [UIColor blueColor];
        self.topTitleLabel.font = [UIFont systemFontOfSize:17];
        [self addSubview:self.topTitleLabel];
        
        self.hisTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(52, 80, 200, 36)];
        self.hisTitleLabel.textColor = [UIColor redColor];
        self.hisTitleLabel.font = [UIFont systemFontOfSize:17];
        [self addSubview:self.hisTitleLabel];
        
        self.amountLabel = [[UILabel alloc] initWithFrame:CGRectMake(52, self.hisTitleLabel.frame.origin.y + 40, 200, 16)];
        self.amountLabel.font = [UIFont systemFontOfSize:15];
        self.amountLabel.textColor = [UIColor cyanColor];
        [self addSubview:self.amountLabel];
        
        self.addressLabel = [[UILabel alloc] initWithFrame:CGRectMake(52, self.amountLabel.frame.origin.y + 20, 200, 16)];
        self.addressLabel.font = [UIFont systemFontOfSize:15];
        self.addressLabel.textColor = [UIColor purpleColor];
        [self addSubview:self.addressLabel];
        
        self.proImageView = [[UIImageView alloc] initWithFrame:CGRectMake([[UIScreen mainScreen] bounds].size.width - 92, self.hisTitleLabel.frame.origin.y, 80, 80)];
        self.proImageView.backgroundColor = [UIColor redColor];
        [self addSubview:self.proImageView];
        
        self.timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(32, self.addressLabel.frame.origin.y + 30, 100, 14)];
        self.timeLabel.font = [UIFont systemFontOfSize:13];
        self.timeLabel.textColor = [UIColor greenColor];
        [self addSubview:self.timeLabel];
        
        
        self.zanButton = [UIButton buttonWithType:UIButtonTypeCustom];
        self.zanButton.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width - 12 - 80, self.timeLabel.frame.origin.y - 5, 80, 20);
        [self.zanButton setTitle:@"贊" forState:UIControlStateNormal];
        self.zanButton.titleLabel.font = [UIFont systemFontOfSize:15];
        [self.zanButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        self.zanButton.backgroundColor = [UIColor redColor];
        [self addSubview:self.zanButton];
        
        self.reviewButton = [UIButton buttonWithType:UIButtonTypeCustom];
        self.reviewButton.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width - 12 - 170, self.zanButton.frame.origin.y, 80, 20);
        [self.reviewButton setTitle:@"添加評論" forState:UIControlStateNormal];
        self.reviewButton.titleLabel.font = [UIFont systemFontOfSize:15];
        [self.reviewButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        self.reviewButton.backgroundColor = [UIColor redColor];
        [self addSubview:self.reviewButton];
        
        }
    
    return self;
    
}

@end

下面是自定義cell

#import <UIKit/UIKit.h>

@interface CircleTableViewCell : UITableViewCell

//@property (nonatomic, strong) UILabel *nameLabel;
@property (nonatomic, strong) UILabel *ciecleLabel;
@property (nonatomic, strong) UIView *view;

//根據傳入的文本計算cell的高度
+ (CGFloat)heightOfString:(NSString *)aString;
//根據傳入的文本重新設置Label的frame
- (void)resetLablFrame:(NSString *)aString;
@end

#import "CircleTableViewCell.h"

@implementation CircleTableViewCell
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        
        _view = [[UIView alloc] initWithFrame:CGRectMake(55, 0, [[UIScreen mainScreen] bounds].size.width - 67, 0)];
        _view.backgroundColor = [UIColor grayColor];
        [self addSubview:_view];
        
        self.ciecleLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, [[UIScreen mainScreen] bounds].size.width - 72, 25)];
        self.ciecleLabel.textColor = [UIColor blackColor];
        self.ciecleLabel.numberOfLines = 0;
        self.ciecleLabel.font = [UIFont systemFontOfSize:13];
        [self addSubview:self.ciecleLabel];
        
    }
    return self;
}



+(CGFloat)heightOfString:(NSString *)aString
{
    //計算cell的高度
    CGRect rect = [aString boundingRectWithSize:CGSizeMake([UIScreen mainScreen].bounds.size.width - 72, 0) options:NSStringDrawingUsesLineFragmentOrigin |
                   NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:13]} context:nil];
    return rect.size.height + 10;
}

//重新設定label的frame
- (void)resetLablFrame:(NSString *)aString
{
    //計算cell的高度
    CGRect rect = [aString boundingRectWithSize:CGSizeMake([UIScreen mainScreen].bounds.size.width - 72, 0) options:NSStringDrawingUsesLineFragmentOrigin |
                   NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:13]} context:nil];
    //重新設定label的frame
    CGRect frame = _ciecleLabel.frame;
    _ciecleLabel.frame = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, rect.size.height);
    _view.frame = CGRectMake(55, 0, [[UIScreen mainScreen] bounds].size.width - 77, rect.size.height + 10);
}

通過以上的方法就能簡單的實現評論頁面,寫的不是很工整,在這里只是簡單的提供一下思路

下面來看看點擊評論和回復的頁面樣式